Grid Editing with Datatable

[Satheesh Kumar]

Hi

I am binding a grid using datatable and the columns are dynamic. I have also enabled adding and editing using inline edit form mode. While posting data to mvc controller i am not able to get the values. I have tried various combinations in the signature but still unable to get the inserted/updated data. Here is the code i have used.

Javascript:
  var dataManager = ej.DataManager({
                                                url: "Module/GetData",
                                               insertUrl:"Module/InsertGridItem",
                                                adaptor: new ej.UrlAdaptor()
                                            });
  $("#Grid").ejGrid({
                                                dataSource: dataManager,
...
.....
 });

MVC:
DataSource:
 public ActionResult GetData(Syncfusion.JavaScript.DataManager dm)
{
 DataTable dt = new DataTable();
//dt=from db....
            return Json(new { result = ConvertTableToList(dt), count =dt.Rows.Count }, JsonRequestBehavior.AllowGet);
}
public static List<Dictionary<string, object>> ConvertTableToList(DataTable dt)
        {
            return dt.AsEnumerable()
              .Select(r => r.Table.Columns.Cast<DataColumn>()
                      .Select(c => new KeyValuePair<string, object>(c.ColumnName, r[c.Ordinal])
                     ).ToDictionary(z => z.Key, z => z.Value)
              ).ToList();
        }


CRUD Action:
public ActionResult InsertGridItem(FormCollection value)-Not working
public ActionResult InsertGridItem(Object value)-Not working
public ActionResult InsertGridItem(DataTable value)-Not working

Thanks for your help in advance.

[Jayaprakash Kamaraj]

Hi Satheesh, 

 

Thank you for contacting Syncfusion support. 

 

To overcome this problem we suggest you to use ExpandoObject class for dynamic binding. The ExpandoObject class enables you to add and delete members of its instances at run time and also to set and get values of these members. Please refer to the below document and code example 

 

https://msdn.microsoft.com/en-us/library/system.dynamic.expandoobject(v=vs.110).aspx 

<script type="text/javascript"> 

    $(function () { 

        

        $("#Grid").ejGrid({ 

            dataSource: ej.DataManager({ 

                url: "/Grid/DataSource", 

                updateUrl: "/Grid/Update", 

                insertUrl: "/Grid/Insert", 

                removeUrl: "/Grid/Delete", 

                adaptor:"UrlAdaptor" 

             

            }), 

.. 

 

        }); 

    }); 

 

</script> 

 

………………………… 

 

        public ActionResult DataSource(DataManager dm) 

        { 

            List<ExpandoObject> datasource = new List<ExpandoObject>(); 

            dynamic row = new ExpandoObject(); 

            row.id = 1; 

            row.verified = true; 

            row.name = "Name 1"; 

            datasource.Add(row); 

            dynamic row1 = new ExpandoObject(); 

            row1.id = 2; 

            row1.verified = false; 

            row1.name = "Name 2"; 

            datasource.Add(row1); 

            var dt = new DataTable(); 

            foreach (var col in ((IDictionary<string, object>)datasource[0])) 

            { 

                dt.Columns.Add(col.Key, col.Value.GetType()); 

            } 

            foreach (dynamic val in datasource) 

            { 

                IDictionary<string, object> items = val; 

                dt.Rows.Add(items.Values.ToArray()); 

            } 

            IEnumerable DataSource = ConvertTableToList(dt); 

            DataResult result = new DataResult(); 

            DataOperations operation = new DataOperations(); 

            result.result = DataSource; 

            result.count = result.result.AsQueryable().Count(); 

            if (dm.Skip > 0) 

                result.result = operation.PerformSkip(result.result, dm.Skip); 

            if (dm.Take > 0) 

                result.result = operation.PerformTake(result.result, dm.Take); 

            return Json(result, JsonRequestBehavior.AllowGet); 

        } 

        public static List<Dictionary<string, object>> ConvertTableToList(DataTable dt) 

        { 

            return dt.AsEnumerable() 

              .Select(r => r.Table.Columns.Cast<DataColumn>() 

                      .Select(c => new KeyValuePair<string, object>(c.ColumnName, r[c.Ordinal]) 

                     ).ToDictionary(z => z.Key, z => z.Value) 

              ).ToList(); 

        } 

        public ActionResult Insert(ExpandoObject value) 

        { 

            //do your operations here 

        } 

        public ActionResult Update(ExpandoObject value) 

        { 

            //do your operations here 

        } 

 

        public ActionResult Delete(int key) 

        { 

            //do your operations here 

 

        } 

        public class DataResult 

        { 

            public IEnumerable result { get; set; } 

            public int count { get; set; } 

} 

        } 

The editing is performed based on the primary key column so we need to set isPrimarykey property for primary key column and refer to the below help document and code example. 

 

https://help.syncfusion.com/api/js/ejgrid#events:databound 

 

 

<script type="text/javascript"> 

    $(function () { 

        

        $("#Grid").ejGrid({ 

.. 

            dataBound: function(args){ 

                //for editing actions, primaryKey column is must  

                //we have defined them in the dataBound event 

                //always recommended to placed the primarykey column as first column 

                var column = args.model.columns[0]; 

                column.isPrimaryKey = true; 

                //Here columns method used to update the particular column 

                this.columns(column, "update"); 

            }, 

.. 

 

        }); 

    }); 

 

</script> 

 

Regards, 

 

Jayaprakash K.