I am working on SharePoint JSGrid. I am able to implement the sort functionality in JSGrid. Now I want to implement the grouping and filtering in my custom JSGrid.

For filtering we have to attached the following delegate to the JSGrid control.


When I applied this to my function I am getting loading... message every time. I guess this is due to the empty function delegate I used.

Please see the attached image with this.

enter image description here

I just need help: How can I show the filter menu in JSGrid?

<script type="text/javascript">


    GridManager = function () {

        // Variables for the JSGrid control instance and the grid properties. 
        var _jsGridControl;
        var _props;
        // Variables for sorting. 
        var _orderByColumnName;
        var _isDescending;
        var _Command;
        // Variable for the grid data source. 
        var _tableCache;
        var _filter;
        this.Init = function (jsGridControl, initialData, props) {
            // Assign it to global variable 
            _jsGridControl = jsGridControl;
            _props = props;
            // Delegate to handle sort 

            // jsGridControl.tableViewParams.bAutoFilterableColumns = true;

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

            jsGridControl.SetDelegate(SP.JsGrid.DelegateType.GetAutoFilterEntries, FilterMenu);

            jsGridControl.SetDelegate(SP.JsGrid.DelegateType.LaunchFilterDialog, FilterDialog);

            jsGridControl.SetDelegate(SP.JsGrid.DelegateType.AutoFilter, HandleFilter);

            var dataSource = new SP.JsGrid.StaticDataSource(initialData);
            // grid data source 
            _tableCache = dataSource.tableCache;
            var jsGridParams = dataSource.InitJsGridParams();

            jsGridParams.tableViewParams.bAutoFilterableColumns = true;



        function FilterDialog(newState) {


        function FilterMenu() { 


        function HandleFilter(newState) {

            _filter = newState;
            var args = Sys.Serialization.JavaScriptSerializer.serialize({
                Command: "Filter",
                FilterField: _filter[0].columnName,
                FilterValue: _filter[0],
                FilterOp: "Eq"

            // alert("Handle Filter," + "Title" + ":" + newState["Title"]);

        // HandleSort is called when the ascending/descending header dropdown is clicked. 
        function HandleSort(newSortedCols) {

            _orderByColumnName = newSortedCols[0].columnName;
            _isDescending = newSortedCols[0].isDescending;
            _Command = "Sort";
            // Disable the grid while it is being sorted. 
            // Send the sorting values to the server by using a callback. 
            var args = Sys.Serialization.JavaScriptSerializer.serialize({
                OrderByColumnName: _orderByColumnName,
                IsDescending: _isDescending
                , Command: _Command


        // 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);
                _tableCache.AddRawDataToCache(ConvertAssocArrayKeysToArray(jsgridDeserializer.data), jsgridDeserializer.data);


        function ConvertAssocArrayKeysToArray(assocArray) {
            var r = [];
            for (var key in assocArray) {
            return r;



I need help on how to write the FiterMenu function code.

3 Answers 3


To show values and not "Loading", when you initialize GridSerializer, you need fill 2 more properties: EnableAutoFilterEntryGeneration and AutoFilterColumnKeys, and when you create "GridColumn",set IsAutoFilterable = true

Example: GridColumn initialization:

*GridColumn col = new GridColumn();
col.FieldKey = "DepartmentManager";
col.Name = "DepartmentManager";
col.Width = 210;
col.IsAutoFilterable = true;*

Grid serializer intialization:

*GridSerializer gds = new GridSerializer(SerializeMode.Full,
                    data, "Key", new FieldOrderCollection(new String[] { "Department" }),
                    GridUtilities.GetGridFields(data), GridUtilities.GetGridColumns(data));
gds.EnableAutoFilterEntryGeneration = true;
gds.AutoFilterColumnKeys = new List<string>() { "Department Manager" };*

enter image description here

whether you need custom filters, col.IsAutoFilterable must be false;

Javascript code:

   *//Delegate GetAutoFilterEntries
   _jsGridControl.SetDelegate(SP.JsGrid.DelegateType.GetAutoFilterEntries, FilterMenu);*

//In function FilterMenu, fnSuccess need custom values:

*function FilterMenu(currentAutoFilterState, initiatingColumnKey, columnKeys, fnSuccess, fnFailure) {  
      var _autoFilterEntries = { "Title": [{ "displayString": "Task 1.1", "dataValue": "Task 1.1" }, { "displayString": "Task 1.2", "dataValue": "Task 1.2" }, { "displayString": "Task 1.3", "dataValue": "Task 1.3"}] };
      setTimeout(function () {
      }, 500);

enter image description here


Did you had a look at this series of articles? http://msdn.microsoft.com/en-us/library/ee535898.aspx under the article related to Hierarchical data http://msdn.microsoft.com/en-us/library/ff407273.aspx

Have you considered any alternatives such as jQuery with jSON and REST?

     gds.EnableAutoFilterEntryGeneration = true;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.