如何觸發按鈕單擊事件編輯Telerik網格中的行

Question

我正在使用兩個彼此相鄰的Telerik網格，並且它們都是同步的，即第一個網格的第一列對應於並與第一列相關在第二個網格中。現在我們在兩個網格中都有一個編輯/刪除的列（類似於這個http://demos.telerik.com/aspnet-mvc/grid/buttontext），這樣所有的行都有按鈕，如鏈接所示。現在，我想要的是因爲兩個網格都是同步的，我只想在其中一個網格中具有編輯/刪除列。因此，嘗試使用以下方法：

a）我嘗試在JQuery中爲Edit或Delete按鈕的單擊事件創建按鈕單擊事件，然後通過此函數編輯第二個網格。但是，我甚至不能找到編輯選擇標記/刪除按鈕

$("#FirstGridMainInput .t-grid-content .t-button").click(function() { 
      // code to edit the corresponding row in the second grid 
     }); 

b）接着，很多搜索後，我發現打電話通過觸發OnEdit功能的另一種方法。

  .ClientEvents(e => e.OnRowDataBound("function_to_edit_row")) 

但是，這種方法的問題是，當我呼叫「clientevent」時，Telerik Grids的數據綁定功能不起作用。請幫忙。 P.S：我正在使用ASP.NET MVC。

Answer 1

有editRow和UpdateRow函數可以在網格對象上調用。這應該讓你開始正確的軌道：

在這個例子中，我創建了兩個相同的網格，稱爲客戶端1和客戶端2與clientId是關鍵。編輯按鈕僅存在於Clients1網格上。

<script type="text/javascript"> 

    //Finds the row to edit on Clients2 grid based on the cached ClientId. 
    //Passes this row to the editRow function. 
    function editRow() { 
     $('#Clients2').data('tGrid').editRow($($('#Clients2 table tr').find("td:contains(" +lastEditedClientId + ")").parent())) 
    } 

    //Finds the row to save on Clients2 grid based on the cached ClientId. 
    //Passes this row to the updateRow function. 
    function saveRow() { 
     $('#Clients2').data('tGrid').updateRow($($('#Clients2 table tr').find("td:contains(" + lastEditedClientId + ")").parent())) 
    } 


    var lastEditedClientId = -1; 
    //Attached to the Clients1 grid, onSave event 
    function onSave(e) { 
     lastEditedClientId = e.dataItem.ClientId; //Cache the primary key of the Clients1 grid 
    } 

</script> 

附加事件到相應的按鈕

<button id="editButton" onclick="editRow()">Edit Grid 2</button> 
<button id="saveButton" onclick="saveRow()">Save Grid 2</button> 

Clients1網格首先需要編輯，否則lastEditedClientId將不被設置。

@(Html.Telerik().Grid<Client>() 
    .Name("Clients1") 
    .Columns(columns => 
    { 
     columns.Bound(o => o.ClientId); 
     columns.Bound(o => o.FirstName); 
     columns.Bound(o => o.LastName); 
     columns.Bound(o => o.City); 
     columns.Command(commands => 
     { 
      commands.Edit(); 
     }).Width(200); 
    }) 
    .DataKeys(keys => keys.Add(c => c.ClientId)) 
    .DataBinding(db1 => db1.Ajax().Select("_Index", "Home").Update("_Update", "Home")) 
    .ClientEvents(e => e.OnSave("onSave")) 
    .Pageable() 
    .Sortable() 
    .Filterable() 
) 

@(Html.Telerik().Grid<Client>() 
    .Name("Clients2") 
    .Columns(columns => 
    { 
     columns.Bound(o => o.ClientId).ReadOnly(true); 
     columns.Bound(o => o.FirstName); 
     columns.Bound(o => o.LastName); 
     columns.Bound(o => o.City); 
     columns.Command(commands => 
     { 
      commands.Edit(); 
     }).Width(200).Visible(false); //Important to have the edit button column, otherwise the editRow() function doesn't work. Set it to be invisible. 
    }) 
    .DataKeys(keys => keys.Add(c => c.ClientId)) 
    .DataBinding(db1 => db1.Ajax().Select("_Index", "Home").Update("_Update", "Home")) 
    .Pageable() 
    .Sortable() 
    .Filterable() 
) 

當然這需要大量的錯誤處理。