Disable/Enable the checkbox in kendo grid based on

2019-03-06 15:09发布

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

enter image description here

enter image description here

1条回答
2楼-- · 2019-03-06 15:36

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/

查看更多
登录 后发表回答