filter datagrid with external parameters and urlAdaptor

[pk]

hi,

     I'm having an issue trying to filter my grid's datasource with an external set or params.

I had no problem using the grid filters (filter bar) and the UrlAdaptor binded with the .cs controller that receives a DataManagerRequest. (IActionResult UrlDataSource([FromBody]DataManagerRequest dm)..)

Now, when the user makes another action on the page, I want to refresh the data from the grid, with a new external object filter.

I thought about making an ajax call to a different controller that provides me the data filtered, but I found 2 problems:

1. grid.dataSource = ej.data.DataUtil.parse.parseJson(data).result;

this overrides my urlAdaptor.. so I cannot perform the filtering from the grid anymore.

2. I'd like to store that external, lets say json, object filter in the grid (anyhow) so when the user filter the grid I don't lose that external filter (I mean, to have that external filter being send to the UrlDataSource until the user clears that external filter so the controller don't get that anymore..)

I found nothing in the docs about how to deal with this... 

only 

<ejs-grid id="Grid" query="new ej.data.Query().addParams('ej2grid', 'true')" > 

(https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#sending-additional-parameters-to-the-server)  

that doesn't give me any explanation on how to use it... anyway.. I think I don't need that.

ask me whatever you need to find a solution, 

thanks.

[Giorgio]

You may want to use odata support and the parsing has done for you until graphql is not ready. But when?

[Hariharan J V]

Hi Pk, Giorgio, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement. We could see that initially you will be binding “UrlAdaptor” as dataSource for Grid. And when filtering you will be returning the filtered data and bound that data to Grid inside a ajax success. Now the Grid’s dataSource will be by default changes to local dataSource thereby replacing the previously assigned Url Data. This is the default behavior for Grid, when assigned local data then remote actions can’t be performed. 

Based on your requirement, we suggest you to bind “dataStateChange” event of Grid and assign the returned filter data as a “result” and “count” pair to the dataSource property of Grid. Now when you perform filter in Grid, the “dataStateChange” handler will be triggered, and in  the “args” of this event hanlder you will be getting the query params. Now you can make the ajax call with these query params to your respective controller to perform your own external filtering or any other server action and bind the returned result as “result” and “count” pair to the Grid’s dataSource. Please refer the code example below, 

 

        <ejs-grid id="Grid" allowPaging="true" dataStateChange="dataStateChange" ...> 

            <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor"></e-data-manager> 

            ... 

        </ejs-grid> 

 

 

        $.ajax({               //Your AJAX call for external filtering 

            url: "/Home/ExternalFilter", 

            ... 

            success: function (filterdata) { 

                var grid = document.getElementById("Grid").ej2_instances[0]; 

                grid.dataSource = {result: JSON.parse(filterdata),count: JSON.parse(filterdata).length};     //Bind the external filter result as “result” and “count” pair to the dataSOurce property  

            } 

        }); 

            function dataStateChange(args) {  //this will be triggered when you perform actions in Grid after you bind the filtered data as result count pair 

           //In this "args" you will get the query params for the corresponding action. 

           //Use these params and form your ajax call to your external filter or any other action call 

           //Later bind that controller’s return result as a “result” and “count” pair. 

        } 

Documentation : https://ej2.syncfusion.com/javascript/documentation/api/grid/#datastatechange 

 

Query : You may want to use odata support and the parsing has done for you until graphql is not ready. But when? 

We have already considered the feature request “GraphQL support for Essential JS 2 DataManager”. It will be implemented in any of our upcoming releases. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

https://www.syncfusion.com/feedback/5621/odata-full-functionality-and-use-case-support 

Please get back to us if you need further assistance. 

Regards, 

Hariharan 

[pk]

Hi Syncfusion team,

I managed to do it my way, and its working, so I want to share it:

in my js just did this to load my custom external filter to the grid (external because it's not from the bar filter)

var grid = document.getElementById("my-grid").ej2_instances[0];

grid.query = new ej.data.Query().addParams('custom', {age: 12, name: 'John', born: new Date()});

grid.refresh();

then, extend the DataManagerRequest to add my custom filter object:

public class SearchAdvancedFilterDto : DataManagerRequest

    {

        public CustomFilter Custom { get; set; }

    }

    public class CustomFilter

    {

        public int Age { get; set; }

        public string Name { get; set; }

        public DateTime Born { get; set; }

    }

and in the urlAdaptor controller I get my custom filter.

public IActionResult UrlDataSource([FromBody]SearchAdvancedFilterDto dm)

        {..

Whenever I want to remove the external filter loaded in the grid (because if I don't, in any action of my grid I'm going to be sending that param). just do:

var grid = getMyGrid();

grid.query = new ej.data.Query();

grid.refresh();

and my custom filter goes away.

This fits perfect to my requirements, so thanks btw for your answer, but I'm covered.

And Giorgio, what are you talking about? I hope this helps you anyway.

thanks again.

[Hariharan J V]

Hi pk,

Thanks for your update.

We are happy to hear that your requirement has been achieved.

Regards,
Hariharan