Enabling sorting in a JS Grid control (Sivaraman Krishnan)


This how-to demonstrates how to enable sorting on a basic JS Grid control. This how-to builds on the How to: Create a Basic JS Grid topic in the SharePoint 2010 SDK, and assumes that you’ve created a basic JS Grid control as outlined in that topic.

Prerequisites

  • Microsoft SharePoint Foundation 2010

  • Microsoft Visual Studio 2010

  • Completion of How to: Create a Basic JS Grid

Creating a sortable grid

Creating a sortable grid involves the following steps:

  1. Enabling sort behaviour on columns

  2. Using a JS Grid delegate to handle the sort in ECMAScript (JavaScript, Jscript)

  3. Writing a callback to sort the data and rebind the grid

To enable sorting with IsSortable property

  1. Open the JsGrid solution you created in the previous how-to.

  2. Open GridUtilities.cs.

  3. In GetGridColumns method, set the IsSortable property of GridColumn to true. To  make specific columns sortable, use conditional statements on the column name, which is unique.

 

The code should appear as follows:

public static IList<GridColumn> GetGridColumns(DataTable table)

{

    List<GridColumn> r = new List<GridColumn>();

    foreach (DataColumn iterator in table.Columns)

    {

        /* Columns are visible in the grid; we don’t want these

            as grid columns. */

        // HierarchyParentKey is used in the How to: Create a Hierarchy Grid topic.

 

        if (iterator.ColumnName != “Key”

                && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName

            //&& iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName // uncomment for the Create a Gantt Chart Using JS Grid How-To.

                && iterator.ColumnName != “HierarchyParentKey”

                && iterator.ColumnName.Substring(0, 5) != “costq”

                && iterator.ColumnName.Substring(0, 5) != “Quart”)

        {

            GridColumn col = new GridColumn();

            // Point the column at a fieldKey name.

            col.FieldKey = iterator.ColumnName;

            // Give the column header a name.

            col.Name = iterator.ColumnName;

            // Define the column width.

            col.Width = 210;

            // Enable sorting for the column

            col.IsSortable = true;

 

            // Define column settings.

            if (iterator.ColumnName == “Department”)

            {

                col.IsHidable = false;

            }

            if (iterator.ColumnName == “Yearly Estimate”)

            {

                col.IsSortable = true;

            }

 

            // Add the column.

            r.Add(col);

        }

    }

    return r;

}

Note that IsSortable property is used to enable or disable sorting on GridColumn. The IsSortable property is set to false by default.

 

Using a JS Grid delegate to handle the sort

The JS Grid control supports a variety of delegates. The Sort delegate is used to handle sort on grid. For the list of delegates supported by JS Grid control refer JS Grid Delegates.

 

 

To use the Sort delegate

 

  1. Open the JSGrid solution.
  2. Open JSGridWebPartUserControl.ascx.
  3. Add the following to the ECMAScript code:

  • jsGridControl.SetDelegate(SP.JsGrid.DelegateType.Sort, HandleSort);

  • HandleSort method to handles the sort event and

  • DisplaySortedData method to rebind the sorted data back to grid

Global level variables are added in order to maintain the sort, and store initial data source bound to grid, which can be reused to bind the grid after callback.

The code should appear as follows:

 

<SharePoint:JSGrid ID=”_grid” runat=”server” JSControllerClassName=”GridManager”

    JSControllerInstanceName=”GM” ShowLoadingIndicator=”true” />

<script type=”text/javascript”>

    Type.registerNamespace(“GridManager”);

    GridManager = function () {

 

        // Variables for the JSGrid control instance and the grid properties.

        var _jsGridControl;

        var _props;

 

        // Variables for sorting.

        var _orderByColumnName;

        var _isDescending;

 

        // Variable for the grid data source.

        var _tableCache;

 

        this.Init = function (jsGridControl, initialData, props) {

 

            // Assign it to global variable

            _jsGridControl = jsGridControl;

            _props = props;

 

            // Delegate to handle sort

            jsGridControl.SetDelegate(SP.JsGrid.DelegateType.Sort, HandleSort);

 

            var dataSource = new SP.JsGrid.StaticDataSource(initialData);

 

            // grid data source

            _tableCache = dataSource.tableCache;

            var jsGridParams = dataSource.InitJsGridParams();

            jsGridControl.Init(jsGridParams);

        }

 

        // HandleSort is called when the ascending/descending header dropdown is clicked.

        function HandleSort(newSortedCols) {

            _orderByColumnName = newSortedCols[0].columnName;

            _isDescending = newSortedCols[0].isDescending;

 

            // Disable the grid while it is being sorted.

            _jsGridControl.Disable();

 

            // Send the sorting values to the server by using a callback.

            var args = Sys.Serialization.JavaScriptSerializer.serialize({

                OrderByColumnName: _orderByColumnName,

                IsDescending: _isDescending

            });

 

            eval(_props.callbackScript);

        }

 

        // The DisplaySortedData function is called through the GridManager instance (named “GM”).

        // Bind the sorted data to the JSGrid object, and show the grid again.

        this.DisplaySortedData = function (sortedData) {

            // Show the sorted data in the grid.

            if (sortedData && sortedData != ”) {

                var deserializedGridData = SP.JsGrid.Deserializer.DeserializeFromJson(sortedData);

                var jsgridDeserializer = new SP.JsGrid.Deserializer(deserializedGridData, SP.JsGrid.DeserializationMode.RowView, _props.keyColumn);


Comments (10)

  1. Heggdal says:

    Thanks for nice walkthrough.

    I'm trying to enable editing in JS Grid where the grid get its data from a SharePoint List. I followed the SDK example on how to import data from a SharePoint list into the Grid, and also how to enable edit in the grid. But there are no examples on how I can write changes back to the SharePoint list from the JS Grid.

    Anyone?

  2. Heggdal – I am writing an article for saving the changes back to server. Will post it soon.

  3. Heggdal says:

    Sivaraman : i'm really looking forward to read that article then 🙂

  4. Roy Gilboa says:

    Hi Sivaraman, very nice and usfull starter.

    Could you help me out with updating total rows in Pivoted grid? I managed to display a pivoted grid and allpow saving changed to the database as well as group rows. I now want to calculate changes and update the summary rows after cell edit completed event. Any idea how to achieve this behavior?

    Thanks,

    Roy

  5. Hi Roy,

    Can you please explain me your requirement of updating total rows?

  6. Yuhai says:

    Thank you for the information. Can you provide an example how to enable filtering on JS Grid, please?

    I tried to enable it by setting the EnableAutoFilterEntryGeneration Property. It didn't work. I also tried to set the AutoFilterColumnKeys along with the EnableAutoFilterEntryGeneration. It didn't work either.

    Thanks.

  7. Yuhai says:

    I got it working now. Thanks anyway:)

  8. Mike says:

    Yuhai, can you share how you got filtering working? I am missing something..

    thanks,

  9. Mike says:

    Funny. I found the solution to filtering from the Patent site. Basically you have to have the following delegates assigned.

    SP.JsGrid.DelegateType.LaunchFilterDialog

    SP.JsGrid.DelegateType.GetAutoFilterEntries

    SP.JsGrid.DelegateType.AutoFilter

    also

    tableViewParams.bAutoFilterableColumns = true;

    and in your C# include GetGridColums make sure to set col.IsAutoFilterable = true;

    or the auto filters do not appear.

  10. Andrew says:

    Hi,

    Can anyone tells about grouping data possibility? Other words "group by column"

    Thanks.