Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

SP.JsGrid.DelegateType.GetAutoFilterEntries

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">


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

            jsGridControl.Init(jsGridParams);

        }

        function FilterDialog(newState) {

        }


        function FilterMenu() { 


        }


        function HandleFilter(newState) {

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

            eval(_props.callbackScript);
            // 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. 
            _jsGridControl.Disable();
            // Send the sorting values to the server by using a callback. 
            var args = Sys.Serialization.JavaScriptSerializer.serialize({
                OrderByColumnName: _orderByColumnName,
                IsDescending: _isDescending
                , Command: _Command
            });

            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);
                _tableCache.Clear();
                _tableCache.AddRawDataToCache(ConvertAssocArrayKeysToArray(jsgridDeserializer.data), jsgridDeserializer.data);
                _jsGridControl.SetRowView(jsgridDeserializer.InitJsGridRowViewParams());
                _jsGridControl.Enable();
            }

        }





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

    };



</script>

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

share|improve this question
add comment

2 Answers 2

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?

Hope it helps, C:\Marius

share|improve this answer
    
Thanks if you provide me some more link related to SP.JsGrid.DelegateType.GetAutoFilterEntries –  Basant B. Pandey Apr 24 '12 at 15:02
    
Tried this on MSDN Blogs? blogs.msdn.com/b/sharepointdev/archive/2011/01/18/… –  C. Marius - MVP Apr 24 '12 at 15:10
    
Yes I go through this blog. But unable to find how to enable filtering. If you have any idea to enabling filtering it will be a great help for me. –  Basant B. Pandey Apr 24 '12 at 17:04
add comment
     gds.EnableAutoFilterEntryGeneration = true;
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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