how to get selected row value in the KendoUI

Question

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

    }
}

Also wanted to point out that KendoUI's grid does support batch editing / adding since it looks like you *may* be hand rolling that same idea. http://demos.kendoui.com/web/grid/editing.html — johlrich, Oct 18 '12 at 23:16

johlrich · Accepted Answer · 2012-10-18T23:26:22.837

107

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

edited Oct 18 '12 at 23:26

answered Oct 18 '12 at 23:00

johlrich

1,771
1
12
11

1

one last thing I'd like to point out is that selectedItem has the entire model that was eventually fetched by the DataSource, including properties which aren't used by a user control. For example. your EntityVersionId would be there even if it was not a hidden column. – johlrich Oct 18 '12 at 23:30
thank you so much, I have another question. now if you need to loop through all rows, not just the one you selected. is there something like entityGrid.rows() to get all rows. I cannot find it in the api. – qinking126 Oct 19 '12 at 15:28
If you need all the data and not the literal html rows, I wouldn't even bother with the grid's api. All dataItem() is doing is simplifying direct access to the dataSource underneath, so use that directly instead. entityGrid.dataSource.data() should give you everything. http://docs.kendoui.com/api/framework/datasource#data – johlrich Oct 19 '12 at 15:35
Hi, I tried to use your code, I need to use the selected rows as the data source of another grid, is it posible directly? – Badhon Jain Nov 21 '13 at 09:39

score 11 · Answer 2 · answered Dec 03 '14 at 13:35

11

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

answered Dec 03 '14 at 13:35

David Slavík

1,132
1
14
23

The problem with this one is that if you jut click on the grid item it will trigger the event, while it suppose to only do ti when a changed really happened. Basically the functionality as per "edit" – vsarunov May 09 '17 at 09:43

score 3 · Answer 3 · answered Mar 09 '14 at 05:08

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

score 1 · Answer 4 · answered Jun 06 '17 at 18:30

1

If you want to select particular element use below code

var gridRowData = $("<your grid name>").data("kendoGrid");
var selectedItem = gridRowData.dataItem(gridRowData.select());
var quote = selectedItem["<column name>"];

answered Jun 06 '17 at 18:30

Ashutosh B Bodake

1,304
1
19
31

how to get selected row value in the KendoUI

4 Answers4

Linked