【问题标题】:Disable editing in kendo grid禁用剑道网格中的编辑
【发布时间】:2013-01-02 09:37:48
【问题描述】:

我正在尝试根据条件将可编辑网格设置为不可编辑。

我已经在 jquery 中尝试过如下

var $grid = &("#gridName").data("kendogrid");
Var model = $grid.datasource.at(1);
if(model)
  model.field["cell"].editable = false;

但是这里的“模型”是不确定的。

还尝试了 $grid.data() 然后循环遍历网格,但单元格并没有变得不可编辑,它们仍然是可编辑的。

谁能告诉我如何才能完成这项工作。

【问题讨论】:

  • 正在尝试启用/禁用编辑整个表格还是仅编辑某些字段?

标签: jquery asp.net-mvc razor kendo-ui


【解决方案1】:

你有一些印刷错误......

试试这个:

var $grid = $("#gridName").data("kendoGrid");
var model = $grid.dataSource.at(1);
if (model)
    model.fields["cell"].editable = false;
  1. 第 1 行。在 data 中是 kendoGrid 而不是 kendogrid。
  2. 第 2 行。在 model 中是 var 而不是 Var
  3. 第 4 行。它是 fields 而不是 field

编辑:如果您想将"cell" 列更改为不可编辑,只需执行以下操作:

var $grid = $("#gridName").data("kendoGrid");
$grid.dataSource.at(0).fields["cell"].editable = false;

您只需将其更改为一行,因为模型由网格中的所有行共享。

查看它在 JSFiddle 中运行http://jsfiddle.net/OnaBai/GuyPa/

【讨论】:

  • 修改了行,还是有问题。
  • @OnaBai 嘿伙计,如果我只想更改特定行中特定列上的可编辑值和validation.min 怎么办?假设第 1 行中某列的最小值为 3,而第 2 行中同一列的最小值为 1 之类的......
  • @OnaBai 似乎如果我这样做 $grid.dataSource.at(idx).fields.MyField.validation.min = SomeDynamicMinValue;那么 someDynamicMinValue 无论如何都会为整列设置,而不仅仅是一行......嗯嗯嗯不确定这是否可能。
  • 对,字段引用model即列的定义。
  • 所以,我们不能使特定行的单元格不可编辑,或者有什么办法可以做到这一点?
【解决方案2】:

禁用单元格编辑:

 var len = $("#gridName").find("tbody tr").length;
    for(var i=0;i<=len ; i++)
    {
        var model = $("#gridName").data("kendoGrid").dataSource.at(i);
        if (model) {//field names
            model.fields["DueDateStr"].editable = false;
            model.fields["TotalAmount"].editable = false;
            model.fields["IsPercentage"].editable = false;
        }

    }

禁用模板中的复选框控件:

$.map($("#gridName").find("input:checkbox"),
        function (item) {
            $(item).attr('disabled', 'disabled');
        }
    );

删除命令按钮,如删除按钮:

 var rows = $('#gridName tbody tr');
    $.map(rows, function (row) {
        //cell buttons index
        row.cells[4].innerHTML = "";

    });

隐藏工具栏网格:

$("#gridName .k-grid-toolbar").hide();

【讨论】:

    【解决方案3】:

    如果您使用“incell”编辑模式,网格有一个“edit”事件,您可以使用它来立即关闭单元格。

    $("#grid").kendoGrid({
    
      ...
    
      edit: function(e) {
          if ( ... ) {
              this.closeCell();
          }
      }
    
      ...
    
    });
    

    更强大的方法是继承 kendoGrid 并覆盖 editCell 和/或 editRow 方法。然后你可以做任何你想做的事。 Look here 获取有关 kendo 小部件子类化的信息。

    【讨论】:

    • 这行得通,但如果你有一个编辑器,比如下拉菜单,你可能会在打开它然后关闭它时注意到一个闪烁。相反,您可以使用beforeEdit 事件和e.preventDefault(),这样单元格就不会首先打开。
    【解决方案4】:

    for(i=0;i<=$("#grid").find("tbody tr").length ; i++)
    { 
      var model = $("#grid").data("kendoGrid").dataSource.at(i);
      if(model)
      {
          model.fields[$("#grid").data("kendoGrid").columns[i].field].editable = false;    
      }
    }

    http://jsfiddle.net/parthiv89/qwtyLmhk/

    我希望这很好用..如果有效,请不要忘记投票给我..

    【讨论】:

      【解决方案5】:

      问题已解决。

      var $grid = &("#gridName").data("kendoGrid");
      var len= &("#gridName").data("kendoGrid tbody tr").length();
      for(i=0;i<=len ; i++)
      {
      var model = $grid.datasource.at(i);
      if(model)
        model.fields["cell"].editable = false;
      }
      

      【讨论】:

      • 您最初的问题是“谁能告诉我我做错了什么。”我告诉过你。同样,您也有语法错误。你真的试过你的代码吗?你能把它放在 JSFiddle 上并显示它正在运行吗?如果您想查看如何将列转换为不可编辑,请查看我在上一个答案中的 EDIT。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-04-29
      • 2012-02-14
      • 1970-01-01
      • 1970-01-01
      • 2015-03-03
      相关资源
      最近更新 更多