如何在KendoUI的網格模板中製作編輯按鈕？

我的基本問題是'如何在模板中創建一個按鈕來打開KendoGrid中的編輯模式？' 我有以下kendoui模板：如何在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只是一個自定義的數據選擇器，它需要來自db的怪異格式化日期。

任何人都知道一個例子或如何做到這一點？

來源

2014-02-17 done_merson

只是一些小事情。首先，在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>

這應該包括完全劍術網格樣式編輯按鈕應該特定gridrow切換到編輯模式。

查看樣品http://jsbin.com/soqet/1/edit

來源

2014-02-18 00:20:42

這解決了我的問題，所以我將其標記爲答案。但是，你知道現在需要做什麼才能使更新按鈕有效嗎？ –

我認爲主要的問題是，當你使用內聯編輯時，它不使用editTemplate。我可以爲測試添加一些簡單的字符，並且它們不會在內聯編輯中顯示，而是在彈出編輯時顯示。所以有一些事情正在發生。 –

如何在KendoUI的網格模板中製作編輯按鈕？

回答

相關問題