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

[Samuel]

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

[Pavithra Subramaniyam]

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'); 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#web-api  

                              https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#offline-mode  

 

Demo                  : https://ej2.syncfusion.com/javascript/demos/#/material/grid/remote-data.html  

 

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. 

 

[Samuel]

Thank you so much for this.

It's all working perfectly.

Much appreciated

[Pavithra Subramaniyam]

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. 

[Samuel]

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

[Pavithra Subramaniyam]

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.  

Documentation : https://ej2.syncfusion.com/javascript/documentation/grid/columns/?no-cache=1#auto-generation 

 

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. 

Sample : https://stackblitz.com/edit/h7qscj-ztdpkr?file=index.js 

Please get back to us if you need further assistance. 

Regards, 

Pavithra S. 

[Samuel]

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

[Pavithra Subramaniyam]

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.