How do you get a DataManager from an ejGrid to post to a custom action?

[Scott Belina]

I am probably missing something, but...

I am using MVC and have a grid that is created via the MVC helper:

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

    .Datasource(d => d.URL("/ListData").Adaptor(Syncfusion.JavaScript.AdaptorType.UrlAdaptor))

When the user pages or sorts or whatever, the grid posts a DataManager to /ListData as expected

public JsonResult ListData(DataManager dm) 

and I can do whatever operations are necessary. I also have the need to post the grid's current DataManager to a custom action that is not in response to any grid action - that is, I need to do it manually via javascript.

public JsonResult SpecialAction(DataManager dm) 

How would I post the ejGrid's current DataManager to SpecialAction() manually? 

Thanks

[Alan Sangeeth S]

Hi Scott,

Thanks for using Syncfusion products.

DataManager queries are generated dynamically on Grid action. For creating DataManager query without Grid action, we have extended processQuery method of UrlAdaptor to store DataManager queries to a variable which then can be used to pass to any custom action. Please refer the following codes snippets.

var original = ej.UrlAdaptor.prototype.processQuery;

        ej.UrlAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {

            var query = original.apply(this, [dm, query, hierarchyFilters]);

            window.data = query.data; //storing datamanger query params

            return query;

        };

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

Sample: http://www.syncfusion.com/downloads/support/forum/119979/ze/EJGrid-741676219

In the above sample, on a button click event we have passes the DataManager to controller action. Please refer the following code snippets.

@(Html.EJ().Button("DM").Text("Post DataManager").ClientSideEvents(eve=> eve.Click("buttonClick")))

function buttonClick(args) {

            $.ajax({

                url: "Home/CustomAction",

                data : window.data,

                type:"POST",

                contentType: "application/json; charset=utf-8"

            });

        }

public ActionResult CustomAction(DataManager dm)

        {

            …

        }

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

[Scott Belina]

This solution worked for me, thank you.

[Alan Sangeeth S]

Hi Scott,
 
Thanks for the update.
 
Please let us know if you need any further assistance. We will be happy to help you.
 
Regards,
Alan Sangeeth S

[Hugo Arevalo]

I have multiple grids on the view, how can I assign the datamanager information from a specific grid to the window variable??

Thanks.

[Vignesh Natarajan]

Hi Hugo, 

Thanks for using Syncfusion Products. 

We have analyzed your requirement and we have achieved your requirement using Load event of Grid. In the Load event of we have taken the current grid dataSource and added one parameter as “id“.  So, when processing through urladaptor, that(id) parameter is checked and datamanager information can be sent to specific grid.  

Please refer the below code snippet 

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

            .Datasource(ds => ds.URL("Home/DataSource1").Adaptor("UrlAdaptor")) 

 

              . . . . .  

 

.ClientSideEvents(eve => eve.Load("onload")) 

) 

<script> 

    function onload(args) { 

        this.model.dataSource.id = this._id // new parameter id is passed to datamanager 

    } 

        var original = ej.UrlAdaptor.prototype.processQuery; 

        ej.UrlAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) { 

            if (dm.id != undefined && dm.id == "Editing1") { 

                var query = original.apply(this, [dm, query, hierarchyFilters]); 

                window.data = query.data; 

                return query; 

            } 

            else { 

                var query = original.apply(this, [dm, query, hierarchyFilters]); 

                return query; 

            } 

            } 

 

Please download the sample from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/119979/ze/EJGrid-281047586  

Regards, 

Vignesh Natarajan  

[Francesco]

How I Can it with syncfusion ej2 grid?

[Thavasianand Sankaranarayanan]

Hi Francesco, 

We have prepared the solution from our previous update with Syncfusion EJ2 Grid. Please refer the code example below to implement the previously provided solution in Syncfusion EJ2 Grid.  

[index.cshtml] 

 

    @Html.EJS().Grid("Grid").AllowSorting(true).AllowPaging(true).Width("auto").Columns(col => 

    { 

        ... 

   }).Created("created")...Render() 

 

<script> 

    function created(args) { 

        class CustomAdaptor extends ej.data.UrlAdaptor { 

            processQuery(dm, query, hierarchyFilters) { 

               var datamanager = new ej.data.DataManager({ adaptor: new ej.data.UrlAdaptor }); 

                var original = datamanager.adaptor.processQuery; 

                if (dm.id != undefined && dm.id == "Grid") { 

                    var query = original.apply(this, [dm, query, hierarchyFilters]); 

                    window.data = query.data; 

                    return query; 

                } 

                else { 

                    var query = original.apply(this, [dm, query, hierarchyFilters]); 

                    return query; 

                } 

            } 

        } 

        var grid = document.querySelector('#Grid').ej2_instances[0]; 

        grid.dataSource = new ej.data.DataManager({ 

            url: "/Home/UrlDatasource", 

           adaptor: new CustomAdaptor() 

        }); 

        this.dataSource.id = this.element.id;                  // new parameter id is passed to datamanager  

    } 

</script> 

In the above code, we have used the “CustomAdaptor” in Grid which is extended from “UrlAdaptor”, here we have override the “processQuery” method of DataManager and assigned the value for the window object. We have bound the datasource for Grid inside the “created” event handler of Grid.  

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S.