Inline Editing of Dynamic Columns

4 posts, 0 answers
  1. Allen
    Allen avatar
    2 posts
    Member since:
    Feb 2016

    Posted 12 Sep Link to this post

    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.    }

     

     

  2. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 14 Sep Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Allen
    Allen avatar
    2 posts
    Member since:
    Feb 2016

    Posted 14 Sep in reply to Kostadin Link to this post

    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. 

  5. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 16 Sep Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready