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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142539 Feb 8,2019 07:30 AM UTC Feb 12,2019 04:15 AM UTC JavaScript - EJ 2 7
loading
Tags: Grid
Samuel
Asked On February 8, 2019 07:32 AM UTC

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 [Syncfusion]
Replied On 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. 
 


Samuel
Replied On February 8, 2019 12:15 PM UTC

Thank you so much for this.

It's all working perfectly.

Much appreciated



Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Samuel
Replied On 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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Samuel
Replied On February 11, 2019 03:24 PM UTC

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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 



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

;