Compartilhar via

Enabling sorting in a JS Grid control (Sivaraman Krishnan)

  • Artigo

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

  • Anonymous
    January 31, 2011
    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?

  • Anonymous
    February 03, 2011
    Heggdal - I am writing an article for saving the changes back to server. Will post it soon.

  • Anonymous
    February 07, 2011
    Sivaraman : i'm really looking forward to read that article then :)

  • Anonymous
    June 13, 2011
    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

  • Anonymous
    June 21, 2011
    Hi Roy, Can you please explain me your requirement of updating total rows?

  • Anonymous
    March 06, 2012
    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.

  • Anonymous
    March 06, 2012
    I got it working now. Thanks anyway:)

  • Anonymous
    March 26, 2012
    Yuhai, can you share how you got filtering working? I am missing something.. thanks,

  • Anonymous
    March 27, 2012
    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.

  • Anonymous
    July 03, 2013
    Hi, Can anyone tells about grouping data possibility? Other words "group by column" Thanks.