Kendo Grid - 选择行并显示与行相关的值

Question

我正在做一个简单的项目来显示剑道网格​​中的事物列表。 当用户单击 Kendo Grid 的一行时，我想显示与该行相关的值。

到目前为止，网格工作正常。它变得可选择并且它的鼠标点击事件触发一个 JavaScript 函数。

网格如下所示：

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

还有标签和文本框：

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

这里是 JavaScript：

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

目前我还没有超出这个范围，因为row.data("ID") 似乎不起作用。我在调试模式下运行我的应用程序并捕获了 var row 中的内容。

row 的值如下所示：

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

所以从行中选择的值是正确的。但是有没有从<td>, <tr> 中选择每个值的好方法？还是使用row.data("ID")的好方法？

我还想将选定的值放入剑道网格正下方的文本框中。而且我在想有一种方法可以选择模型，而不是从网格中选择每个值，名称是 MyProject.Models.Object 其中ID 与模型匹配。

你能给我一些好的方法来接近和解决，以便我可以更进一步吗？

Answer 1

你可以试试剑道网格数据项功能。在您的情况下，它将是：

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

Answer 2

这是documented：

使用 Grid 的 MVC 包装器时，Grid 必须是 Ajax 绑定的，dataItem() 方法才能工作。使用服务器绑定时，dataSource 实例不包含序列化的数据项。

您正在使用BindTo，因此网格的 html 在服务器上呈现，它不会绑定到客户端的任何数据。您可以使用DataSource，或者您需要手动完成所有操作。