Я работаю над простым проектом по отображению списка вещей в сетке кендо. Когда пользователь щелкает строку сетки кендо, я хочу отобразить значения, связанные с этой строкой.
Пока сетка работает нормально. Он стал доступным для выбора, и его событие щелчка мыши запускает функцию 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> </td>
<td> </td>
</tr>
Значит, выбранные значения из строки верны. Но есть ли хороший способ выбрать каждое значение из <td>, <tr>
? Или хороший способ использовать row.data("ID")
?
Я также хочу поместить выбранные значения в текстовые поля прямо под сеткой кендо. И я подумал, что есть способ выбрать модель вместо каждого значения из сетки, имя которого MyProject.Models.Object
, где ID
соответствует модели.
Не могли бы вы дать мне хороший способ подойти и решить, чтобы я мог двигаться дальше?