Displaying checkbox in Kendo grid for DataTable Model in ASP MVC

[Avinash]

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"))
    )
)

[Konstantin Dikov]

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

[Avinash]

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);
}

[Konstantin Dikov]

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

[Avinash]

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.

[Konstantin Dikov]

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