current community

your communities

more stack exchange communities

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

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>

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

share|improve this question

3 Answers 3

up vote -1 down vote

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?

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
up vote -2 down vote 
     gds.EnableAutoFilterEntryGeneration = true;
share|improve this answer
up vote 0 down vote

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 () {
            fnSuccess(_autoFilterEntries);
      }, 500);
}*

enter image description here

share|improve this answer

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.