how to get selected row value in the KendoUI
I have a kendoUI grid.
@(Html.Kendo().Grid<EntityVM>()
.Name("EntitesGrid")
.HtmlAttributes(new { style = "height:750px;width:100%;scrollbar-face-color: #eff7fc;" })
.Columns(columns =>
{
columns.Bound(e => e.Id).Hidden().IncludeInMenu(false);
columns.Bound(e => e.EntityVersionId).Hidden().IncludeInMenu(false);
columns.Bound(e => e.Name).Width("70%").Title("Entity Name");
columns.Bound(e => e.EIN).Width("30%");
})
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext k-grid-add' id='addEntity'><span class='k-icon k-add'></span>Entity</a>" +
"<a class='k-button k-button-icontext' id='editEntity'><span class='k-icon k-edit'></span>Edit</a>"))
.DataSource(dataSource => dataSource
.Ajax().ServerOperation(false)
.Model(model => model.Id(e => e.Id))
.Read(read => read.Action("GetEntities", "Entity", new { projectId = Request.QueryString[DataKeyNameConstants.ProjectId] })))
.Sortable()
.Scrollable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ColumnMenu()
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.Events(events => events.Change("entSelChange"))
)
now, I need to get the value of EntityVersionId from the selected Row. but not sure how to do it.
here's my javascript function
$("#editEntity").click(function () {
var entityGrid = $("#EntitesGrid").data("kendoGrid");
// what should I do from here
});
UPDATE: add code to loop all rows.
function loadPreviousEntityVersion() {
alert("sdfsdfsdf");
var entityGrid = $("#EntitesGrid").data("kendoGrid");
var data = entityGrid.dataSource.data();
for(var i = 0; i<data.length; i++) {
var currentDataItem = data[i];
alert(dataItem.EntityVersionId);
}
}
One way is to use the Grid's select()
and dataItem()
methods.
In single selection case, select()
will return a single row which can be passed to dataItem()
var entityGrid = $("#EntitesGrid").data("kendoGrid");
var selectedItem = entityGrid.dataItem(entityGrid.select());
// selectedItem has EntityVersionId and the rest of your model
For multiple row selection select()
will return an array of rows. You can then iterate through the array and the individual rows can be passed into the grid's dataItem()
.
var entityGrid = $("#EntitesGrid").data("kendoGrid");
var rows = entityGrid.select();
rows.each(function(index, row) {
var selectedItem = entityGrid.dataItem(row);
// selectedItem has EntityVersionId and the rest of your model
});
There is better way. I'm using it in pages where I'm using kendo angularJS directives and grids has'nt IDs...
change: function (e) {
var selectedDataItem = e != null ? e.sender.dataItem(e.sender.select()) : null;
}
I think it needs to be checked if any row is selected or not? The below code would check it:
var entityGrid = $("#EntitesGrid").data("kendoGrid");
var selectedItem = entityGrid.dataItem(entityGrid.select());
if (selectedItem != undefined)
alert("The Row Is SELECTED");
else
alert("NO Row Is SELECTED")