CODEWITHSUNDEEP
asp.netrazorkendo-uitelerikkendo-grid
Tom el Safadi
Tom el Safadi

Reputation: 6746

KendoUI grid checkbox column

Currently I am having this code for displaying a KendoUI grid:

@(Html.Kendo().Grid<CleverFit.Models.MyHistorie>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Products_Read", "Action")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      {
        columns.Bound(product => product.Datum).Format("{0:dd.MM.yyyy}");
        columns.Bound(product => product.Aktion);
        columns.Bound(product => product.Ergebnis);
        columns.Bound(product => product.Wiedervorlage).Format("{0:dd.MM.yyyy H:mm}");
        columns.Bound(product => product.Bemerkung);
        columns.Bound(product => product.Erledigt);
      })
      .Pageable() // Enable paging
      .Sortable() // Enable sorting
)

I tried already this:

columns.Bound(product => product.Erledigt).ClientTemplate(
    "<input type='checkbox' value='#= ProductID #' " +
        "# if (Enabled) { #" +
            "checked='checked'" +
        "# } #" +
    "/>"
);

But if I add this, there is no data displayed in the grid...

The values of the last column which is product.Erledigt are displayed as true or false. Is it possible to display them as checkboxes?

I am using Telerik KendoUI and loading the content of the template via AJAX.

Upvotes: 1

Views: 2478

Answers (1)

dimodi
dimodi

Reputation: 4139

You can check the following FAQ page:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids

In addition, you can make the checkbox readonly or disabled to prevent the user from editing it and expect the changes to be persisted.

Update

The code that you have tried contains two data field values, which obviously do not exist in your Grid: ProductID and Enabled. Most probably you are getting a JavaScript error in the browser console. Replace Enabled with Erledigt and remove value='#= ProductID #' if you don't need such a thing.

Upvotes: 1

Related Questions