Displaying checkbox in Kendo grid for DataTable Model in ASP MVC

6 posts, 1 answers
  1. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 24 Aug Link to this post

    Hi i am binding my kendo grid with DataTable and trying to display some columns as checkbox using clienttemplate. However every time i am trying i am getting error doing that.

    Does anyone know how i can achieve this?

    I have attached the mockup of image what im trying to achieve i.e. grid-mockup.jpg. 

    The error message i get is: Uncaught ReferenceError: ColumnName is not defined

    Here is my Razor code:

    @using Kendo.Mvc.UI
    @model System.Data.DataTable
     
    @(Html.Kendo().Grid<dynamic>()
        .Name("Grid")
        .Columns(columns =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                if (column.ColumnName != "SupplierNumber" && column.ColumnName != "CustomerItemNumber")
                {
                    columns.Bound(column.ColumnName).ClientTemplate("<input type='checkbox' disabled #= ColumnName == 'True' ? checked='checked' : '' # />");
                }
                else
                {
                    columns.Bound(column.ColumnName);
                }
            }
            columns.Command(cmd => cmd.Edit());
        })
        .Pageable()
        .Sortable()
        .Editable(ed => ed.Mode(GridEditMode.PopUp))
        .Filterable()
        .Groupable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                var id = Model.PrimaryKey[0].ColumnName;
                model.Id(id);
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    var field = model.Field(column.ColumnName, column.DataType);
                    if (column.ColumnName == id)
                    {
                        field.Editable(false);
                    }
     
                }
            })
            .Read(read => read.Action("Read", "Home"))
            .Update(update => update.Action("Update", "Home"))
        )
    )

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 25 Aug Link to this post

    Hi Avinash,

    Could you please try the following syntax for the client template, which should pass the correct field name to the template:
    columns.Bound(column.ColumnName).ClientTemplate("<input type='checkbox' disabled #= " + column.ColumnName + "== 'True' ? checked='checked' : '' # />");

    Please let me know if this resolves the problem.


    Regards,
    Konstantin Dikov
    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. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 25 Aug Link to this post

    Konstantin,

    That worked. Now i am trying to put together Update action method but i am having hard time retrieving data on the controller side. Here  is my 'Update' method: The value of data is always empty (check DataTable.jpg for screenshot)

    public ActionResult Update([DataSourceRequest] DataSourceRequest request, DataTable data)
    {
     
       return Json(null);
    }

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 29 Aug Link to this post

    Hi Avinash,

    In order to retrieve the values you will have to use the approach from the Code Library, where each field is listed with the same name within the arguments:
    public ActionResult Update([DataSourceRequest] DataSourceRequest request, int ProductID, string ProductName, int SupplierID,
            int CategoryID, string QuantityPerUnit, double UnitPrice, int UnitsInstock, int UnitsOnOrder, int ReorderLevel, bool Discontinued)
    {
        //your database save logic
        return Json(new object());
    }

    Since the edited record is not a DataTable, it is not possible to pass such object as a parameter.

    If other questions arise, please feel free to contact us again.


    Regards,
    Konstantin Dikov
    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
  6. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 29 Aug in reply to Konstantin Dikov Link to this post

    The issue i wouldn't know what would the column names be until the code runs since these are dynamic columns. Is there any other way to retrieve the values in ActionMethod?

     

    Thanks.

  7. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 31 Aug Link to this post

    Hello Avinash,

    You can list all the possible fields in the Update action method. Another option would be to traverse the Request.Form keys (by eliminating the sort, page, filter, etc. value) and retrieve the changed directly from there:
    this.Request.Form["FirstName"] will return the new value for the FirstName filed
    this.Request.Form.AllKeys contains all of the submitted values


    Kind Regards,
    Konstantin Dikov
    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