We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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



7 Replies

AS Alan Sangeeth S Syncfusion Team August 20, 2015 04:55 AM

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


SB Scott Belina August 21, 2015 06:58 PM

This solution worked for me, thank you.


AS Alan Sangeeth S Syncfusion Team August 24, 2015 12:50 AM

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


HA Hugo Arevalo August 30, 2017 11:03 AM

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


Thanks.



VN Vignesh Natarajan Syncfusion Team August 31, 2017 07:10 AM

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 

Regards, 
Vignesh Natarajan  



FR Francesco December 1, 2018 10:12 AM

How I Can it with syncfusion ej2 grid?


TS Thavasianand Sankaranarayanan Syncfusion Team December 3, 2018 04:00 AM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon