Edit Grid with DataTable datasource

[Craig B]

Hi,

I have a datatable which I use to bind to the EJ2 grid. The datarows of this datatable do not represent models, they simply contain data from other models in the project.

I can get the data to display, but I am having trouble finding a way of being able to edit the content of the grid and having those changes be passed to my controller so that I can update values in the database.

Any help would be much appreciated!

Thanks,

Craig

[Rajapandiyan Settu]

Hi Craig, 

Greetings from Syncfusion support. 

Query : Edit Grid with DataTable datasource 

We already have documentation on how to bind data from a DataTable to a Grid component and how to perform CRUD operations in a DataTable with Grid component. Please find the documentation for your reference. 

Documentation :https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/#datatable 

 

Please get back to us if you need further assistance. 

Regards, 

Rajapandiyan S 

[Craig B]

Hi again,

I have managed to cast my DataTable as IEnumerable<ExpanoObject> but the grid still shows no results when attempting to bind.

There is definitely data in the IEnumerable <ExpanoObject> when it is being returned to the view so not sure where the issue lies.

View:

@Html.EJS().Grid("FTIRDriftCorrected").DataSource(ds => ds.Url(Url.Action("GridDataSource", "FTIRDriftCorrected")).Adaptor("UrlAdaptor")).Columns(col =>

{

foreach (DataColumn column in Model.DriftCorrectedValues.Columns)

{

if (column.ColumnName == "Deleted")

col.Field(column.ColumnName).HeaderText("").DisplayAsCheckBox(true).EditType("booleanedit").TextAlign(TextAlign.Center).Width("10%").Add();

else if (column.ColumnName == "Time")

col.HeaderText(column.ColumnName).Field(column.ColumnName).AllowEditing(false).TextAlign(TextAlign.Center).HeaderTextAlign(TextAlign.Center).Format("HH:mm").Add();

else

col.HeaderText(column.ColumnName).Field(column.ColumnName).TextAlign(TextAlign.Center).HeaderTextAlign(TextAlign.Center).Format("N1").Add();

}

}).EditSettings(e => { e.AllowAdding(false).AllowEditing(true).AllowDeleting(true).Mode(EditMode.Normal); }).Toolbar(new List

() { "Edit", "Update", "Cancel" }).AllowTextWrap(true).TextWrapSettings(text => { text.WrapMode(WrapMode.Header); }).Render()

Controller:

public ActionResult GridDataSource(DataManagerRequest dm)

{

IEnumerable dataTableToObject = vmcFTIRDriftCorrected.DriftCorrectedValues.DataTableToDynamic();

return Json(dataTableToObject, JsonRequestBehavior.AllowGet);

}

Extension Method:

public static IEnumerable DataTableToDynamic(this DataTable dt)

{

var dynamicDt = new List();

foreach (DataRow row in dt.Rows)

{

dynamic dyn = new ExpandoObject();

dynamicDt.Add(dyn);

foreach (DataColumn col in dt.Columns)

{

var dic = (IDictionary)dyn;

dic[col.ColumnName] = row[col];

}

}

return dynamicDt;

}

Thanks!

[Balaji Sekar]

Hi Craig, 

 

Before proceeding your query, we need the additional information of reported problem so, please share the below details to us that will help to validate further. 

1. Ensure that convert DataTable into list using expandoObject.
2. In your code example, you have return JSON data only instead of result, count object format so, please implement your sample with below link.

              For your convenience, we shared documentation link for URL adaptor- https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/#handling-on-demand-grid-actions 

3. Share the Network tab information for GridDataSource return result.

 

Regards, 

Balaji Sekar. 

[Craig B]

Thanks for your response.

I have managed to bind to the Grid without the need of a DataTable. I convert my data into List<ExpandoObject> and the grid is now binding properly (see below):

However, I am now struggling to access values on the server when trying to edit the grid.

Below you can see that there is data when I am passing to the View:

And below here you can see that there is no data in ExpandoObject when updating the Grid:

I hope I'm just missing something obvious.

Thanks again for your help.

[Balaji Sekar]

Hi Craig, 

We checked your query with shared code snippet and found that you have get the updated data in server using “obj” parameter so, we suggest you to use “value” instead of obj then we can access the updated data. 

In Update method, we need to update the modified data to respective datatable because of once returned updated value in this method then it will call Url(urlDatasource) server method to refresh the Grid with updated data.

 

        //update the record 

 

        public ActionResult Update([FromBody]CRUDModel<ExpandoObject> value) 

        { 

            var ord = value.Value; 

 

            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID.Equals( ord.OrderID.ToString())).FirstOrDefault(); 

            val.OrderID = ord.OrderID; 

 

            return Json(value.Value); 

        } 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar. 

[Craig B]

Hi again,

I now have the grid working properly. The issue was that the parameter name needed to be "value". I can access my values through casting the ExpandoObject as Dictionary<TKey, TValue>

However I would like to add one more thing in case others come across a similar issue.

I could not access my data in the CRUDModel<ExpandoObject> using you previous example, see below:

My issue is now resolved. Thank you for your help, it is much appreciated.

[Ajith Govarthan]

Hi Craig, 

Thanks for the update. 

We are happy to hear that the provided solution works fine at our end. You have also mentioned that you are facing data access issue in the update method at the server side. So, please confirm that you are still facing the data access issue in your Grid application or you found solution at your end to proceed further on your requirement. 

Regards, 

Ajith G.