Articles in this section
Category / Section

How to post the Grid's current DataManager queries to server-side manually in ASP.NET MVC?

1 min read

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.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied