根据网格中的下拉选择将 kendo 单元格设为只读

Question

我有一个 kendo 网格，其中一列中有一个下拉列表。基于下拉列表 selection，我希望能够禁用或启用其他列。我怎样才能做到这一点？我尝试了一些例子，但我无法得到任何结果。网格中的下拉列表具有三个选项 - 内部、外部和两者。在 selecting Internal 上，我希望启用带有内部金额的列，对于其他选项也是如此。每个单元格都有一个下拉列表，基于 selection，我希望根据 DDL 中的 selected 选项禁用和启用其他内部数量单元格和外部数量。

代码：

     @(Html.Kendo().Grid(Model.StaggingInternal)
        .Name("StaggingGridTest")
        .Columns(columns =>
        {
            columns.Bound(p => p.RowID).Title("StaggingRowID").Width(130).Hidden();
            columns.Bound(p => p.EnterText1).Title("Description").Width(130) ;
            columns.Bound(p => p.Dateoftransaction).Title("Date").Width(130).Format("{0:d}").Width(130); 
            columns.ForeignKey(p => p.ExceptionsCategoryID, (System.Collections.IEnumerable)ViewData["categories"], "ExceptionsCategoryID", "ExceptionsCategory")
               .Title("Category").Width(130);
            columns.Bound(p => p.InternalLocalAmount).Title("InternalAmt").Width(130);
            columns.Bound(p => p.ExternalLocalAmount).Title("ExternalAmt").Width(130);

            //columns.Command(command => command.destroy()).Width(130);

        })
              .ToolBar(toolbar =>
                    {

                        toolbar.Create().HtmlAttributes(new { id = "customCommand" }); // The "create" command adds new data items.
                        toolbar.Save().HtmlAttributes(new { id = "saveCommand" });// The "save" command saves the changed data items.

                    })
            .Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode.
            .HtmlAttributes(new { style = "height: 550px;" })



        .Pageable(pageable => pageable
        .Input(true)
        .Numeric(false)
        )
               .Reorderable(r => r.Columns(true))
                 .Sortable()
                 .ColumnMenu()
                 .Scrollable(scr => scr.Height(430))
                 .Filterable()
                  .Navigatable()
        .DataSource(dataSource => dataSource
        .Ajax()

        .PageSize(20)
        .ServerOperation(false)


                     .Batch(true) // Enable batch updates.
                               .Model(model =>
                                    {
                                        model.Id(p => p.RowID); // Specify the property which is the unique identifier of the model.
                                        model.Field(p => p.RowID).Editable(false); 
                                        model.Field(p => p.ExceptionsCategoryID).DefaultValue(1);
                                        model.Field(p => p.Category).Editable(true);

                                    })



                  .Update("Editing_Update", "MultiTab")
                  .Create("Editing_Create", "MultiTab")

                   )

        )
//.Events(e=>e.onEdit) //gives a side effect, when I include this and click on Add new row, instead of adding a new row in the grid, it opens the grid in a new page. It's a weird side effect i think.

<script>
 $(document).ready(function () {

        var gridOutput = $("#StaggingCashExceptionsGridTest").data("kendoGrid");

        //gridOutput.bind("beforeEdit", onEdit.bind(gridOutput));

        function onEdit(e) {
            e.container.find("input[name='Name']").each(function () { $(this).attr("disabled", "disabled") }); // this doesn't work, was just trying something based on the link that i found
        }
</script>

任何想法都会很有帮助。我附上了一张网格图片，以显示我到底想要什么。

类别是下拉列表，当我select在内部时，外部金额不应该是可编辑的，只有内部金额应该是可编辑的。每一行都应该这样做。

Answer 1

您的方向是正确的，但有一些问题需要解决。

首先，您似乎错误地分配了编辑事件处理程序。取消注释并将其更改为：

.Events(e => e.Edit("onEdit"))

移动事件处理程序，使其 在网格小部件 声明之前并且也在文档 ready 事件之外。改成这样：

<script>

            function onEdit(e) {
                    // Check to see if the current value of Category is 'On Internal'
                    if(e.model.Category=="On Internal"){
                        // Disable the ExternalAmt text box
                        e.container.find("input[name='ExternalAmt']").each(function ()
                          {
                             $(this).attr("disabled", "disabled") });
                          }
                    }

                   // Check to see if the current value of Category is 'On External'
                    if(e.model.Category=="On External"){
                        // Disable the InternalAmt text box
                        e.container.find("input[name='InternalAmt']").each(function ()
                          {
                             $(this).attr("disabled", "disabled") });
                          }
                    }

            }

<script>

如果 'Category'、'ExternalAmt' 和 'InternalAmt' 是您模型中的正确字段名称，那应该可行。