Kendo UI Grid и составленная колонка

Question

Я связываю сетку пользовательского интерфейса Kendo с источником данных, заполненным xml.

Это работает для меня.

Теперь я хочу укупить ячейку каждой строки с «n» несколькими значениями, разделенными запятыми, вложенного узла.

Пример XML-файла:

<product id="1"> 
Microsoft Office 
<tags><tag>microsoft</tag></tags> 
</product> 
<product id="1"> 
Ububtu Linux 
<tags><tag>Canonical</tag><tag>OS</tag><tag>Open Source</tag></tags> 
</product> 
<product id="1"> 
    Windows 8 
    <tags><tag>microsoft</tag><tag>OS</tag></tags> 
</product> 
</product> 

Результат я хочу:

ID  Product    Tags 

1  Microsoft Office  microsoft 
2  Ubuntu Linux   canonical, OS, Open Source 
3  Windows 8   microsoft, OS 

Для первых 2-х колонок нет никаких проблем:

$("#grid").kendoGrid({ 
     dataSource: { 
      type: "xml", 
      transport: { 
       read: { url: 'some_remote_xml', 
        dataType: "xml" 
       } 
      }, 
      schema: { 
       type: "xml", 
       model: { 
        fields: { 
         id: { field: 'product/@id', type: "number" }, 
         Product: { field: 'product/text()', type: "string" } 

        } 

Как я могу оказать «Теги колонка ??

Любая помощь будет оценена!

Answer 1

Вы можете сделать это одним из двух способов:

1) обеспечивают "шаблон строки", который демонстрируется здесь: http://demos.kendoui.com/web/grid/rowtemplate.html

Или

2) Вы можете использовать пользовательские template для настроек столбца в сетке.

Для настраиваемого шаблона вам необходимо указать все ваши столбцы, которые вы хотите в сетке, а затем указать параметр template для столбца, который должен отображать пользовательскую информацию.

Самый простой способ сделать это - установить template функции, которая принимает текущую строку данных в качестве параметра. Тогда вы можете .join теги с , и вернуть это.

$("#grid").kendoGrid({ 
    dataSource: { 
    // ... your data source here 
    }, 

    columns: [ 
    {field: "id", title: "Product ID"}, 
    {field: "product", title: "Product Name"}, 
    { 
     title: "Tags", 
     template: function(dataRow){ 
     return dataRow.tags.join(", "); 
     } 
    ] 
});  

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

Вы можете прочитать о шаблонах столбцов здесь: http://docs.kendoui.com/api/web/grid#configuration-columns.template

Answer 2

Большое спасибо Derik и OnaBai.

Я знаю, что решение может перейти от типа шаблона Kendo ... но сложность заключалась в том, чтобы реализовать такое решение.

Настоящий код моего приложения имеет большую сложность.

В приведенном выше примере wi будет управлять не только узлом «тег», но и атрибутами и т. Д.

Что-то вроде:

<tags> 
    <tag id="1">First tag</tag> 
    <tag id="2">Second tag</tag> 
    ... 
    </tags> 

Если этот фрагмент в схеме части возвращает идентификатор продукта (атрибут XML идентификатор продукта):

id: { field: 'product/@id', type: "number" } 

... и это возвращение продукт text (текстовый узел xml):

Product: { field: 'product/text()', type: "string" } 

Как я могу управлять шаблоном, возвращаемым одним или несколькими тегами?

Tags: { field: 'product/tags' } 

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

Хорошо.

Я нашел решение: определение

Шаблон для столбца:

//pass the 'Tags' array to a javascript function 
template: '#= myfunction(Tags) #' 

... а затем глобальный Javascript функция:

function myfunction(e) { 
var result = ''; 

//iteration on the 'tags' array 
for (var i = 0; i < e.length ; i++) { 
    result += '<a href="' + e[i]["@id"] + '">' + e[i]["#text"] + '</a>'; 

} 
return result; // now in the tags column of the grid we have the 'tags/tag' xml section of each product, rendered as html anchor 

} 

Он отлично работает !! !

Я надеюсь, что это поможет другим друзьям.

Если вы думаете, лучше или чепчик проще решения вы приветствуются ;-))