How to add Checked Column in Kendo Grid

Question

@model IEnumerable<Pardon.Models.ViewModel.StudendsShowCreatAddViewModel>
<h2>@ViewBag.Title</h2>

    @(Html.Kendo().Grid(Model)
                  .Name("grid")                      
          .Columns(columns =>
          {
              columns.Bound(model => model.ISSelected).Template(@<text></text>).ClientTemplate("<input type='checkbox' #= ISSelected ? checked='checked':'' # class='chkbx' />");
              //columns.Bound(model => model.ISSelected)///Bound(model => model.ISSelected)
              //.ClientTemplate("<input type='checkbox' #= ISSelected ? checked='checked' : '' # disabled='enabled' ></input>");
                  columns.Bound(model => model.CoursesSystem_ID).Visible (false);
                  columns.Bound(model => model.per_Name);
                  columns.Bound(model => model.per_Family);
                  columns.Bound(model => model.stu_ID).Visible (false);

              })
            .ToolBar(toolbar =>
                        {
                            toolbar.Custom().Action("CreateStudents", "CoursesSystem", new {_StudendsShowCreatAddViewModel = @Model }).Text("ثبت");
                        }
            )
            .Groupable()
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .DataSource(dataSource => dataSource
                                        .Server()
                        )                         
    )


<script>
    $(function() {
        $('#grid').on('click', '.chkbx', function() {
            var checked = $(this).is(':checked');
            var grid = $('#grid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('ISSelected', checked);
        });
    });
</script>

I tried the above column properties Boolean ==>Isselected to checked Column and Editable and it didn't work.

For example, such as Photo

Answer 1

You're trying to add a client template showing a checkbox. I take a slightly different approach setting CSS classes so that when the row is not being edited I'll show a tick or cross depending upon the underlying value, then when the cell is clicked to start editing the checkbox is displayed. Optionally you can add additional CSS so the tick is coloured green and the cross red.

columns.Bound(a => a.ISSelected)
    .ClientTemplate("<i class='fa fa-lg #: ISSelected ? 'fa-check' : 'fa-times' #'></i>")
    .HtmlAttributes(new { @class = "text-center" })
    .Title("Is Selected");

The above is using Font Awesome classes by the way.