根据网格中的下拉选择，使一个kendo单元只读

Question

我有一个剑道网格，其中一个列中有一个下拉列表。根据下拉列表选择，我希望能够禁用或启用其他列。我怎样才能实现这一目标？我尝试了一些例子，但我无法随心所欲。网格中的下拉列表有三个选项 - 内部，外部和两者。在选择内部时，我希望启用具有内部金额的列，对于其他选项也是如此。每个单元格都有一个下拉列表，根据选择，我希望根据从DDL中选择的选项禁用和启用其他内部金额单元格和外部金额。

代码：

     @(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>

任何想法都会非常有用。我附上了网格图片，以显示我想要的内容。

类别是下拉列表，当我选择内部时，外部金额不应该是可编辑的，只有内部金额应该是可编辑的。应该为每一行做到这一点。

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'是模型中正确的字段名称。