Как создать dropdown
с выбранным элементом на основе данных с сервера в редактируемой всплывающей строке в кендо grid
?
Код ниже отображает опции в выбранной уценке, но без выбранной опции.
Данные JSON:
[{
"id": 1,
"parentId": 0,
"name": "Gowna1"}, {
"id": 2,
"parentId": 1,
"name": "Podkat1"}, {
"id": 6,
"parentId": 0,
"name": "Gowna2"}, {
"id": 7,
"parentId": 6,
"name": "podkategoria2"}, {
"id": 8,
"parentId": 1,
"name": "podkategoria3"}]
Кендо Сетка и источник данных:
$(document).ready(function() {
var
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "{{ path('getjsondocs') }}",
dataType: "json"},
update: {
url: "{{ path('updatedoc') }}",
type: "post",
dataType: "json"},
destroy: {
url: "{{ path('deletedoc') }}",
type: "post",
dataType: "json"},
},
group: [{
field: "category"}, {
field: "subcategory"}],
batch: true,
pageSize: 40,
schema: {
model: {
id: "documentId",
fields: {
documentId: {
editable: false
},
documentDesc: {
editable: true
},
documentFile: {
editable: true
},
documentDateAdd: {
editable: false
},
documentDateMod: {
editable: false
},
category: {
editable: true
},
subcategory: {
editable: true
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
selectable: false,
groupable: true,
sortable: true,
columns: [{
field: "documentFile",
title: "Plik",
template: '<a href="files/#=documentFile#" class="home_grid_link">#=documentFileTitle#</a>'
},
{
field: "documentDateAdd",
title: "Data Dodania"},
{
field: "documentDesc",
title: "Opis"},
{
field: "user",
title: "Twórca"},
{
field: "category",
title: "Kategoria"},
{
field: "subcategory",
title: "Podkategoria"},
{
command: ["edit", "destroy"],
title: " ",
width: 200
}
],
editable: {
mode: "popup",
confirmation: true,
template: $("#popup_editor").html()
}
});
categoriesDS = new kendo.data.DataSource({
transport: {
read: {
url: "{{ path('get_json_categories') }}",
dataType: "json"}
}
});
});
скрипт всплывающего шаблона:
<script id="popup_editor" type="text/x-kendo-template">
<form method="post" action="{{ path('updatedoc') }}" enctype="multipart/form-data">
<div class="k-edit-label">
<label for="documentFile">Plik</label>
</div>
<div data-container-for="documentFile" class="k-edit-field">
<input name="files" id="files" type="file" aria-label="files" />
</div>
<input name="documentId" id="documentId" type="text" data-bind="value:documentId" style="display: none;" />
<div class="k-edit-label">
<label for="documentDateAdd">Data Dodania</label>
</div>
<div class="k-edit-field">
<input type="text" class="k-input k-textbox k-state-disabled" name="documentDateAdd" data-bind="value:documentDateAdd" disabled>
</div>
<div class="k-edit-label">
<label for="documentDesc">Opis</label>
</div>
<div data-container-for="documentDesc" class="k-edit-field">
<textarea name="documentDesc" class="k-textbox" data-bind="value:documentDesc"></textarea>
</div>
<div class="k-edit-label">
<label for="user">Twórca</label>
</div>
<div data-container-for="user" class="k-edit-field">
<input type="text" class="k-input k-textbox k-state-disabled" name="user" data-bind="value:user" disabled>
</div>
<div class="k-edit-label">
<label for="category">Kategoria</label>
</div>
<div data-container-for="category" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="category" data-bind="value:category">
</div>
<div class="k-edit-label">
<label for="subcategory">Podkategoria</label>
</div>
<div data-container-for="subcategory" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="subcategory" data-bind="value:subcategory">
</div>
<!-- dropdownlist-->
<div class="k-edit-label">
<label for="FacultyRankId">Kategoria</label>
</div>
<!-- dropdownlist editor for field: "FacultyRankId" -->
<div class="k-edit-field" id="categoriesDiv">
<input id="categoriesInput" name="id" data-bind="value:id" data-value-field="id" data-text-field="name" data-source="categoriesDS" data-role="dropdownlist" data-value-primitive="true" />
</div>
<button type="submit" class="k-button k-primary">Aktualizuj</button>
</form>
</script>
В привязке к шаблону MVVM необходимо указать, какое свойство вы хотите связать, используя data-bind
имущество.
<input id="categoriesInput" name="id"data-bind="value:category"data-value-field="id"data-text-field="name"data-source="categoriesDS"data-role="dropdownlist"data-value-primitive="true"/>
Других решений пока нет …