使用有條件禁用的控件進行內聯編輯

我正在使用Telerik Kendo UI網格。我已經配置它使用網格內聯編輯。我有一個有趣的要求。其中一列是複選框，它定義了某些控件是否可編輯。即當被打勾的列E，F，G是隻讀的而其他的是可編輯的。未選中的列B，C是可編輯的，而其他是隻讀的。使用有條件禁用的控件進行內聯編輯

我已經成功實現了這一點，但我想改進它。我已經實現了它，以便禁用控件。不過，如果控件更改爲顯示模式等標籤，我更喜歡。

function gridEdit(e) { 
      setRowStatus(e.container, e.model.IsCustomJob);   
     } 

    function setRowStatus(c, isSpecificSH) { 
      changeControlStatusNumeric(c, 'ColumnB', !IsCustomJob); 
      changeControlStatusNumeric(c, 'ColumnC', !IsCustomJob); 
      changeControlStatusNumeric(c, 'ColumnE', IsCustomJob); 
      changeControlStatusNumeric(c, 'ColumnF', IsCustomJob); 
      changeControlStatusDropDown(c, 'ColumnG', IsCustomJob); 
     } 

function changeControlStatusNumeric(c, name, isEnabled) { 
      var ctrl = c.find("input[name='" + name + "']").data("kendoNumericTextBox"); 
      ctrl.enable(isEnabled); 
      if (!isEnabled) { 
       ctrl.value(''); 
      } 
     }

我的執行問題作爲可以在下面看到的是，它不適合哪些項目是可編輯的，哪些項是不是用戶很清楚。這就是爲什麼我想將禁用的控件更改爲標籤或完全隱藏它們的原因。 Grid API中是否有用於實現這個功能......或者我應該使用jQuery來實現這個功能？

記號標出時： When Ticked

取消選中時： When Unticked

來源

2014-07-13 Joseph Caruana

我建議爲應，而不是編輯器被禁用，然後有條件地追加只讀內容列，例如創建自定義編輯器像這樣：

網：

$("#grid").kendoGrid({ 
    dataSource: dataSource, 
    pageable: true, 
    height: 430, 
    toolbar: ["create"], 
    columns: [{ 
     field: "ProductName", 
     title: "Product Name" 
    }, { 
     field: "Category", 
     title: "Category", 
     width: "160px", 
     editor: categoryDropDownEditor, 
     template: "#=Category.CategoryName#" 
    }, { 
     field: "UnitPrice", 
     title: "Unit Price", 
     format: "{0:c}", 
     width: "120px" 
    }, { 
     command: ["edit", "destroy"] 
    }], 
    editable: "inline" 
});

編輯：

function categoryDropDownEditor(container, options) { 
    // if model is set to disabled we don't show an editor 
    if (options.model.disabled) { 
     $("<span>" + options.model.get(options.field).CategoryName + "</span>").appendTo(container); 
     return; 
    }; 

    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>') 
     .appendTo(container) 
     .kendoDropDownList({ 
     autoBind: false, 
     dataSource: { 
      type: "odata", 
      transport: { 
       read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories" 
      } 
     } 
    }); 
}

您可以設置model.disabled屬性在changeControlStatusNumeric功能，或者，如果你不想在模型中的附加字段，您可以將CSS類添加到容器並在自定義編輯器中檢查它。

（demo）

來源

2014-07-13 18:35:22

謝謝你的詳細解答。不得不做一個自定義編輯器有點矯枉過正，但我想這是實現它的唯一方法。 –

使用有條件禁用的控件進行內聯編輯

回答

相關問題