How to post the Grid's current DataManager queries to server-side manually in ASP.NET MVC?
DataManager queries are generated based on the ASP.NET MVC Grid actions and Grid model properties. To create a custom action, collect previously posted queries to the window variable which has been done in the processQuery method of the UrlAdaptor/WebMethodAdaptor after extending them to the Custom Adaptor. Later, custom POST will be requested using any external action.
The following code example shows how to post the special action to the DataManager:
JS
<div id="button"></div> <div id="Grid"><div> <script type="text/javascript"> $(function () { $("#button").ejButton({ text: "Post DataManager", click: "buttonClick", }); $("#Grid").ejGrid({ dataSource: ej.DataManager({ url: "Home/ DataSource ", adaptor: "UrlAdaptor" }), allowPaging: true, load: "onLoad", columns: [ { field: "OrderID", width: 80, textAlign: ej.TextAlign.Right }, { field: "EmployeeID", headerText: "EmployeeID", textAlign: ej.TextAlign.Right, }, { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right }, { field: "ShipCountry", headerText: "Ship Conutry" }, ] }); }); </script> [Controller] namespace EJGrid.Controllers { public class HomeController : Controller { public ActionResult DataSource(DataManager dm) { var DataSource = OrderRepository.GetAllRecords(); DataResult result = new DataResult(); result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList(); result.count = DataSource.Count(); return Json(result, JsonRequestBehavior.AllowGet); } } }
MVC
[In View] @(Html.EJ().Button("DM").Text("Post DataManager").ClientSideEvents(eve=> eve.Click("buttonClick"))) @(Html.EJ().Grid<object>("Editing") .Datasource(ds => ds.URL("/Home/DataSource").Adaptor("UrlAdaptor")) .AllowPaging() .Columns(col => { col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Add(); col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Add(); col.Field("Freight").HeaderText("Freight").Format("{0:C}").TextAlign(TextAlign.Right).Add(); col.Field("ShipCountry").HeaderText("Ship Country").Add(); }) .ClientSideEvents(e => e.Load("onLoad")) ) [Controller] namespace EJGrid.Controllers { public class HomeController : Controller { public ActionResult DataSource(DataManager dm) { var DataSource = OrderRepository.GetAllRecords(); DataResult result = new DataResult(); result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList(); result.count = DataSource.Count(); return Json(result, JsonRequestBehavior.AllowGet); } } }
ASP.NET
[aspx] <ej:Button ID="Button" runat="server" Size="Large" ClientSideOnClick="buttonClick" Text=" Post DataManager"></ej:Button> <ej:Grid ID="Grid" runat="server" AllowPaging="True" > <DataManager URL="Sample.aspx/Data" Adaptor="UrlAdaptor" /> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" /> <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Format="{0:C}" /> <ej:Column Field="ShipCountry" HeaderText="Ship Country"/> </Columns> <ClientSideEvents Load="onLoad" /> </ej:Grid> [CS] public partial class _Default : Page { protected void Page_Load(object sender, EventArgs e) { } [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static DataResult Data(int skip, int take) { var DataSource = OrderRepository.GetAllRecords(); DataResult ds = new DataResult(); ds.result = DataSource.Skip(skip).Take(take); ds.count = ds.count = DataSource.Count(); return ds; } }
Extend the respective adaptors and collect the queries in the window variable. Later, in the button click event requesting the POST with the saved query to the CustomAction method.
<script> function onLoad(args) { this.model.dataSource.adaptor = new customAdaptor();//extend the adaptor } //MVC as server-end var customAdaptor = new ej.UrlAdaptor().extend({ processQuery: function (dm, query, hierarchyFilters) { var query = this.base.processQuery.apply(this, [dm, query, hierarchyFilters]); window.data = query.data; // processquery method used in urladaptor return query; } }); function buttonClick(args) { $.ajax({ // bind the CustomAction url: "Home/CustomAction", data: window.data, type: "POST", contentType: "application/json; charset=utf-8" }); } /*End of MVC*/ //Webforms as server-end var customAdaptor = new ej.WebMethodAdaptor().extend({ processQuery: function (dm, query, hierarchyFilters) { var query = this.base.processQuery.apply(this, [dm, query, hierarchyFilters]); window.data = query.data; // processquery method used in urladaptor return query; } }); function buttonClick(args) { $.ajax({ // bind the CustomAction url: "WebMethodAdaptor.aspx/CustomAction", data: window.data, type: "POST", contentType: "application/json; charset=utf-8" }); } </script> //MVC server [Controller] public ActionResult CustomAction(DataManager dm) {// CustomAction . . . . . . } //Webforms server [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static object CustomAction(int skip, int take) { //logic }
DataManager passing for customaction
Successful Ajax post
Conclusion
I hope you enjoyed learning about how to post the Grid's current DataManager queries to server-side manually in ASP.NET MVC.
You can refer to our ASP.NET MVC Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Grid example to understand how to create and manipulate data.