如何在 KendoUI 中的网格模板中制作编辑按钮？

Question

我的基本问题是“如何在模板中创建一个按钮以在 KendoGrid 中打开编辑模式？” 我有以下 kendoui 模板：

  <script id="serviceGridRowTemplate" type="text/x-kendo-template">
            <tr>
                <td><span data-bind="text: sequence"></span></td>
                <td><span data-bind="text: service"></span></td>
                 <td><input data-role="datepicker" data-bind="xpressdate: from_date"/></td>
                @*<td><span data-bind="xpressdate: from_date" data-dateformat="MM/dd/yyyy"></span></td>*@
                <td><span data-bind="xpressdate: to_date" data-dateformat="MM/dd/yyyy"></span></td>
                <td><span data-bind="text: provider"></span></td>
                <td><span data-bind="text: name"></span></td>
                <td><span data-bind="text: status" ></span></td>
                <td><span data-bind="text: deny_cd" ></span></td>
                <td><span data-bind="xpressdate: add_date" data-dateformat="MM/dd/yyyy"></span></td>
                <td><span data-bind="text: add_init" ></span></td>
                <td><span data-bind="xpressdate: change_date" data-dateformat="MM/dd/yyyy"></span></td>
                <td><span data-bind="text: change_init" ></span></td>
                    <td><button >Turn on Edit</button></td>


            </tr>

我尝试绑定到一个命令，但它不喜欢它。我可以轻松地在这一行中拥有一个数据选择器，但我只想拥有文本，然后单击编辑按钮，或者像在创建模板之前一样，只需单击一行即可开始编辑。 这里仅供参考的是带有网格的div。

 <div data-role="grid"
                     data-bind="source: referralData.Services"
                     data-scrollable="true"
                     data-row-template="serviceGridRowTemplate"
                     data-editable="{mode:'inline',template:serviceEditTemplate}"
                     data-resizable="true"
                     data-toolbar="['create', 'Print']"
                     data-columns="[
                                     { 'field': 'sequence', 'width': 70, 'title': 'Sequence #' },
                                     { 'field': 'service',width:70,title:'Service' },
                                     { 'field': 'from_date', 'width': 70, 'title': 'Effective Date' },
                                     { 'field': 'to_date', 'width': 70, 'title': 'End Date' },
                                     { field:'provider','title': 'Provider',width:70 },
                                     { 'field': 'name', 'title': 'Provider Name' },
                                     { 'field': 'status', 'width': 180, 'title': 'Service Status Code' },
                                     { 'field': 'deny_cd', 'width': 180, 'title': 'Service Reason Code' },
                                     { 'field': 'add_date', 'width': 70, 'title': 'Add Date' },
                                     { 'field': 'add_init', 'width': 70, 'title': 'Added By' },
                                     { 'field': 'change_date', 'width': 70, 'title': 'Modified Date' },
                                     { 'field': 'change_init', 'width': 80, 'title': 'Modified By' },
                    { command: 'edit' }
                                  ]"

                     style="width:100%; height:auto"></div>

最后一点，xpressdate 只是一个自定义数据选择器，用于来自数据库的奇怪格式日期。

任何人都知道一个例子或如何做到这一点？

Answer 1

只是一些小事。首先，在 rowTemplate 的 tr 上包含 data-uid="#=uid#"。

<tr data-uid="#= uid #">

然后在 rowTemplate 中，将其添加为编辑按钮

<td><a class="k-button k-button-icontext k-grid-edit" href="\#"><span class="k-icon k-edit"></span>Edit</a></td>

这应该包括一个完全剑道网格样式的编辑按钮，该按钮应该将该特定网格行切换到编辑模式。

查看示例http://jsbin.com/soqet/1/edit