2013-04-11 206 views
0

我将Kendo UI网格绑定到使用xml填充的数据源。Kendo UI Grid和组合列

它适用于我。

现在我想用'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" } 

        } 

我怎样才能使“标签'列?

任何帮助将不胜感激!

1)提供了一个 “行模板”,这是在这里证明:

回答

0

您可以通过以下两种方式之一进行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

+1

它也可以使用'schema.parse'来解决与合并'Tags'的内容创建_virtual_列。 – OnaBai 2013-04-11 20:06:00

+0

很想看到作为答案张贴的示例:) – 2013-04-12 11:52:25

+0

你在挑战我吗? :-)是因为它不可能或完整性问题? – OnaBai 2013-04-12 12:19:31

0

非常感谢Derik和OnaBai。

我知道该解决方案可以通过类型的剑道模板...但困难是实现这样的解决方案。

我的应用程序的真实代码有很多复杂性。

在上面的例子中,wi不仅会管理'tag'节点,还会管理属性等....

喜欢的东西:

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

如果这个片段在模式部件退回产品ID(产品的XML id属性):

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

...这将产品寄回文本(xml文本节点):

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

如何在模板中管理一个或多个返回的标记?

Tags: { field: 'product/tags' } 

我必须实现一个管理'tag'子节点数组的模板。

好的。

我发现这个解决方案:

模板定义为列:

//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 

} 

它的伟大工程! !

我希望这可以帮助其他朋友。

如果你想更好或者你mutch更容易的解决方案欢迎;-))