如何在Kendo UI中动态绑定列定义

时间:2014-06-03 08:41:25

标签: javascript kendo-ui kendo-grid

我需要在kendoui上对网格的列字段进行动态绑定。

<table    id="checkout-grid"
                class="k-grid"
                data-role="grid"
                data-bind="source: items"
                data-row-template="checkout-form-item-template"
                data-scrollable="false"
                data-columns="[
                        { title: 'Name', width: '300px'},
                        'Description',
                        { title: 'Price', width: '50px' },
                        { title: 'Quantity', width: '50px' },
                        { title: 'Total', width: '100px' }
                    ]">
        </table>

问题是我需要在不同语言上设置列的标题。

如何在不使用javascript kendoGrid方法的情况下对该定义进行绑定。

我尝试绑定viewmodel中的data-colums值,但它会抛出一个不支持的绑定异常,即使使用attr值。

如何执行该字段的动态绑定?。

1 个答案:

答案 0 :(得分:0)

首先,我发现您的Grid定义存在问题,您说的是title,而不是field

回答您的问题,并且知道您不想动态生成columns.definition,我建议您将其定义为:

<table id="checkout-grid"
    class="k-grid"
    data-role="grid"
    data-bind="source: items"
    data-scrollable="false"
    data-columns="[
        { field: 'Name', width: '300px'},
        'Description',
        { field: 'Price', width: '50px' },
        { field: 'Quantity', width: '50px' },
        { field: 'Total', width: '100px' }
        ]">
    <thead>
        <td>Nombre</td>
        <td>Descripción</td>
        <td>Precio</td>
        <td>Cantidad</td>
        <td>Total</td>
    </thead>
</table>

即,使用本地化添加thead定义。但很明显,如果你的服务器可以做到这一点,也可以产生类似的东西:

<table id="checkout-grid"
    class="k-grid"
    data-role="grid"
    data-bind="source: items"
    data-scrollable="false"
    data-columns="[
        { field: 'Name', title: 'Nombre', width: '300px'},
        { field: 'Description', title: 'Descripción' },
        { field: 'Price', width: '50px', title: 'Precio' },
        { field: 'Quantity', width: '50px', title: 'Cantidad' },
        { field: 'Total', width: '100px', title: 'Total' }
    ]"
>