#asp.net #asp.net-mvc #kendo-grid #kendo-asp.net-mvc
#asp.net #asp.net-mvc #kendo-grid #kendo-asp.net-mvc
Вопрос:
Вот код, показывающий, что я сделал. По сути, я выполнил кодирование для Select All, но оно находится за пределами Kendo grid. Что мне нужно, так это установить флажок «Выбрать все» внутри заголовка столбца, откуда я могу выполнить функцию «Выбрать все», которую я делаю сейчас, выбрав все, что находится за пределами сетки Kendo.
@{
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>
Комментарии:
1. панель инструментов: [
<span>YOUR CHECKBOX</span>] Вы пробовали настраивать с помощью свойства toolbar в kendo grid?
Ответ №1:
Сетка Kendo фактически поддерживает выбор флажка из поля:
Если вы выберете встроенный выбор, вы можете сохранить выбор между операциями — подкачкой / сортировкой / фильтрацией / группировкой.
Ответ №2:
Как отмечалось в другом ответе здесь, сетка имеет встроенную функцию выбора всех.
Но в случае, если вам требуется пользовательский внешний вид или поведение, вы можете использовать для этого шаблоны заголовков столбцов Kendo. Сначала определите свой пользовательский заголовок, представляющий заголовок с флажком. Это может быть размещено над сеткой:
@helper MyHeaderTemplate() {
<span style='text-align:right'>My<br/>Header<br/>Checkbox<br/></span>
@(Html.CheckBox("MySelectAllBox", false,
new
{
style = "font-size:inherit; margin-top:5px",
@onchange = "handleSelectAllClick(this)"
})
)
}
Затем обратитесь к шаблону из вашей сетки:
@(Html.Kendo().Grid<DRS.Model.DTO.CleanProfileModel>()
.Name("myGrid")
.Columns(columns =>
{
columns.Bound(p => p.MyColumnProperty)
.HtmlAttributes(new { style="text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align:center" })
.HeaderTemplate(@<text>@MyHeaderTemplate()</text>);
})
)
Затем напишите некоторый JavaScript для обработки handleSelectAllClick события по мере необходимости, чтобы выбрать или отменить выбор всех строк сетки.