Here's the code showing what I have done. Basically I have done coding for Select All but it's outside the Kendo grid. What I need is to place a Select All checkbox inside the column header from where I can do Select All function, which I am doing now by above Select All which is placed outside the Kendo grid.
@{
Layout = "~/Views/Admin/_Layout.cshtml";
ViewBag.PageTitle = "Profile status";
TempData.Keep("ProfileName");
ViewBag.PageHeaderName = "Clean Profile";
}
<div class="card card-body dprediction mx-3">
<div class="form-horizontal">
<div class="accordion" id="CreateETLToolProfile">
<div class="form-group row flex-v-center px-3 pt-2">
<div class="col-md-6 pt-3"> @ViewBag.ProfileName</div>
<div class="col-md-6" style="text-align:right">
<span class="pt-2">
Select All Tables @Html.CheckBox("IsSelectAllTables",true,new { @OnClick = "CheckUncheckCheckBox();" , id = "IDIsSelectAllTables" })
</span>
<button class="btn btn-primary" id="btnRefresh"><i class="fa fa-refresh"></i></button>
</div>
</div>
<div style="padding:5px 15px;">
@(Html.Kendo().Grid<DRS.Model.DTO.CleanProfileModel>()
.Name("CleanProfileGrid")
.Columns(columns =>
{
columns.Bound(c => c.DESTINATIONTABLEID).Hidden();
columns.Bound(c => c.DestinationTableName).Title("Dest Table name");
columns.Bound(c => c.DestinationSPName).Title("Dest SP name");
columns.Bound(c => c.IsToBeCleaned).ClientTemplate("<input type='checkbox' #= IsToBeCleaned ? checked='checked' :'' # class='chkbx' />").Title("Tables To Be Cleaned").Filterable(false).HeaderTemplate("<label for='check - all'>Tables To Be Cleaned </label><input type='checkbox' #= IsToBeCleaned ? checked='checked' :'' # class='chkbx1' />");
})
.Pageable()
.Sortable()
.Resizable(r => r.Columns(true))
.Filterable(filterable => filterable.Mode(GridFilterMode.Menu))
.Editable(editable =>
{
editable.DisplayDeleteConfirmation(false);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(m => m.ID);
})
.PageSize(20)
)
.Events(events => events.DataBound("LoadCleanProfileGrid"))
)
</div>
<div class="card-body text-right pr-3">
@Html.ActionLink("Cancel", "ViewProfiles", "Admin", null, new { @class = "btn btn-secondary" })
<button id="btnSave" type="button" value="Save" class="btn btn-success">
<span class="glyphicon glyphicon-floppy-save"></span>
<span>Clean Profile</span>
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function LoadCleanProfileGrid() {
// CheckUncheckCheckBox();
}
$(document).ready(function () {
debugger;
AssingCleanProfileGrid();
});
var ds = new kendo.data.DataSource();
function AssingCleanProfileGrid() {
var grid = $('#CleanProfileGrid').data('kendoGrid');
grid.setDataSource(ds);
grid.dataSource.read();
ds = new kendo.data.DataSource({
type: "aspnetmvc-ajax",
transport: {
read: {
url: '@Url.Action("GetJsonProfileDataForCleanPanel", "Admin")',
type: "POST",
dataType: "json",
}
},
schema: {
data: "Data",
total: function (response) {
return response.Total;
},
model: {
}
},
// serverPaging: true,
page: 1,
pageSize: 20,
skip: 0,
take: 15,
// serverSorting: true,
});
grid.setDataSource(ds);
grid.dataSource.read();
}
var IsClickedOnSelectAll = true;
function CheckUncheckCheckBox() {
debugger;
var IsSelctAll = true;
IsSelctAll = $("#IDIsSelectAllTables").prop("checked");
// alert(IsSelctAll);
var grid = $("#CleanProfileGrid").data("kendoGrid");
// var gridData = grid.dataSource.view();
var gridData = $('#CleanProfileGrid').data().kendoGrid.dataSource.data();
for (var i = 0; i < gridData.length; i++) {
var firstItem = $('#CleanProfileGrid').data().kendoGrid.dataSource.data()[i];
firstItem.set('IsToBeCleaned', IsSelctAll);
}
IsClickedOnSelectAll = true;
}
$(function () {
$('#CleanProfileGrid').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#CleanProfileGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('IsToBeCleaned', checked);
if (IsClickedOnSelectAll) {
$("#IDIsSelectAllTables").prop("checked", checked);
IsClickedOnSelectAll = false;
}
})
})
$("#btnRefresh").click(function () {
location.reload(true);
})
$("#btnSave").click(function () {
debugger;
var gridmodel = $("#CleanProfileGrid").data("kendoGrid").dataSource.data();
var CleanProfileGrid = JSON.stringify(gridmodel);
var ProfileName = '@ViewBag.ProfileName';
var CleanProfileId = '@ViewBag.CleanProfileId';
debugger;
$.ajax({
url: "@Url.Action("CleanProfileData", "Admin")",
type: "POST",
//dataType: "JSON",
data: { CleanProfileGrid: CleanProfileGrid, ProfileName: ProfileName, CleanProfileId:CleanProfileId},
success: function (result) {
}
});
window.location.href ='@Url.Action("ViewProfiles", "Admin")';
});
</script>
<span>YOUR CHECKBOX</span>] Did you try configuring with the toolbar property within kendo grid ?