Kendo Grid: Header Column "Check All" checkbox that checks boxes on a grid across all pages
Is there an example in javascript and / or jquery where anyone has a Check All checkbox that checks all checkboxes on all grid pages?
I have tried for 3 days now and I don't find clean answers.
Which is ugly right now and doesn't really work ...
function onRequestEnd(e) {
var masterCbChecked = $("#masterCheckBox").is(':checked');
var grid = $("#grid").data("kendoGrid");
for (var i = 0; i < grid.dataSource.total(); i ++) {
var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
var elementRow = grid.table.find(".cbAdvisor")[i];
if (elementRow != null) {
var checked = elementRow.checked,
row = $(elementRow).closest("tr"),
dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
checkedIds[dataItem.DimAgentId] = masterCbChecked;
if (masterCbChecked) {
//-select the row
elementRow.checked = true;
row.addClass("k-state-selected");
dataRow.IsSelected = true;
} else {
//-remove selection
elementRow.checked = false;
row.removeClass("k-state-selected");
dataRow.IsSelected = false;
}
}
}
}
function checkAll(ele) {
var state = $(ele).is(':checked');
var grid = $("#grid").data("kendoGrid");
//grid.dataSource.pageSize(grid.dataSource.total());
//grid.dataSource.read();
//grid.refresh();
var currentPage = $("#grid").data("kendoGrid").dataSource.page();
checkedIds = {};
//for (var a = 0; a < modelJson.length; a ++) {
// var m = modelJson[a];
// m.IsSelected = true;
//}
for (var a = 1; a < 2; a ++) {
var pager = grid.pager;
pager.bind('change', a);
grid.one("dataBound", function () {
this.dataSource.page(a);
});
grid.dataSource.fetch();
for (var i = 0; i < grid.dataSource.total(); i ++) {
var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
var elementRow = grid.table.find(".cbAdvisor")[i];
if (elementRow != null) {
var checked = elementRow.checked,
row = $(elementRow).closest("tr"),
dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
checkedIds[dataItem.DimAgentId] = state;
if (state) {
//-select the row
elementRow.checked = true;
row.addClass("k-state-selected");
dataRow.IsSelected = true;
} else {
//-remove selection
elementRow.checked = false;
row.removeClass("k-state-selected");
dataRow.IsSelected = false;
}
}
}
pager.bind('change', currentPage);
grid.one("dataBound", function () {
this.dataSource.page(currentPage);
});
grid.dataSource.fetch();
//mark for paging
if (dataRow != null) {
if (state) {
dataRow.IsSelected = true;
} else {
dataRow.IsSelected = false;
}
}
};
if (!state) {
checkedIds = {};
}
//grid.dataSource.pageSize(50);
//grid.refresh();
}
+3
source to share
3 answers
I solved it.
<div id="panelGridContainer" class="containerGrid">
@(Html.Kendo().Grid<ReportGridModel>()
.Name("grid")
.Columns(columns =>
{
var m = Model.Section.DrilldownColumns[0];
columns.BoundAll(p => p.DimAgentId, m);
columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsSelected ? checked='checked':'' # class='cbAdvisor' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(30);
columns.BoundAll(p => p.AdvisorName, m).ClientTemplate("" + "#: AdvisorName #" + "<div class='reportDetailLink ui-button ui-widget ui-button-text-only' onclick='getAdvisorDetailView(this)'>Detail</div>").Width(300);
columns.BoundAll(p => p.GoalAmount, m).ClientTemplate("" + "$#: GoalAmount.formatMoney(0, '.', ',') #" + "<div id='editIndividualGoalLink' class='reportEditLink ui-button ui-widget ui-button-text-only' onclick='openFytaIndividualGoalOverlay(this)'><i class='icon icon-pencil'></i> Edit</div><div class='editIndGoalPanel' style='display:none;'></div>").Width(200);
columns.BoundAll(p => p.RevenueAmount, m).Width(100);
columns.BoundAll(p => p.GoalProgressToDate, m).Width(75);
columns.BoundAll(p => p.RevenueChangeYoY, m).Width(75);
columns.BoundAll(p => p.BranchComposer, m).Width(200);
})
.Sortable()
.Pageable(pager => pager.PageSizes(new[] { 50, 100, 500, 1000 }))
//.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Read(read => read.Action("GetReportGridData", "FytByAdvisor"))
.Events(events => events.RequestStart("onDataSourceRequestStart"))
)
.Events(events => events.DataBound("onGridDataFound").DataBound("onDataBound")))
</div>
var checkedIds = {};
//on click of the checkbox:
$('#grid').on('click', '.cbAdvisor', function() {
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
if (!checked) {
$('#masterCheckBox').attr('checked', false); // Unchecks it
}
checkedIds[dataItem.DimAgentId] = checked;
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
});
//on dataBound event restore previous selected rows:
function onDataBound(e) {
var view = this.dataSource.view();
for(var i = 0; i < view.length;i++){
if(checkedIds[view[i].DimAgentId]){
this.tbody.find("tr[data-uid='" + view[i].uid + "']")
.addClass("k-state-selected")
.find(".cbAdvisor")
.attr("checked","checked");
}
}
var masterCbChecked = $("#masterCheckBox").is(':checked');
var grid = $("#grid").data("kendoGrid");
//if(!masterCbChecked)
//{
// checkedIds = {};
//}
if(masterCbChecked)
{
for (var i = 0; i < grid.dataSource.total(); i ++) {
var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
var elementRow = grid.table.find(".cbAdvisor")[i];
if (elementRow != null) {
var checked = elementRow.checked,
row = $(elementRow).closest("tr"),
dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
if (masterCbChecked) {
checkedIds[dataItem.DimAgentId] = masterCbChecked;
//-select the row
elementRow.checked = true;
row.addClass("k-state-selected");
dataRow.IsSelected = true;
} else {
//-remove selection
elementRow.checked = false;
row.removeClass("k-state-selected");
dataRow.IsSelected = false;
}
}
}
}
}
function checkAll(ele) {
var state = $(ele).is(':checked');
var grid = $("#grid").data("kendoGrid");
grid.dataSource.pageSize(grid.dataSource.total());
grid.dataSource.read();
grid.refresh();
checkedIds = {};
for (var i = 0; i < grid.dataSource.total(); i ++) {
var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
var elementRow = grid.table.find(".cbAdvisor")[i];
if (elementRow != null) {
var checked = elementRow.checked,
row = $(elementRow).closest("tr"),
dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
if (state) {
checkedIds[dataItem.DimAgentId] = state;
//-select the row
elementRow.checked = true;
row.addClass("k-state-selected");
dataRow.IsSelected = true;
} else {
//-remove selection
elementRow.checked = false;
row.removeClass("k-state-selected");
dataRow.IsSelected = false;
}
}
//mark for paging
if (dataRow != null) {
if (state) {
dataRow.IsSelected = true;
} else {
dataRow.IsSelected = false;
}
}
};
// set back to 50 page size
grid.dataSource.pageSize(50);
}
+1
source to share
I got it with this code with some modification:
columns.Template(@<text><input name="chkStatus" type="checkbox" class="chkFormols" /></text>)
.HeaderTemplate("<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)' />").Width(50);
function checkAll(ele) {
debugger;
var state = $(ele).is(':checked');
var grid = $('#grid').data('kendoGrid');
if (state == true) {
$('.chkFormols').prop('checked', true);
}
else {
$('.chkFormols').prop('checked', false);
}
};
+3
source to share
Try this code:
set column in grid(mvc)==>{
columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' name='chkbSlc_Formols' class='chkFormols' />").HeaderTemplate("<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)' name='chk[]'/>").Width(50);
}
function checkAll(ele) {
var state = $(ele).is(':checked');
$('.chkFormols').prop('checked', state);
}
+1
source to share