I have kendo grid which i have SelectAll checkbox. I can alert any selected row with its value but when click SelectAll from the grid and try to alert all the rows selected at once, it is only displaying one value and other checkbox won't be selected.
I have followed this Select or Deselect All Rows with Select All Header Checkbox and i can't get it right ?
Here is my code:
Kendo grid
<div class="form-group">
@(Html.Kendo().Grid<myModel>()
.Name("Grid")
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<button class="btn btn-primary" id="btnSearch" onclick="" name="submit" type="submit">Download All</button>
<button class="btn btn-primary" id="showSelection">Show selected Order Number</button>
</div></text>);
})
.Columns(columns =>
{
columns.Template(@<text>
@Html.ActionLink(@item.ordernumber.ToString(), "action", "controller", new { ordernumber = @item.ordernumber })
</text>)
.ClientTemplate("<a href='" + Url.Action("action", "controller", null, "https") + "?ordernumber=#= ordernumber#'" + ">Download</a>")
.Title("Download").Width(80);
columns.Bound(x => x.ordernumber).Title("Order Number");
columns.Bound(x => x.selected).Template(@<text></text>).ClientTemplate("<input id='chkId' name'chkbox' type='checkbox' class='checkbox' onClick='' />").Title("")
.Filterable(false).Sortable(false);
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Scrollable()
.Filterable()
.Sortable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(false) //No post back
.Read(read => read.Action("action", "controller"))))
</div>
Javascript
//$("#Grid").kendoGrid();
$("#Grid").data("kendoGrid").dataSource;
//Select All
var grid = $("#Grid").data("kendoGrid");
grid.thead.find("th:last")
.append($('<input class="checkbox" type="checkbox"/>'))
.delegate(".checkbox", "click", function () {
var checkbox = $(this);
grid.table.find("tr")
.find("td:last input")
.attr("checked", checkbox.is(":checked"))
.trigger("change");
});
var checkedIds = {};
$('#Grid').on("click", ".checkbox", selectRow);
$("#showSelection").bind("click", function ()
{
var checked = [];
debugger
for (var i in checkedIds)
{
debugger
if (checkedIds[i])
{
checked.push(i);
}
}
alert(checked);
});
function selectRow() {
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#Grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
checkedIds[dataItem.ordernumber] = checked;
if (checked) {
alert(dataItem.ordernumber);
row.addClass("k-state-selected");
} else {
alert(dataItem.ordernumber);
row.removeClass("k-state-selected");
}
}
Aucun commentaire:
Enregistrer un commentaire