Grid HeaderTemplate checkbox not holding its value

[Faz]

Hi

I have  a grid with checkbox columns, I like to place a checkbox on the header and select /deselect rows.

here is my grid, columns AttendTraining and ExamPassed are checkbox columns

<div>
        @(Html.Kendo().Grid<ViewStudents>()
              .Name("StudentGrid")
              .Columns(columns =>
              {
                  ;
                  columns.Bound(c => c.StId).Width(80);
                  columns.Bound(c => c.EmailPersonal).Width(230);
                  columns.Bound(c => c.FirstName).Width(200);
                  columns.Bound(c => c.Surname).Width(200);
                  columns.Bound(c => c.AttendTraining).Width(120).ClientTemplate("#= AttendTraining ? 'Yes' : 'No' #").HeaderTemplate("<label><input type='checkbox' id='chkAttTrn' onclick='ChangeCheckStatus(this.checked,this);'> <span>&nbsp; Attend Training </span></label>");
                  columns.Bound(c => c.ExamPassed).Width(120).ClientTemplate("#= ExamPassed ? 'Yes' : 'No' #").HeaderTemplate("<label><input type='checkbox' id='chkExam' onclick='ChangeCheckStatus(this.checked,this);'> <span>&nbsp; Exam Passed </span></label>");

                  columns.Bound(c => c.MobilePhoneNumber).Width(120).Title("Mobile/Cell Number");

              })
              .Editable(e => e.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
          .Resizable(resize => resize.Columns(true))
          .Scrollable(s => s.Enabled(true))
          .Selectable(selectable =>
          {
              selectable.Mode(GridSelectionMode.Single);
              selectable.Type(GridSelectionType.Row);
              selectable.Mode(GridSelectionMode.Multiple);
          })
          .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(25)
            .PageSizes(new int[] { 25, 50, 100 })
            )
          .Sortable(sortable =>
          {
              sortable.SortMode(GridSortMode.SingleColumn);
          })
          .Events(events => events.Edit("disableEdit"))
.DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(x =>x.EmailWork))

        .PageSize(20)
        .ServerOperation(false))
          )

    </div>

I can update each column

	    
function ChangeCheckStatus(flag, e) {

        var grid = $('#StudentGrid').data('kendoGrid');
        var check = 0;
        if (flag)
            check = 1;

        $.each(grid.dataSource.data(), function (index, row) {
            console.log("row...")
            if (e.id == "chkAttTrn")
                row.set('AttendTraining', check);
            else if (e.id == "chkTakeExam")
                row.set('ExamPassed', check);
        });
    }

When I click on the header checkboxes (Attend Training & Exam Passed) it does change the column values, but the checkbox itself does not retain it's value.

what i need is,  for it to hold it's value like below so i can toggle.

Thanks

Faz

[Alexander]

Hi Faz,

I noticed that there is not a Telerik UI for ASP.NET Core license associated with your account which limits the availability of our support services for the product. In this regard, It is recommended that you either purchase or renew your license in order to gain access to the latest updates, fixes, features, and support regarding the Telerik UI for ASP.NET Core components. More information regarding the currently available plans can be reviewed here:

• Support Plans

Nevertheless, the encountered issue could possibly comprise the fact that due to the built-in sorting functionality for the column header being triggered simultaneously with the arbitrary logic you currently are executing for the checkbox inputs. In this regard, we have a dedicated knowledge base article that tackles how to prevent the default scrolling functionality from triggering by utilizing the conventional .stopPropagation() method:

• Prevent Sorting with Checkbox in Header

Here is an example:

.Columns(columns =>
{
    columns.Bound(c => c.AttendTraining).Width(120).ClientTemplate("#= AttendTraining ? 'Yes' : 'No' #").ClientHeaderTemplate("<label><input type='checkbox' id='chkAttTrn' onclick='ChangeCheckStatus(event,this.checked,this);'> <span>&nbsp; Attend Training </span></label>"); // pass the "event" object
})


<script>
    function ChangeCheckStatus(event,flag, e) {
        event.stopPropagation();
    }
</script>

For your convenience, I am attaching a Telerik REPL version of the knowledge base article that also tackles a similar scenario as yours:

• Telerik REPL for ASP.NET Core Example

I hope this helps.

Kind Regards,
Alexander
Progress Telerik