Сетка кендо - выберите строку и отобразите значения, относящиеся к строке

Я работаю над простым проектом по отображению списка вещей в сетке кендо. Когда пользователь щелкает строку сетки кендо, я хочу отобразить значения, связанные с этой строкой.

Пока сетка работает нормально. Он стал доступным для выбора, и его событие щелчка мыши запускает функцию 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 соответствует модели.

Не могли бы вы дать мне хороший способ подойти и решить, чтобы я мог двигаться дальше?


person Y Kim    schedule 26.02.2016    source источник
comment
Вам нужен идентификатор данных, а не данные (идентификатор)? telerik.com/forums/   -  person Nikki9696    schedule 26.02.2016
comment
Еще один telerik.com/forums/   -  person Nikki9696    schedule 26.02.2016
comment
Могу я предложить решение с помощью JQuery?   -  person Rajshekar Reddy    schedule 27.02.2016
comment
Да, пожалуйста, любые предложения приветствуются!   -  person Y Kim    schedule 28.02.2016


Ответы (2)


Вы можете попробовать функцию kendo grid dataItem. В вашем случае это будет:

var selectedItem = this.dataItem(this.select());
person Maciej Wojsław    schedule 26.02.2016
comment
Я пробовал это раньше. И получаю эту ошибку Uncaught TypeError: Cannot read property '0' of undefined - person Y Kim; 26.02.2016
comment
это ваш объект сетки? Вы можете попытаться получить ссылку на сетку с помощью $ (# Object) .data (kendoGrid). Попробуйте использовать это вместо этого - person Maciej Wojsław; 27.02.2016
comment
Да, я тоже так делал. Я сделал var grid = $("#Object").data("kendoGrid"); var selectedItem = grid.dataItem(grid.select());, и он ссылался на telerik.com / Forums / How-to-get-selected-row-and-its-dataitem - person Y Kim; 27.02.2016

Это задокументировано:

При использовании оболочки MVC Grid, Grid должен быть привязан к Ajax, чтобы метод dataItem () работал. При использовании привязки к серверу экземпляр dataSource не содержит сериализованных элементов данных.

Вы используете BindTo, поэтому HTML-код сетки отображается на сервере и не привязан к каким-либо данным на стороне клиента. Вы можете использовать DataSource, или вам нужно делать все вручную.

person mrmashal    schedule 27.02.2016