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
close icon

Do you have an example of Databinding remote data using JS 2 for JavaScript Grid with only REST asp.net WebApi with sorting, filtering and grouping

Help, I am looking for an example of Databinding remote data using JS 2 for JavaScript Grid with only REST asp.net WebApi ( using ApiController ) , that can handle CRUD operations with sorting, filtering and grouping 

Preferably with in-memory data ( like the common orders sample ) is fine, no need to save to database .



Most other samples use razor views in some form or the other, and its not very useful in my use case.

I'll appreciate it

so far i found this in doc https://help.syncfusion.com/js/grid/data-binding#webapi but it's for js1 

A working sample as described above would be very helpful.

Thanks

7 Replies

PS Pavithra Subramaniyam Syncfusion Team February 8, 2019 09:00 AM UTC

Hi Samuel, 
 
Thanks for contacting Syncfusion support. 
 
We have prepared a sample based on your requirement in which we have used the WebApi service for populating the Grid. You can do the Grid actions like paging, sorting, filtering, CRUD operations with WebApi service locally by enabling the offline property of DataManager. Please refer to the below code example, Documentation link and sample link. 
 
[index.js] 
var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/'; 
    var data = new ej.data.DataManager({ 
        url: hostUrl + 'api/Orders', 
        adaptor: new ej.data.WebApiAdaptor(), 
        offline:true 
    }); 
    var grid = new ej.grids.Grid({ 
        dataSource: data, 
        allowPaging: true, 
        allowSorting:true, 
        allowGrouping:true, 
        allowFiltering:true, 
        editSettings:{allowAdding:true,allowEditing:true,allowDeleting:true}, 
        toolbar:["Add","Edit","Delete","Update","Cancel"], 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID',isPrimaryKey:true, width: 130, textAlign: 'Right' }, 
            { field: 'CustomerID', headerText: 'Customer ID', width: 170 }, 
            { field: 'EmployeeID', headerText: 'Employee ID', width: 135, textAlign: 'Right' }, 
            { field: 'Freight', headerText: 'Freight', width: 160, textAlign: 'Right', format: 'C2' }, 
            { field: 'ShipCountry', headerText: 'Ship Country', width: 150, textAlign: 'Center' }, 
        ], 
        pageSettings: { pageCount: 3 } 
    }); 
    grid.appendTo('#Grid'); 
 
                              https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#offline-mode  
 
 
Sample               : https://stackblitz.com/edit/kze569-upntti?file=index.js  
 
If you want to perform the Grid actions in server side you need to handle the actions in your ApiController like below. 
 
[OrdersController] 
    public class OrderController : ApiController 
    { 
        // GET: api/Order 
        public object Get() 
        { 
            var queryString = System.Web.HttpContext.Current.Request.QueryString; 
            int skip = Convert.ToInt32(queryString["$skip"]);  //paging query 
            int take = Convert.ToInt32(queryString["$top"]); //paging query 
            string filter = queryString["$filter"]; // filtering query 
            string sort = queryString["$orderby"]; // sorting  query 
            var data = OrdersDetails.GetAllRecords(); 
 
            if (sort != null) //Sorting 
            { 
                switch (sort) 
                { 
                    // Perform sorting 
 
                } 
            } 
            if (filter != null) 
            { 
                // perform filtering 
             } 
            return new 
            { 
                Items = data.Skip(skip).Take(take), 
                Count = data.Count() 
                //  return order; 
            }; 
        } 
 
        // Perform adding 
        // POST: api/Order 
       [HttpPost] 
        public object Post([FromBody]OrdersDetails value) 
        { 
            OrdersDetails.GetAllRecords().Add(value); 
            .  . . 
            return Json(new { result = Data, count = count }); 
        } 
         
        // Perform Updating 
        // PUT: api/Order/5 
        [HttpPut] 
        public object Put([FromBody]OrdersDetails value) 
        { 
             .  .  . 
            return value; 
        } 
        // Perform Deleting 
        // DELETE: api/Order/5 
        public object Delete(int id) 
        { 
            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault()); 
            return Json(id); 
        } 
    } 
 
Please get back you use if you need any further assistance on this. 
 
Regards, 
Pavithra S. 
 



SA Samuel February 8, 2019 12:15 PM UTC

Thank you so much for this.

It's all working perfectly.

Much appreciated




PS Pavithra Subramaniyam Syncfusion Team February 8, 2019 12:18 PM UTC

Hi Samuel,  

Thanks for your update.  

We are happy to hear that the provided information helps you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 



SA Samuel February 9, 2019 07:25 PM UTC

Hi,

Thanks for your help so far.

In your sample there is a column setting like this 

columns: [ 
            { field: 'OrderID', headerText: 'Order ID',isPrimaryKey:true, width: 130, textAlign: 'Right' }, 
            { field: 'CustomerID', headerText: 'Customer ID', width: 170 }, 
            { field: 'EmployeeID', headerText: 'Employee ID', width: 135, textAlign: 'Right' }, 
            { field: 'Freight', headerText: 'Freight', width: 160, textAlign: 'Right', format: 'C2' }, 
            { field: 'ShipCountry', headerText: 'Ship Country', width: 150, textAlign: 'Center' }, 
        ], 

Do you have some code or a library you can point me to that can help me auto generate that from a class with those fields in web api controller.
I want to be able make a call to get schema ( i.e that column definition aboce ) by just supplying a class.
I know there are many options to setup with the columns field. I was hoping if such a code would allow me use attributes , much like how its done with entity framework code first. 

Thank you so much again for your help


PS Pavithra Subramaniyam Syncfusion Team February 11, 2019 10:36 AM UTC

Hi Samuel, 

We have analyzed your query. We could see that you would like to auto generate the column fields from the dataSource you will be binding to Grid. We suggest you to refer to the below documentation for more details on auto-generated columns.  
 
We have also prepared a sample for your convenience. In the below sample, we have not defined the columns for Grid. The Grid columns will be autogenerated from the WebAPI service which is bind as data source to Grid. 

Please get back to us if you need further assistance. 

Regards, 
Pavithra S. 



SA Samuel February 11, 2019 03:24 PM UTC

wow the ui can autogenerate the columns, amazing! Thank you , this helped


PS Pavithra Subramaniyam Syncfusion Team February 12, 2019 04:15 AM UTC

Hi Samuel,  

Thanks for your update.  

We are happy to hear that the provided information helped you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 



Loader.
Live Chat Icon For mobile
Up arrow icon