how to get selected row value in the KendoUI

qinking126 picture qinking126 · Oct 19, 2012 · Viewed 107.1k times · Source

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);

    }
}

Answer

johlrich picture johlrich · Oct 19, 2012

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
});