Inline Editing of Dynamic Columns

[Allen]

I have a model with a dynamic number of attributes that I am displaying in a grid using the method described here. The ajax read, edit, and destroy functions work properly, but I can't get the create button to generate a new line in the grid. Is there a way to get this functionality working with dynamically generated columns?

 

Model:

01.public class Product
02.    {
03.        public int ID { get; set; }
04.
05.        private string _Name = "Product";
06.        public string Name
07.        {
08.            get { return _Name; }
09.            set { _Name = value; }
10.        }
11.
12.        public Dictionary<string, int> OptionIDs { get; set; }
13.    }

Grid in View:

01.
 @(Html.Kendo().Grid<dynamic>()
02.            .Name("grid")
03.            .Columns(columns =>
04.            {
05.                columns.Bound("Name").Title("Name").EditorTemplateName("String");
06.                columns.Bound("ID").Title("Product ID").EditorTemplateName("Integer");
07.
08.                foreach (Dimension d in  Model.Dimensions)
09.                {
10.                    columns.Bound($"OptionIDs[{d.ID.ToString()}]").Title(d.Name).EditorTemplateName("Integer");
11.                }
12.                columns.Command(command => { command.Edit(); command.Destroy(); });
13.            })
14.            .ToolBar(tb => tb.Create())
15.            .Selectable()
16.            .Editable(editable => editable.Mode(GridEditMode.InLine))
17.            .Pageable()
18.            .DataSource(datasource => datasource
19.                .Ajax()
20.                .Model(
21.                    model =>
22.                    {
23.                        model.Id("ID");
24.                    }
25.                )
26.                .PageSize(20)
27.                .Read(read => read.Action(          "Products_Read",    "Products"))
28.                .Update(update => update.Action(    "Products_Update",  "Products"))
29.                .Create(create => create.Action(    "Products_Create",  "Products"))
30.                .Destroy(destroy => destroy.Action( "Products_Destroy", "Products"))
31.            )
32.)

   

Controller:

01.public class ProductsController : Controller
02.    {
03.        public ActionResult Index()
04.        {
05.            return View(Models.MockData.PVM);
06.        }
07.
08.        public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
09.        {
10.            IQueryable<Models.Product> ps = Models.MockData.PVM.Products.AsQueryable();
11.            DataSourceResult result = ps.ToDataSourceResult(request, p => new
12.            {
13.                Name = p.Name,
14.                ID = p.ID,
15.                OptionIDs = p.OptionIDs
16.            });
17.
18.            return Json(result, JsonRequestBehavior.AllowGet);
19.        }
20.
21.        public ActionResult Products_Create([DataSourceRequest] DataSourceRequest request, Models.Product product)
22.        {
23.            return Json(new[] { product }.ToDataSourceResult(request, ModelState));
24.        }
25.
26.        public ActionResult Products_Update([DataSourceRequest] DataSourceRequest request, Models.Product product)
27.        {
28.            return Json(new[] { product }.ToDataSourceResult(request, ModelState));
29.        }
30.
31.        public ActionResult Products_Destroy([DataSourceRequest] DataSourceRequest request, Models.Product product)
32.        {
33.            return Json(new[] { product }.ToDataSourceResult(request, ModelState));
34.        }
35.    }

 

 

[Kostadin]

Hi Allen,

I examined the provide code and as far as I can see it looks correct. Could you please verify that you are not receiving any client side error which might prevent opening the inset row? Additionally I would appreciate if you can replicate the issue in a small runnable sample in order to examine it locally.

I am looking forward to your reply.

Regards,
Kostadin
Telerik by Progress

[Allen]

Thanks for getting back to me! I checked into client side errors, and it is throwing an error with the create event in the kendo.all.js _rowsHtml function. 

"0x800a138f - JavaScript runtime error: Unable to get property '1' of undefined or null reference"

I created an example project that demonstrates this behavior. 

[Kostadin]

Hello,

The cause for this issue is when you create a new object the grid does not know what it's type since you are using a dynamic object. A possible solution is to use predefined model as demonstrated in the following code library. Otherwise you need to create a custom add functionality where you will pass the object to the server and insert it in the databse.

I hope this information helps.

Regards,
Kostadin
Telerik by Progress