从表中初始化Kendo UI网格 - 如何验证?

时间:2014-11-12 17:03:53

标签: javascript validation kendo-ui kendo-grid

我正在测试Kendo UI网格,当我从现有表初始化网格时,我很难找到通过API验证我的更新的方法。 所有CRUD都按预期工作,我无法在提交之前在客户端进行验证。

在这种情况下,是否有内置的方法来进行验证? (这里的数据完全是任意的)

非常感谢正确方向的手指点。

我的javascript:

    $('table.data-table').kendoGrid(
    {
        toolbar: ["create"],
        editable: 'popup',
        sortable: true,
        pageable: { pageSize: 10, pageSizes: true },
        filterable: true,
        columnMenu: true,
        columns: [
            { field: "ID", title: "ID" },
            { field: "name", title: "Name" },
            { field: "capital", title: "Capital City" },
            { field: "largest_city", title: "Largest City" },
            { field: "population", title: "Population" },
            { command: ["edit", "destroy"], title: ' ' }
        ],
        save: myUpdateFunction,
        remove: myRemoveFunction
    });

我的HTML:

<table class="data-table">    
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Capital</th>
                <th>Largest City</th>
                <th>Population</th>
                <th></th>
            </tr>
        </thead>
        <tbody>        
        <tr>
            <td>AK</td>
            <td>ALASKA</td>
            <td>Juneau</td>
            <td>Anchorage</td>
            <td>698473</td>
            <td></td>
        </tr>
         ....
         </tbody>
  </table>

1 个答案:

答案 0 :(得分:0)

实际上,事实证明这很容易。通过自定义编辑器模板,您可以添加所需的属性。因此,在列中为编辑器属性添加函数名称

    columns: [
        { field: "ID", title: "ID", editor: requiredField },
        { field: "name", title: "Name", editor: requiredField },
        { field: "capital", title: "Capital City" },
        { field: "largest_city", title: "Largest City" },
        { field: "population", title: "Population" },
        { command: ["edit", "destroy"], title: '&nbsp;' }
    ],

在函数内部,您可以根据需要格式化/自定义输入。在我的例子中,关键是添加必需的属性。

function requiredField(container, options) {
    var theInput = '<input class="k-input k-textbox" name="' + options.field + '" required data-     bind="value: ' + options.field + '" />';
    $(theInput).appendTo(container);
}