如何禁用 Kendo 日期选择器和位于 Kendo 网格内的下拉菜单 (Jquery)

Question

背景

我有一个带有复选框、下拉列表和日期选择器的 Kendo 网格。我正在使用行模板功能在网格上添加这些控件。下面是我的网格代码。

这就是我构建 Kendo 网格的方式

 $("#firstReqGrid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 430,
    toolbar: ["save"],
    columns: [
        { field: "claimId", title: "ClaimID", width: 40 },
        { field: "lineCnt", title: "Lines", width: 10 },
        { title: "Med Requested", field: "medRecRequested", template: '<input type="checkbox" #= medRecRequested ? \'checked="checked"\' : "" # class="chkbx" />', width: 25, editable: function (e) { return false; } },
        { title: "EOB", field: "eobChk", template: '<input type="checkbox" #= eobChk ? \'checked="checked"\' : "" # class="chkbx" />', width: 25, editable: function (e) { return false; } },
        { title: "Claim", field: "clmChk", template: '<input type="checkbox" #= clmChk ? \'checked="checked"\' : "" # class="chkbx" />', width: 25, editable: function (e) { return false; } },
        { field: "MedRecRcvd", title: "Med Rec Rcvd", width: "30px", editor: medRecRcvdDropDownEditor, template: "#=MedRecRcvd.MedRecRcvdName#" },
        {
            field: "dateReceived", title:"Date Rcvd", format: "{0:dd MMM yyyy}", width: 30, editor: function (container, options) {
                var input = $("<input/>");
                input.attr("name", options.field);

                input.appendTo(container);

                input.kendoDatePicker({});
            }
        },           
        { title: "Memo", width: 40, template: '<input type="k-button" onclick="return addMemo(#=claimId#)" class="k-button" name="btnMemo" value="Memo" />' }],
    editable: true,
    dataBound: function (e) {
    /* This code disables all the checkboxes in the grid*/
        $("#firstReqGrid :input").attr("disabled", true);

        // var grid = $("#firstReqGrid").data("kendoGrid");
      //  var pageSizeDropDownList = grid.wrapper.children.find(".k-dropdown select").data("kendoDropDownList");
        //var dropDown = e.container.find("[data-role='dropdownlist']").data("kendoDropDownList");
        //if (dropDown) {
        //    dropDown.readonly();
        //}
     
    }
});

我想要实现的目标

如果满足某些条件，我希望能够禁用 Datepicker 和 Dropdownlist。我计划在网格的数据绑定事件中检查这些“条件”，如果满足条件，则禁用日期选择器和下拉列表。我知道 datepicker.enable(false) 事件，但为了做到这一点，我需要一个我在这种情况下没有的 id。下拉列表列表也是如此；我需要一个 ID 来禁用该属性。我需要有关如何使用我布置的代码为日期选择器和下拉列表添加 ID 的帮助。这样我就可以在网格数据绑定事件中引用该 ID 并打开禁用属性。或者，如果有任何其他方式，我愿意接受建议。非常感谢。

Answer 1

您可以处理编辑事件 (documentation) 以执行以下操作：

您是否自定义业务逻辑来确定输入是否应该 enabled/disabled
如果禁用，则获取输入
然后获取输入的名称
进行条件检查以查看您是否要获得 kendoDatePicker 或 kendoDropDownList
使用业务逻辑的结果调用 enabled 方法。

这是一个例子：

edit: function(e) {
  if (SomeBusinessLogicHere()) {
    var input = e.container.find('input');
    var name = input.attr('name');
    if (name === 'my date field') {
      var datepicker = input.data('kendoDatePicker');
      datepicker.enable(false);
    }
  }
}

Fiddle: https://dojo.telerik.com/uJidaKIf

仅供参考 - 如果您想首先阻止编辑器出现，您可以处理 beforeEdit 事件 (documentation)，如果您的业务逻辑为真，只需调用 e.preventDefault()。

如何禁用 Kendo 日期选择器和位于 Kendo 网格内的下拉菜单 (Jquery)

How to disable Kendo Datapicker and Dropdown which is inside a Kendo grid (Jquery)

javascript

jquery

kendo-ui

kendo-grid