Kendo Ui如果选中了单选,则禁用列

时间:2019-06-17 08:16:39

标签: javascript jquery kendo-ui kendo-grid

我在网格上拥有yesnoCheck()功能。如果第Status Date列为''并且将值设置为null,如何禁用status列? demo here

var grid = $('#grid').kendoGrid({
  dataSource: dataSource,
  editable: "inline",
  toolbar: [{ name: "create", text: "Add" }],
  columns: [        
    { field: "status", title: "Status", editor: statusActive,
      template: data => data.status == "y" ? "Yes" : "No" },

    { field: "statusDate", title: "Status Date", format:"{0:MM-dd-yyyy}", editor: statusEditor },

    { command: ["edit", "destroy"], title: " " }
  ]
});

function statusActive(container, options) {
   $('<input class="k-radio" onclick=yesnoCheck(); id="radio1" name="status" type="radio" value="y" >').appendTo(container);
   $('<label class="k-radio-label" for="radio1">Yes&nbsp;&nbsp;&nbsp;</label>').appendTo(container); 
   $('<input class="k-radio" onclick=yesnoCheck(); id="radio2" name="status" type="radio" value="n" >').appendTo(container);
   $('<label class="k-radio-label" for="radio2">No</label>').appendTo(container);
}

function yesnoCheck(){
  if(document.getElementById('radio2').checked){ //if status is NO
    //disable column "Status Date" and set the value=''
  }
}   

2 个答案:

答案 0 :(得分:0)

在绑定函数yesnoCheck传递参数的同时,您也可以访问收音机和日期选择器。 这里的代码

=IF(AND(COUNTIF(A:A,"Restricted")>0,COUNTIF(A:A,"Unrestricted")>0),"Restricted/Unrestricted",IF(COUNTIF(A:A,"Restricted")>0,"Restricted",IF(COUNTIF(A:A,"Unrestricted")>0,"Unrestricted","None")))

具有日期选择器访问权限后,您可以调用任何API。
这是Demo

答案 1 :(得分:0)

最后长时间寻找答案之后。实际上答案就在文档here

这是我要找的东西。 I update a working demo here if someone needed.

function statusActive(container, options) {
   $('<input class="k-radio" onchange="disableColumn()" id="radio1" name="status" type="radio" value="y" >').appendTo(container);
   $('<label class="k-radio-label" for="radio1">Yes&nbsp;&nbsp;&nbsp;</label>').appendTo(container); 
   $('<input class="k-radio" onchange="disableColumn()" id="radio2" name="status" type="radio" value="n" >').appendTo(container);
   $('<label class="k-radio-label" for="radio2">No</label>').appendTo(container);
}

function disableColumn(){
  var datepicker = $("#statusDate").data("kendoDatePicker");
  if(document.getElementById('radio2').checked){ 
    datepicker.enable(false); 
    datepicker.value("");
  }else{
    datepicker.enable(true);
  }
}