2014-01-23 108 views
1

我有一個應用程序,我確實有一個KendoGrid,其中有2列存在。在第一列中,我正在追加一個基於條件的標籤現在我想爲每行禁用此列。我正在使用Incell Editing編輯列的數據,所以當我通過InCell編輯單擊到第一列時,編輯KendoGrid時,它必須禁用,不能編輯。 在這裏,我爲下面的代碼:禁用Kendo Grid的一列

@(Html.Kendo().Grid(Model) 
      .Name("Remark") 
      .TableHtmlAttributes(new { style = "height:20px; " }) 
      .Columns(columns => 
      { 
       columns.Bound(p => p.RemarkID).Hidden(true).ClientTemplate("#= RemarkID#" + "<input type='hidden' class='RemarkID' value='#=RemarkID#' />"); 
       //columns.Bound(p => p.RemarkCode).Title("Remark Code").Width(3).ClientTemplate("#= RemarkCode#" + "<input type='hidden' class='RemarkCode' value='#=RemarkCode#' />"); 
       columns.Bound(p => p.RemarkDescription).Title("Type").Width(10).ClientTemplate("#= RemarkDescription#" + "<input type='hidden' class='RemarkDescription' value='#=RemarkDescription#' />"); 
       columns.Bound(p => p.Remark).Title("Remark").Width(50).ClientTemplate("#= Remark#" + "<input type='hidden' class='Remark' value='#=Remark#' />"); 

      }) 
      .Editable(editable => editable.Mode(GridEditMode.InCell)) 

      .Navigatable() 
      .Sortable() 
      .Scrollable(scr => scr.Height(200)) 
      .Scrollable() 
      .DataSource(dataSource => dataSource 
       .Ajax() 
       .Batch(true) 
       .ServerOperation(false) 
       .Events(events => events.Error("error_handler")) 
         .Model(model => 

        model.Id(p => p.RemarkID) 

       ) 
       .Create("Editing_Create", "Grid") 
       .Read("Remark_Read", "Document") 
       .Update("Editing_Update", "Grid") 
       .Destroy("Editing_Destroy", "Grid") 
       ) 
     ) 

$(".AddNewRemark").click(function() { 
      //grid.addRow(); 
      var dataSource = grid.dataSource; 
      var total = dataSource.data().length; 
      dataSource.insert(total, {}); 
      dataSource.page(dataSource.totalPages()); 
      grid.editRow(grid.tbody.children().last()); 

      var it = $(this).text().trim(); 
      $("#RemarkDescription").val(it); 

      $("#RemarkDescription").attr('readonly', 'readonly'); 
      grid.dataSource._data[total].RemarkDescription = it; 



      for(var i=0;i<=total;i++){ 

       grid.dataSource.at(i).fields["RemarkDescription"].editable=false; 


      } 


     }); 

回答

3

試試這個, 這只是一個例子,

 <script> 
      $(document).ready(function() { 
       var crudServiceBaseUrl = "http://demos.kendoui.com/service", 
        dataSource = new kendo.data.DataSource({ 
         transport: { 
          read: { 
           url: crudServiceBaseUrl + "/Products", 
           dataType: "jsonp" 
          }, 
          update: { 
           url: crudServiceBaseUrl + "/Products/Update", 
           dataType: "jsonp" 
          }, 
          destroy: { 
           url: crudServiceBaseUrl + "/Products/Destroy", 
           dataType: "jsonp" 
          }, 
          create: { 
           url: crudServiceBaseUrl + "/Products/Create", 
           dataType: "jsonp" 
          }, 
          parameterMap: function(options, operation) { 
           if (operation !== "read" && options.models) { 
            return {models: kendo.stringify(options.models)}; 
           } 
          } 
         }, 
         batch: true, 
         pageSize: 20, 
         schema: { 
          model: { 
           id: "ProductID", 
           fields: { 
            ProductID: { editable: false, nullable: true }, 
            ProductName: { validation: { required: true },editable: false, }, 
            UnitPrice: { type: "number", validation: { required: true, min: 1} }, 
            Discontinued: { type: "boolean" }, 
            UnitsInStock: { type: "number", validation: { min: 0, required: true } } 
           } 
          } 
         } 
        }); 

       $("#grid").kendoGrid({ 
        dataSource: dataSource, 
        navigatable: true, 
        pageable: true, 
        height: 430, 
        toolbar: ["create", "save", "cancel"], 
        columns: [ 
         "ProductName", 
         { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 }, 
         { field: "UnitsInStock", title: "Units In Stock", width: 110 }, 
         { field: "Discontinued", width: 110 }, 
         { command: "destroy", title: "&nbsp;", width: 90 }], 
        editable: true 
       }); 
      }); 
     </script> 
    </div> 

如果你想Disable一列漾編輯網格,然後使用editable: false爲該欄。

如果您爲網格列使用editable: false屬性,並且想要在該網格中添加新項目,則第一列應始終爲Disabled。而我不知道ans的Razor語法。

0

在要禁用的特定列的模式聲明中,將其編輯爲false。