How do you send additional data to the server on a filterchoicerequest when using an ondemand data source

[Scott Belina]

Hello,

I am using an ejGrid with on-demand data. I am trying to use Excel type filtering. When I open the filter UI for a field, two actions appear to occur in the ActionBegin event. The first is requestType "filterbeforeopen" which contains the relevant field. The second is requestType "filterchoicerequest", at which point a POST is sent to the server. 

This POST contains a partial DataManager including just the requiresCount and Where fields. I need to know the field that the filter is being requested for in addition to the existing filters applied to the grid.  For example, if the grid is showing addresses and the user wants to filter on State and clicks the filter icon in the State column header, I want the request to the server (that fetches the contents of the State checkbox list in the filter UI) to include "State".

Is there a way to append the selected filter field on to the request? Hopefully this makes sense.

Thanks

[Madhu Sudhanan P]

Hi Scott,

Thanks for using Syncfusion products.

Query: “Is there a way to append the selected filter field on to the request?”

We can use the actionBegin event to send the current filter field along with the data request made by excel filter. To do so, we have to add the field name to the select method of query as follows.

$("#Grid").ejGrid({

            . . . .

            allowFiltering: true,

            filterSettings: { filterType: "excel" },

            . . . . . .

            actionBegin: function (args) {

                if (args.requestType == "filterchoicerequest")

                    args.query.select(args.filterModel.fName);               

            }
        });

 In the above we have added the current filter column to the select query and args.filterModel.fName will contain the current filter column name.

If you don’t want to send the field name using select method, you can simply add it as the custom parameter to the query. This can be done using the addParams method of the ej.Query.

$("#Grid").ejGrid({

            . . . .

            allowFiltering: true,

            filterSettings: { filterType: "excel" },

            . . . . .

            actionBegin: function (args) {

                if (args.requestType == "filterchoicerequest")                    

                   args.query.addParams("field",args.filterModel.fName);

            }
        });

For your convenience we have created a simple sample with the excel filter in which the select method is used to send the field name to the data request and the same can be referred from the below link.

https://jsplayground.syncfusion.com/qdgcovfb

Please refer the below links for information on select and addParams methods of ej.Query.

https://help.syncfusion.com/api/js/ejquery#methods:select

https://help.syncfusion.com/api/js/ejquery#methods:addparams

Please let us know if you have any query.

Regards,
Madhu Sudhanan. P

[Scott Belina]

Perfect, thank you.

[Scott Belina]

Actually, that leads to the next question. How do you do the same thing (append additional data to the request) for an export? I attempted to use this same technique when exporting, but it the ActionBegin event does not fire when initiating an export. 

Or, alternately, how would you get the data you need from the GridProperties that is sent to the server? I am thinking specifically of filters. This information is posted as 

List<Syncfusion.Javascript.Models.FilteredColumn> 

but in other operations, such as paging or sorting, the filters are sent as

List<Syncfusion.Javascript.WhereFilter>

Is there a way to (a) use this same technique to modify the request for an export, or (b) convert a Syncfusion.Javascript.Models.FilteredColumn to a Syncfusion.Javascript.WhereFilter?

thanks

[Madhu Sudhanan P]

Hi Scott,

Query: “How would you get the data you need from the GridProperties that is sent to the server? This information is posted as List<Syncfusion.Javascript.Models.FilteredColumn> but in other operations, such as paging or sorting, the filters are sent as List<Syncfusion.Javascript.WhereFilter>”

From the query we found that you are using UrlAdaptor to load data in grid. Normally the grid action(sort, page, filter etc.) information are maintained using the grid properties such as List<FilteredColumns> etc. which will be converted internally to object that suitable to bind with DataManager class at the server side.

But when exporting grid content, the grid datasource will be excluded from the model posted to server and the grid action information stored in grid properties are used internally by Export method to manipulate the data and export the appropriate result.

And hence we can achieve the requirement “Syncfusion.Javascript.Models.FilteredColumn to a Syncfusion.Javascript.WhereFilter” with the following steps.

1. Register a Load event and make the grid dataSource to include on exporting.

[cshtml]

@(Html.EJ().Grid<object>("Grid")

.Datasource(ds => ds.URL(@Url.Action("DataSource")).Adaptor(AdaptorType.UrlAdaptor))

. . . .

.ClientSideEvents(evt => evt.Load("OnLoad"))

)

[script]

function OnLoad(args) {

        //Now the dataSource will be included with grid model on export

        this.ignoreOnExport.splice(this.ignoreOnExport.indexOf("dataSource"), 1);

    }

2. Add the below script at the Layout page. The below code is responsible for generate the object from grid`s dataSource and query which is suitable to bind with DataManager class.

<script>

    ej.DataManager.prototype.toJSON = function () {

        //Getting the grid model.

        var model = $("#Grid").ejGrid("model");

        /* Using `processQuery` method of the corresponding adaptor is used to create data object suitable to send to server.

         * So now the req.data will contains object that can be bound directly with `DataManager` class

         */

        var req = this.adaptor.processQuery(model.dataSource, model.query, false);

        return JSON.parse(req["data"]);

    };

</script>

3. Now the dataSource property will be posted along with the other grid properties while exporting and we can catch the dataSource property at the server side and convert it to the DataManager class.

                    public DataManager GridDataManager { get; set; }
       

        //Action to export to excel

        [HttpPost]

        public void ExcelExport(string GridModel)

        {          

            GridProperties gridProperty = ConvertGridObject(GridModel);          

            ExcelExport exp = new ExcelExport();

            //Get IEnumerable result by processing DataManager.

            IEnumerable result = GetDataSource(GridDataManager).result;

         

            exp.Export(gridProperty, result, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-saffron");

        }

                  . . . .  .

        private GridProperties ConvertGridObject(string gridProperty)

        {

          . . . ..

            GridProperties gridProp = new GridProperties();

            foreach (KeyValuePair<string, object> ds in div)

            {

                var property = gridProp.GetType().GetProperty(ds.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase);

               

                //Check for `dataSource`

                if (ds.Key == "dataSource") {

                    //Deserialize the value to DataManager type.

                    GridDataManager = (DataManager)serializer.Deserialize(serializer.Serialize(ds.Value), typeof(DataManager));

                    continue;

                }

               

                . . . .  . .

            }

            return gridProp;
        }

                   //Process DataManager with the order list and return result, count pair

        private DTO GetDataSource(DataManager dm) {

            IEnumerable Data = order;

            int count = order.Count;

            Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                Data = operation.PerformSorting(Data, dm.Sorted);

            }

            . . . . . .  . .

            return new DTO { result = Data, count = count };
        }

In the above code, we have fetched the dataSource property and assigned it to the public property named “GridDataManager” which can be used later for processing data.

5. Now on exporting the filtered grid, we will get as below at the server side.







In such a way you can send the dataSource property to the server side on exporting and get the filter details as List<WhereFilter> type.

For your convenience we have created a sample with the above code example and the same can be downloaded from the below link.

Sample Location: http://www.syncfusion.com/downloads/support/forum/120056/ze/Send-ejDataManagerOnExport1491971593

If you want to send any other additional data to server on exporting which is not present in grid`s model, then we can use the following approach.

[cshtml]

@(Html.EJ().Grid<object>("Grid")

.Datasource(ds => ds.URL(@Url.Action("DataSource")).Adaptor(AdaptorType.UrlAdaptor))

. . . .

.ClientSideEvents(evt => evt.ToolBarClick("OnToolbarclick"))

)

function OnToolbarclick(args) {

            this.model["myData"] = "..."

        }

And use the procedure in Step 3 to fetch the additional data at the server side.

Please let us know if you require further assistance.

Regards,
Madhu Sudhanan. P

[Scott Belina]

Wow... Thank you, I was able to get this method integrated into my solution.

[Madhu Sudhanan P]

Hi Scott,

Thanks for the update. We are happy that the requirement achieved.

Regards,
Madhu Sudhanan. P

[ali]

I am using ejGrid filter and I want to auto close it whenever I click on outside of the grid. Do we have any builtin method for it ?

[Gowri Loganathan]

Hi Ali, 

 

Thanks for contacting Syncfusion Forum 

 

Query : I want to auto close ejGrid filter whenever I click on outside of the grid. 

 

We have achieved your requirement using close method of ejDialog while grid focusout. Please refer the below code snippet and sample. 

 

Code snippet 

 

. . . . . . 

 

<script type="text/javascript"> 

         

          . . . . . . . 

                

          $('#Grid').on('focusout', function(args){  // triggred when focus is out of grid. Use your grid id here 

           $("#args.relatedTarget.id").ejDialog('close')  // close the filter dialog  

              });                                            

        });         

 </script> 

 

 

 

Kindly refer the sample 

https://jsplayground.syncfusion.com/rkbcocjl 

 

Also refer to the below API link 

https://help.syncfusion.com/api/js/ejdialog#methods:close 

 

Please revert us if you need more assistance 

 

Regards, 

Gowri V L.