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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141258 Aug 19,2015 11:22 PM UTC Dec 3,2018 09:00 AM UTC ASP.NET MVC - EJ 2 7
loading
Tags: Grid
Scott Belina
Asked On August 19, 2015 11:22 PM UTC

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 [Syncfusion]
Replied On August 20, 2015 08:55 AM UTC

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
Replied On August 21, 2015 10:58 PM UTC

This solution worked for me, thank you.

Alan Sangeeth S [Syncfusion]
Replied On August 24, 2015 04:50 AM UTC

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
Replied On August 30, 2017 03:03 PM UTC

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 [Syncfusion]
Replied On August 31, 2017 11:10 AM UTC

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  


Francesco
Replied On December 1, 2018 03:12 PM UTC

How I Can it with syncfusion ej2 grid?

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 3, 2018 09:00 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon