Kendo Ui отключить колонку, если радио проверено - PullRequest
0 голосов
/ 17 июня 2019

У меня была функция yesnoCheck() в моей сетке.Любая идея, как отключить Status Date столбец, если столбец status равен ' Нет ' и установить значение в ноль? демо здесь

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 голосов
/ 18 июня 2019

Наконец, после долгих часов в поисках ответа.На самом деле ответ прямо здесь, в документации здесь

Вот что я ищу. Я обновляю рабочую демо здесь, если кому-то нужно.

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);
  }
}  
0 голосов
/ 18 июня 2019

При привязывании вашей функции yesnoCheck передайте аргумент this, тогда вы также сможете получить доступ к своему радио и датчику. здесь код

function statusActive(container, options) {
   $('<input class="k-radio" onclick=yesnoCheck(this); 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(this); id="radio2" name="status" type="radio" value="n" >').appendTo(container);
   $('<label class="k-radio-label" for="radio2">No</label>').appendTo(container);
}

function yesnoCheck(args){
  var datepicker =$($(args).closest("td").next('td').find(".k-datepicker input")).data("kendoDatePicker");
  if(document.getElementById('radio1').checked){ //if status is YES

      datepicker.enable();
  }else{
      datepicker.enable(false);
    //disable column "Status Date" and set the value=''
  }
}  

Получив доступ к датчику, вы можете вызывать любой из API.
Вот Демо

...