1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Generic implementation of the Grid system

Generic implementation of the Grid system

Hi,

I am trying to build a dynamic generic grid view in javascript from the ui and webapi for the data access using the ejGrid (ej-2). 
On the  JS side, I want to do something like this (based on your examples):

// to get from schemaBuilder
var _columns = [
    { field: 'ProductID', headerText: 'Product ID', width: 130, textAlign: 'Right' },
    { field: 'ProductName', headerText: 'Product Name', width: 170 },
],


var data = new ej.data.DataManager({
    url: 'http://localhost:51792//data/api/GetGridData?tableName=Products',
    adaptor: new ej.data.WebApiAdaptor(),
    crossDomain: true
});

var grid = new ej.grids.Grid({
    dataSource: data,
    allowPaging: true,
    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },
    toolbar: ['Add', 'Edit', 'Delete'],
    columns: _columns
    pageSettings: { pageCount: 5 }
});
grid.appendTo('#Grid');



Then on the server-side  (API call) I want to do something like this:

public IHttpActionResult GetGridData(tableName)
{
using (var sqlcon = new SqlConnection("connectionstring"))
{
var table = new System.Data.DataTable();         
    SqlCommand cmd = new SqlCommand("select * from " + tableName, sqlcon);        
sqlcon.Open();    
using (var dr = _stmt.ExecuteReader())
{
table.Load(dr);
}
table;
}
}


any updates(delete/edit/new), paging, filtering and sorting must be handled by ejGrid through binding to the WebAPI.  


Is this currently possible using ejGrid. the functionality we are looking for is similar to server-side editor of datatables.net. 

Kind regards



1 Reply
PS Pavithra Subramaniyam Syncfusion Team March 26, 2018 12:32 PM UTC

Hi Garron, 

We have checked your query and you can perform the server side editing, paging, filtering actions in the Essential JavaScript 2 grid with dynamic columns .We have prepared a simple sample based on your query in which we have performed the server side actions using web API.  Please refer to the following code example and sample link. 

[index.chtml] 
<script> 
    var data = new ej.data.DataManager({ 
        url: 'api/Values', 
        adaptor: new ej.data.WebApiAdaptor(), 
        crossDomain: true 
    }); 
    var _columns = [ 
    { field: 'OrderID', headerText: 'Order ID', width: 130, isPrimaryKey:true, textAlign: 'Right' }, 
    { field: 'CustomerID', headerText: 'CustomerID', width: 170 }, 
     { field: 'ShipCity', headerText: 'shipcity', width: 170 } 
    ]; 
    var grid = new ej.grids.Grid({ 
        dataSource: data, 
        allowPaging: true, 
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }, 
        toolbar: ['Add', 'Edit', 'Delete'], 
        columns: _columns, 
        pageSettings: { pageCount: 5 } 
    }); 
    grid.appendTo('#Grid'); 
</script> 

[controller.cs] 
public class ValuesController : ApiController 
    { 
        // GET api/values 
        
        public static List<EditableOrder> order = new List<EditableOrder>(); 
 
         public object Get() 
        { 
            var queryString = System.Web.HttpContext.Current.Request.QueryString; 
            int skip = Convert.ToInt32(queryString["$skip"]); 
            int take = Convert.ToInt32(queryString["$top"]); 
            if (order.Count == 0) 
                BindDataSource(); 
            return new { Items = order.Skip(skip).Take(take).ToList(), Count = order.Count }; 
 
        } 
        public void BindDataSource() 
        { 
            int code = 10000; 
            for (int i = 1; i < 10; i++) 
            { order.Add(new EditableOrder(code + 1, "ALs", i + 0, 2.3 * i, new DateTime(1991, 05, 15), "Berlin", true)); 
             .    .    .       
                   } 
        } 
        // GET api/values/5 
        [HttpGet] 
        public string Get(int id) 
        { 
            return "value"; 
        }        // POST api/value 
        [HttpPost] 
        public object Post(EditableOrder value) 
        { 
            order.Insert(0, value); 
            return  value ; 
        }        // PUT api/values/5 
        [HttpPut] 
        public object Put(EditableOrder value) 
        { 
            var record = order.FirstOrDefault(x => x.OrderID == value.OrderID); 
            if (record != null) 
            { 
                record.OrderID = value.OrderID; 
                record.CustomerID = value.CustomerID; 
                record.ShipCity = value.ShipCity; 
                record.Verified = value.Verified; 
 
            } 
            return value ; 
        } 
        // DELETE api/value/5 
        [HttpDelete] 
        public object Delete(int id) 
        { 
            var itemToRemove = order.Single(r => r.OrderID == id); 
            order.Remove(itemToRemove); 
            return  order ; 
        } 
        
    } 
   } 



Regards, 
Pavithra S. 


Loader.
Up arrow icon