根据列值禁用/启用kendo网格中的复选框 [英] Disable/Enable the checkbox in kendo grid based on column Value

问题描述

我有一个kendogrid一切正常，现在我有新的要求，即最后一列我有复选框，只有到上一列我有一个状态列，

if该文本值是CERTIFIED只有那么特定行复选框应该启用，如果文本不是CERTIFIED，它应该禁用该行的复选框，并且不应该允许使用jquery检查该复选框，我已附加图片kendogrid我可以为任何建议提供帮助

CODE

这是我的KENDO网格的我的列

 ，列：[
 {field：ResultFormatID ，标题：ResultFormatID，filterable：false，sortable：false，hidden：true}，
 {field：ID，Title：ID，filterable：false，sortable：false，hidden：true} ，
 {field：RowID，Title：RowID，filterable：false，sortable：false，hidden：true}，
 {field：BillNumber，Title：Bill Number ：false，sortable：false，hidden：true}，
 {field：ServiceName，Title：Service Name，width：600}，
 {field：Status Status，width：150} 
，{
 template：$（＃template）。html（），
 headerTemplate：'< label& < input type =checkboxid =checkAll/>下载< / label>'，filterable：false，sortable：false，width：100，
} 
] / code> 
 
 
 
 这是我的个人区域CHECKBOX  
 < script id =templatetype =text / kendo-template> 
 #if（ResultFormatID！= 3）{＃
< input type =checkbox＃= data.Action？ checked =checked：＃class = \check_row\/> 
＃} else {＃
< input type =buttonclass =k-button infoname =infovalue =Preview/& 
＃}＃
  
 
 
 
 
  UPDATED   （和我取消选中的操作）
 
 
 
 这是我的检查功能 
 $ b 
  $（＃checkAll）。on（'click'，function（e）{
 debugger; 
 
 var $ cb = $（this）; 
 var checked = $ cb.is（'：checked'）; 
 var grid = $（'Grid_table'）。data（'kendoGrid'）; 
 
 grid.table.find（tr）。find（td：last input）。attr（checked，checked）; 
 
 
 var items = $（。Grid_table）。data（kendoGrid）。dataSource.data（）; 
 for（i = 0; i< items.length; i ++）{
 var item = items [i]; 
 var status = item.ServiceStatus; 
 
 if（status ==Result Certified）{
 grid.table.find（tr） .find（td：last input）。attr（checked，checked）; 
} 
 else {
 
 grid.table.find（tr）。 find（td：last input）。prop（checked，false）; 
} 
 if（！checked）{
 // debugger; 
 $（。Grid_table）。data（kendoGrid）。clearSelection（）; 
} 
 
}）; 
 
}）; 
  
  UPDATE 2  
 
 
 
现在根据你的代码，一切正常，我能够取消选中未认证的行，我面临一个问题与下面的代码，如果atleast单复选框未选中它禁用按钮，用于下载PDF文件，现在如果我选择所有复选框并点击那个按钮下载，它现在禁用！但如果我取消选择任何一行，从10行，然后下载启用并用于下载文件。
 
 
 
如果我禁用以下代码的最后3行，它帮助启用按钮点击，但我需要取消选择至少单个复选框工作，如果不是它将禁用，我做错了吗？
  $（function（）{
 // debugger; 
 var checkboxes = $（'：checkbox：not（#checkAll）'）。 b $ b $（'＃btn_Print'）。prop（disabled，checkboxes.filter（'：checked'）。length == 0）; 
} ）.click（function（event）{
 checkboxes.prop（'checked'，this.checked）; 
 $（'＃btn_Print'）。prop（disabled，！this.checked）
}）; 
}）; 
  
 IF 
 
 
 
  
 
 
 
  
解决方案
如果 type =checkbox的输入字段为禁用。所以你应该定义模板如下：
 < script id =templatetype =text / kendo-template > 
 #if（ResultFormatID！= 3）{＃
< input type =checkbox＃= data.Action？ checked =checked：＃class = \check_row\＃= data.Status =='Certified'？ disabled ='disabled'：＃/> 
＃} else {＃
< input type =buttonclass =k-button infoname =infovalue =Preview/& 
＃}＃
< / script> 
  
 I.e：添加 data.Status =='Certified'的条件？ disabled ='disabled'： 
 
 
 
请参阅此处： http://jsfiddle.net/Hfk3Q/  
 
 
 
 编辑：点击on headers复选框将改变其实现，以便仅检查未禁用的单元格。例如：
  $（'。check_row：not（：disabled）'，grid.tbody）.prop ，true）; 
  
请参阅此处： http://jsfiddle.net/Hfk3Q/3/  
 
I have a kendogrid all working good, now I got new requirement i.e. last column i have checkbox and just to that previous column I have a status column,

if that text value is "CERTIFIED" only then that specific row checkbox should be enabled, if the text is not 'CERTIFIED' it should disable the checkbox of that row,and should not allow to check that checkbox using jquery,  I have attached pic of kendogrid I have, which might help for any suggestions

CODE

THESE ARE MY COLUMNS OF MY KENDO GRID
, columns: [
            { field: "ResultFormatID", Title: "ResultFormatID", filterable: false, sortable: false, hidden: true },
            { field: "ID", Title: "ID", filterable: false, sortable: false, hidden: true },
            { field: "RowID", Title: "RowID", filterable: false, sortable: false, hidden: true },
            { field: "BillNumber", Title: "Bill Number", filterable: false, sortable: false, hidden: true },
            { field: "ServiceName", Title: "Service Name", width: 600 },
            { field: "Status", Title: "Service Status", width: 150 }
             , {
               template: $("#template").html(),
               headerTemplate: '<label>  <input type="checkbox" id="checkAll"/>Download</label>', filterable: false, sortable: false, width: 100,
           }
         ]
THIS IS MY INDIVIDUAL ROW CHECKBOX
<script id="template" type="text/kendo-template">
   #if(ResultFormatID != 3) { #   
   <input type="checkbox" #= data.Action ? checked="checked" : "" #  class=\"check_row\"/>
   # } else { #
<input type="button" class="k-button info" name="info" value="Preview" />
   # } #


UPDATED

THIS IS MY CHECKALL FUNCTION(and what i did to uncheck)
 $("#checkAll").on('click', function (e) {
         debugger;

        var $cb = $(this);
        var checked = $cb.is(':checked');
        var grid = $('.Grid_table').data('kendoGrid');

        grid.table.find("tr").find("td:last input").attr("checked", checked);           


        var items = $(".Grid_table").data("kendoGrid").dataSource.data();
        for (i = 0; i < items.length; i++) {
            var item = items[i];
       var status = item.ServiceStatus;

            if (status == "Result Certified ") {
              grid.table.find("tr").find("td:last input").attr("checked", checked);
            }
            else {

                grid.table.find("tr").find("td:last input").prop("checked",false);
            }
     if (!checked) {
            // debugger;
            $(".Grid_table").data("kendoGrid").clearSelection();
        }

    });

});
UPDATE 2

now as per your code, everything works fine and I am able to uncheck the not certified row, i am facing a problem with below code, if atleast single checkbox is not checked it disabled the button which is used to download the PDF file, now if i select all checkbox and clicked on that button download, it is disabled now!! but if i uncheck any one row out of like 10 rows, then download enables and used to download the file.

if I disable the last 3 lines  of below code, it helps in enabling the button to click, but i need to unselect atleast single check box to work, if not it will disabled, what am i doing wrong ??
 $(function () {
         //debugger;            
        var checkboxes = $(':checkbox:not(#checkAll)').click(function (event) {
            $('#btn_Print').prop("disabled", checkboxes.filter(':checked').length == 0);
        });
        $('#checkAll').click(function (event) {
            checkboxes.prop('checked', this.checked);
            $('#btn_Print').prop("disabled", !this.checked)
        });
    });
IF 



解决方案
Seems that what you need is controlling if the input field of type="checkbox" is disabled. So you should defined the template as follow:
<script id="template" type="text/kendo-template">
   #if(ResultFormatID != 3) { #   
   <input type="checkbox" #= data.Action ? checked="checked" : "" #  class=\"check_row\" #= data.Status == 'Certified' ? disabled='disabled' : "" #/>
   # } else { #
<input type="button" class="k-button info" name="info" value="Preview" />
   # } #
</script>
I.e: add the condition of data.Status == 'Certified' ? disabled='disabled' : ""

See it in action here: http://jsfiddle.net/Hfk3Q/

EDIT: Changes required when clicking on headers check box would be changing its implementation for checking only those cells that are not disabled. Something like:
$('.check_row:not(:disabled)', grid.tbody).prop('checked', true);
See it in action here: http://jsfiddle.net/Hfk3Q/3/

                        
这篇关于根据列值禁用/启用kendo网格中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！