Kendo Grid - Select row and display values related to row

Question

I am working on a simple project to display a list of things in a Kendo Grid. When the user clicks a row of the Kendo Grid, I want to display values that are related to that row.

So far the grid works fine. It became selectable and its mouse-click event fires a JavaScript function.

Grid looks like this:

 @(Html.Kendo().Grid<MyProject.Models.Object>()
    .BindTo((IEnumerable<MyProject.Models.Object>)Model)
    .Name("Object")
    .Columns(columns =>
        {
            columns.Bound(p => p.ObjectID).Title("ID").Hidden().HtmlAttributes(new { id="ID" });
            columns.Bound(p => p.DmObjectName.DmObjectNameDesc).Title("Object Name");
            columns.Bound(p => p.DmObjectType.DmObjectTypeDesc).Title("Object Type");
            columns.Bound(p => p.DmObjectState.DmObjectStateDesc).Title("Storage State");
        })
    .Pageable(pager => pager
        .PageSizes(new[] { 5, 10, 20, 50, 100, 1000 })) 
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Single)
        .Type(GridSelectionType.Row)
    )
    .Sortable()
    .Reorderable(reorder => reorder.Columns(true))
    .Resizable(resize => resize.Columns(true))
    .ColumnMenu()
        .DataSource(dataSource => dataSource
            .Server()
            .Model(model => model.Id(p => p.ObjectID)
        ))
    .Events(e => e.Change("Grid_OnRowSelect"))
)

And label and textboxes:

<fieldset>
    <legend accesskey="H">Object Detail</legend>
    <table border="0" style="width: 95%; margin: 0 auto; border-collapse: collapse; border: 0px solid black;">
        <tr>
            <td class="label">
                @Html.Label("Object Name:", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("ObjectName").Enable(false)
            </td>
            <td class="label">
                @Html.Label("Max:", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("Max").Enable(false)
            </td>
            <td class="label">
                @Html.Label("Avg:", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("Avg").Enable(false)
            </td>
        </tr>
        <tr>
            <td class="label">
                @Html.Label("Fire", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("Fire").Enable(false)
            </td>
            <td class="label">
                @Html.Label("State", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("State").Enable(false)
            </td>
        </tr>
        <tr>
            <td class="label">
                @Html.Label("Health", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("Health").Enable(false)
            </td>
            <td class="label">
                @Html.Label("Location", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("Location").Enable(false)
            </td>
        </tr>
        <tr>
            <td class="label">
                @Html.Label("Reactivity", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("Reactivity").Enable(false)
            </td>
            <td class="label">
                @Html.Label("Container", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("Container").Enable(false)
            </td>
        </tr>
        <tr>
            <td class="label">
                @Html.Label("Special", new { @class = "designschema" })
            </td>
            <td class="editor">
                @Html.Kendo().MaskedTextBox().Name("Special").Enable(false)
            </td>
        </tr>
    </table>
</fieldset>

<fieldset>
    <legend accesskey="N">Notes</legend>
    <table border="0" style="width: 95%; margin: 0 auto; border-collapse: collapse; border: 0px solid black;">
        <tr>
            <td class="editor">
                @Html.TextArea("Notes", new { @style = "resize: vertical; width: 100%; height: 20px" })
            </td>
        </tr>
    </table>
</fieldset>

And here is the JavaScript:

<script>
    function Grid_OnRowSelect() {
        var row = this.select();
        var id = row.data("ID");
    }
</script>

I have not worked beyond this at the moment because it seems that row.data("ID") isn't working. I ran my application in debug mode and caught what is in the var row.

The value of row looks like this:

<tr class="k-state-selected" aria-selected="true">
    <td id="ID" style="display:none">1</td>
    <td>TEST</td>
    <td>Object (Flammable)</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>

So the selected values from row are correct. But is there a good way to pick each value from <td>, <tr>? Or a good way to use row.data("ID")?

I also want to put selected values into the textboxes right below the Kendo Grid. And I was thinking there is a way to select model, instead of each values from Grid, which name is MyProject.Models.Object where ID is matching to model.

Would you give me some good way to approach and solve so I can move further?

You want data-id, not data("ID")? http://www.telerik.com/forums/creating-data-bound-html-attributes-in-mvc-grid-cells — Nikki9696, Feb 26 '16 at 19:44
another link with a bunch of info it looks like for data attributes http://stackoverflow.com/questions/2520487/how-to-use-html-5-data-attributes-in-asp-net-mvc/4515095#4515095 — Nikki9696, Feb 26 '16 at 19:45
One more http://www.telerik.com/forums/creating-data-bound-html-attributes-in-mvc-grid-cells — Nikki9696, Feb 26 '16 at 19:52

score 0 · Answer 1 · answered Feb 26 '16 at 20:23

0

You could try kendo grid dataItem function. In your case it will be:

var selectedItem = this.dataItem(this.select());

answered Feb 26 '16 at 20:23

Maciej Wojsław

403
2
10

I tried this before. And getting this error _Uncaught TypeError: Cannot read property '0' of undefined_ – Y Kim Feb 26 '16 at 20:32
"this" is your grid object ? You could try to get reference to grid by $("#Object").data("kendoGrid"). Try use it instead "this – Maciej Wojsław Feb 26 '16 at 21:34
Yes, I did it also. I did `var grid = $("#Object").data("kendoGrid"); var selectedItem = grid.dataItem(grid.select());` and it referenced from http://www.telerik.com/forums/how-to-get-selected-row-and-its-dataitem – Y Kim Feb 26 '16 at 22:21

score 0 · Answer 2 · answered Feb 27 '16 at 16:38

This is documented:

When using the Grid's MVC wrapper, the Grid must be Ajax-bound for the dataItem() method to work. When using server binding, the dataSource instance does not contain the serialized data items.

You are using BindTo, so the grid's html is rendered at the server and it is not bound to any data at client-side. You can use a DataSource, or you need to do everything manually.

Kendo Grid - Select row and display values related to row

2 Answers2