Пользовательский интерфейс Kendo получает данные из источника данных с использованием внешнего ключа - PullRequest
Новая
       16

Пользовательский интерфейс Kendo получает данные из источника данных с использованием внешнего ключа

0 голосов
/ 13 марта 2019

Приветствую всех,

Предположим, у меня была сетка , как это . Но в columns>field values: categories я хочу получить данные из источника данных (ниже) и отобразить в выпадающем списке. Как добиться этого метода? 

var categories = new kendo.data.DataSource({
transport: {
    read: {
        url: "./getCategories.php",
        type: "POST"
    }
},
});

и вывод будет таким 

[{"categoriesID":"92","categoriesName":"BOOKING"},
{"categoriesID":"1","categoriesName":"SYSTEM"},
{"categoriesID":"57","categoriesName":"SYSTEM1"},
{"categoriesID":"2","categoriesName":"SYSTEM2"},
{"categoriesID":"55","categoriesName":"TEST"},
{"categoriesID":"56","categoriesName":"TRY"}]

p / s: в моем столбце категории будет отображаться categoryID, но я хочу, чтобы отображался categoryName

1 Ответ

1 голос
/ 13 марта 2019

Полагаю, вы спрашиваете о шаблоне редактора.Если вы хотите использовать пользовательский элемент управления вместо редактора по умолчанию, который предлагает сетка, вы должны использовать свойство editor столбца .Шаблоны редактора отобразят значение обратно в вашу модель. Идентификатор категории.

Также вам следует использовать шаблон клиента свойство столбца, если вы хотите, чтобы в столбце отображалось какое-то другое значение, отличное от указанного.это сопоставлено с.В вашем случае столбец сетки сопоставляется с идентификатором категории, но вы хотите показать имя категории.

<div id="grid"></div>
<script>

var ProductDataSrc = [
{"ProductID":"3" , "categoriesID":"56","categoriesName":"TRY"},
{"ProductID":"6" , "categoriesID":"55","categoriesName":"TEST"},
{"ProductID":"2" , "categoriesID":"92","categoriesName":"BOOKING"},
{"ProductID":"62" , "categoriesID":"1","categoriesName":"SYSTEM"},
{"ProductID":"23" , "categoriesID":"2","categoriesName":"SYSTEM2"},
{"ProductID":"12" , "categoriesID":"57","categoriesName":"SYSTEM1"} ];


var categoryDataSrc = [
{"categoriesID":"92","categoriesName":"BOOKING"},
{"categoriesID":"1","categoriesName":"SYSTEM"},
{"categoriesID":"57","categoriesName":"SYSTEM1"},
{"categoriesID":"2","categoriesName":"SYSTEM2"},
{"categoriesID":"55","categoriesName":"TEST"},
{"categoriesID":"56","categoriesName":"TRY"}];


$("#grid").kendoGrid({
  columns: [ {
    field: "categoriesID", title:"Category",
    template: "<strong>#: categoriesName # </strong>",
    editor: function(container, options) {
     var input = $("<input/>");
     input.attr("name", options.field);
     input.appendTo(container);
     input.kendoDropDownList({
       dataValueField:  "categoriesID",
       dataTextField: "categoriesName",
       dataSource: categoryDataSrc
     });
    }  
  },
  { command: ["edit", "destroy"] }],
  dataSource: ProductDataSrc,
  editable: "inline"
});
</script>
...