Kendo Grid：禁用行編輯

Question

我有一個可編輯的網格，並希望根據條件使某些行不可編輯。

任何人都可以請諮詢我該怎麼做。

謝謝

Answer 1

開箱即用，沒有允許控制每行版本的功能。當該行嘗試編輯時，您可以執行的是退出編輯。

有一個事件edit一旦一個單元格進入編輯模式，就會被觸發。你能做的就是一旦你發現你的條件是真的就關閉那個單元格。

例子：我們有如下定義schema網格：

schema : { 
    model: { 
     fields: { 
      Id  : { type: 'number' }, 
      FirstName: { type: 'string' }, 
      LastName : { type: 'string' }, 
      City  : { type: 'string' } 
     } 
    } 
} 

我們不希望讓行這City是Seattle版。該edit處理程序應定義爲：

var grid = $("#grid").kendoGrid({ 
    dataSource: ds, 
    editable : true, 
    edit  : function (e) { 
     // e.model contains the model corresponding to the row that is being edited. 
     var data = e.model; 
     if (data.City === "Seattle") { 
      // Close the cell (exit edition mode) 
      this.closeCell(); 
     } 
     e.preventDefault(); 
    }, 
    pageable : true, 
    columns : 
      [ 
       { field: "FirstName", width: 90, title: "First Name" }, 
       { field: "LastName", width: 90, title: "Last Name" }, 
       { field: "City", width: 100 } 
      ] 
}).data("kendoGrid"); 

的問題是電池後實際處於編輯模式，以便關閉可能會產生一些閃爍，但在大多數情況下，它應該工作edit處理函數。

第二個選項是定義網格爲不可編輯，並調用editCell如果手動條件爲真：

在這種情況下可以定義grid爲：

var grid = $("#grid").kendoGrid({ 
    dataSource: ds, 
    editable : false, 
    pageable : true, 
    columns : 
      [ 
       { field: "FirstName", width: 90, title: "First Name" }, 
       { field: "LastName", width: 90, title: "Last Name" }, 
       { field: "City", width: 100 } 
      ] 
}).data("kendoGrid"); 

，然後定義一個click處理器的單元格：

grid.tbody.on("click", "td", function (e) { 
    // Close any possible cell already in edit mode 
    grid.closeCell(); 
    // Find data corresponding to clicked cell 
    var data = grid.dataItem($(e.target).closest("tr")); 
    // Check condition 
    if (data.City !== "Seattle") { 
     // Enter edition mode 
     grid.editCell(e.target); 
    } 
}); 

我在哪裏檢索data爲row對應於所點擊的表格單元以及對條件的檢查。如果條件匹配，然後我打開單元格。

儘管這沒有閃爍，但它並不是我的首選，因爲您需要小心地觸發save以保存單元格，儘管您說網格不可編輯，但您正在編輯它。

運行第一個實現此例如：http://jsfiddle.net/OnaBai/NWw7T/ 和第二的位置：http://jsfiddle.net/OnaBai/NWw7T/1/

對於除「盒內」最簡單的實現相同功能創建一個自定義的編輯按鈕，如果控制的其他版本模式一排應該或不應該進入編輯模式。

Answer 2

對我來說，我想阻止用戶在嘗試添加新行時雙擊其他行。舉個例子，這個代碼：

var IDS = { 
    myGrid: "#my-grid", 

    addRowBtn: "#add-btn", 
    deleteRowBtn: "#delete-btn", 
    saveRowBtn: "#save-btn", 
    cancelRowBtn: "#cancel-btn", 
}; 

var Grids = { 
    MyGrid: null, 
    //... 
}; 

然後在初始化函數創建一個事件處理程序的響應雙擊事件：

function initMyGrid() { 
    $(IDS.myGrid).kendoGrid({ 
     selectable: true, 
     scrolable: true, 
     sortable: false, 
     columns: [ 
      { field: "FirstName", title: "First Name", width: "20%", attributes: { tabindex: "1" } }, 
      { field: "LastName", title: "Last Name", width: "60%", attributes: { tabindex: "2" } } 
     ] 
    }); 
    //... 
    Grids.MyGrid = $(IDS.myGrid).data('kendoGrid'); 

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) { 
     Grids.MyGrid.editCell($(this)); 
    }); 
} 

然後我創建了PageState值測試：

var PageState = { 
    // ... 
    AddingRow: false 
}; 

因此，當用戶點擊一個按鈕來添加一個新行，我阻止他們點擊編輯任何其他行：

function addNewRow() { 
    PageState.AddingRow = true; 

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) { 
     if (PageState.Selected.RowId != null && PageState.Selected.RowId != "") { 
      Grids.RulesGrid.closeCell(); 
     } 
    }); 
    // ... 
} 

而且，只要用戶保存行或抵消增加一個新行的，我重新啓用雙擊事件：

function saveRow() { 
    PageState.AddingRow = false; 

    // Allow user to edit other records now 
    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) { 
     Grids.MyGrid.editCell($(this)); 
    }); 
    // ... 
} 

HTH。