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>

我试图绑定到命令，但它不喜欢它。我可以很容易地在这一行中有一个datapicker，但是我想要只有文本，然后点击一个编辑按钮，或者在创建模板之前，只需点击一行即可开始编辑。这里仅供参考，是带网格的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只是一个自定义数据选择器，需要来自db的奇怪格式化日期。

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

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>

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

参见示例http://jsbin.com/soqet/1/edit

如何在KendoUI中为网格模板中创建编辑按钮？

1 个答案: