I have a Kendo grid with "Select All" checkbox which select all rows. The user can select row/s and click download button to download the files. However, the user still have an option to select row/s of his choice and click download button which calls Javascript function. I am using ajax to pass the selected rows to my controller function and then i will deserialise my json string.
The problem is when i Select All checkbox, it says my object is undefined for all the rows selected and this applies when i select 1 or 2 rows. If i select 1 or 2 rows, my object get filled with the data returned on the grid instead of just giving me the selected one's. Refers to my object return for this
How can i create an object from selected checkbox and pass it do the controller ?
Returned Error Object
[{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined }]
Kendo Grid
<div class="form-group">
@(Html.Kendo().Grid<TTAF.Portal.Parts.Web.Models.ConsolidatedPossModel.GridConsolidatedPossModel>()
.Name("Grid")
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<button class="btn btn-primary" id="btnSearch" onclick="goToControllerDownloadAll()" name="submit" type="submit">Download Selected Orders</button>
</div>
</text>);
})
.Columns(columns =>
{
columns.Bound(x => x.ordernumber).Title("Order Number");
columns.Bound(x => x.ordernumber).Template(@<text></text>).ClientTemplate("<input id='chkId' name'chkbox' type='checkbox' class='checkbox' onClick='' />").Title("Enos")
.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>
Controller
function goToControllerDownloadAll() {
var JsonObj = null;
JsonObj = "["
debugger
var dataSource = $("#Grid").data("kendoGrid").dataSource;
var filters = dataSource.filter();
var allData = dataSource.data();
var query = new kendo.data.Query(allData);
var filteredData = query.filter(filters).data;
$.each(filteredData, function (item) {
JsonObj = JsonObj + "{ ordernumber: " + item.ordernumber + " },";
});
if (JsonObj.charAt(JsonObj.length - 1) == ',') {
JsonObj = JsonObj.substr(0, JsonObj.length - 1);
}
JsonObj = JsonObj + "]"
JsonObj = JSON.stringify(JsonObj);
JsonObj = JSON.parse(JsonObj);
JsonObj = JSON.stringify({ 'JsonObj': JsonObj });
$.ajax({
url: '@Url.Action("Action", "Controller")',
type: "POST",
contentType: 'application/json; charset=utf-8',
dataType: "json",
data: JsonObj,
traditional: true,
async: false,
cache: false,
complete: function (data) {
},
error: function () {
}
})
}
Javascript for selection
$("#Grid").data("kendoGrid");
//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")
.prop("checked", checkbox.is(":checked"))
.trigger("change");
});
var checkedIds = {};
$('#Grid').on("click", ".checkbox", selectRow);
$("#showSelection").bind("click", function () {
var checked = [];
for (var i in checkedIds) {
debugger
if (checkedIds[i]) {
checked.push(i);
}
}
});
function selectRow() {
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#Grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
alert(dataItem.ordernumber);
checkedIds[dataItem.ordernumber] = checked;
if (checked) {
row.addClass("k-state-selected");
} else {
row.removeClass("k-state-selected");
}
}
Aucun commentaire:
Enregistrer un commentaire