Enabling sorting in a JS Grid control (Sivaraman Krishnan)

  • Article

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);