Disable checkboxes for a few rows from the selectable checkbox column

[sam]

Hi,

 

I am using the selectable column to select checkboxes, I need to disable the checkboxes for a few rows based on a value from the dataset for the particular row.

 

On the event of the grid "edit", I am disabling editing for certain rows based on a condition but the checkboxes for those rows can still be checked. I need to prevent/disable checking of the checkbox for the same rows based on the same condition.

 

I have to use the selectable column for checkboxes and not a custom template.

 

I have defined the grid below.

Grid Definition

$("#grid").kendoGrid({
        dataSource: DataSource,
        pageable: {
            pageSizes: true
        },
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    contains: "Contains",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        sortable: true,
        groupable: true,
        editable: true,
        resizable: true,
        scrollable: false,
        detailInit: detailInit,
        toolbar: ["Save", "Cancel"],
        edit: function (e) {
            if (e.model.ClaimStatus != ClaimStatusCode.Draft && e.model.ClaimStatus != ClaimStatusCode.Complete && e.model.Status != ClaimLineItemStatusCode.Rejected) {
                e.sender.closeCell();
            }
        },
        excelExport: generateExcelFile,
        dataBound: function () {
            highlightFailedClaimLines();
        },
        columns:
            [
                { selectable: true, width: "50px" },
                { field: "ValidationStatus", title: ResourceLabels.Label_ValidationStatus, hidden: true },
                { field: "Id", title: ResourceLabels.Label_Grid_CustomerName, hidden: true },
                { field: "IsOverridden", title: ResourceLabels.Label_Override },
                { field: "OverrideReason", title: ResourceLabels.Label_OverrideReason },
                { field: "RuleFailure", title: ResourceLabels.Label_RuleFailure, hidden: true },
                { field: "ValidationError", title: ResourceLabels.Label_ValidationError, hidden: true }
            ],
        change: onCheckBoxSelect,
        saveChanges: gridSaveChanges,
    });

[Anton Mironov]

Hi, Sam,

In order to disable cell editing and checkbox tick try to add an attribute to the row conditionally.

In this case, disabling of the checkboxes could be achieved with the following code:

  attributes: {
                  "class": "#=Category.CategoryName == 'Produce'? 'k-state-disabled':''#"
                } 

Here is an example(in case the Category is "Produce" all cells will be noneditable and the checkboxes will be disabled):

• https://dojo.telerik.com/urOWOBOQ

I hope this information helps. Let me know if further assistance is needed.

Regards,
Anton Mironov
Progress Telerik

[sam]

Hi Anton,

 

Thanks for your reply, but the solution provided by you does not entirely solve my problem.

1. If I check the checkbox in the header to select all the rows, the row with the disabled checkbox still gets checked. I need the disabled checkbox to still be disabled and unchecked in this case.

2. The condition to disable the checkbox consists of multiple conditions as mentioned in my first post.

if (e.model.ClaimStatus != ClaimStatusCode.Draft && e.model.ClaimStatus != ClaimStatusCode.Complete && e.model.Status != ClaimLineItemStatusCode.Rejected)
{
         e.sender.closeCell();
}

[sam]

Hi Anton,

 

Could you please you this simpler example for me to understand better.

https://dojo.telerik.com/EraMIKeg

 

The condition to disable the checkbox and cell editing would be:-

if(dataItem.name == "Jan" &&  dataItem.age > 30)

{

    e.sender.closeCell(); //disable editing

}

 

Thanks in advance

[Anton Mironov]

Hi, Sam,

In order to deselect a row programmatically when the master checkbox is selected, try attaching the click event to it, for instance, in the document.ready event.

Within the handler (of the master checkbox), iterate through all grid rows and deselect those that meet your condition. The handler needs a couple of milliseconds to be finished, so I would recommend using a setTimeOut block for the deselections. Here is the edited example with the desired implementation:

• https://dojo.telerik.com/UHecEtiq

Let me know if I could help you with anything else.

Best Regards,
Anton Mironov
Progress Telerik

[sam]

Hi Anton,

I need help with 3 things.

1. I copied the last row in the datasource and added it as another row and the the code does not behave as expected.

When i click select all rows the checkbox, the code only works for the last row in the grid and not the other rows which satisfy the condition.

https://dojo.telerik.com/UHecEtiq/11

 

2. If the datasource consisted of an attribute which if not a column in the grid, how do i use that attribute in my condition to disable the checkbox in the attributes section. If the datasource row was { name: "Jan", age: 44, zipcode: 101 } instead of { name: "Jan", age: 44 }. The attribute zipcode is not a column in the grid. The new condtion to disable the grid will be :-

attributes: {
            "class": "#=(name == 'Jan' && age > 30 && zipcode > 100) ? 'k-state-disabled':''#"
          }

 

3. In my own application when I try using your code in the document ready section. For the row which needs to be disabled and which meets the condition, the row becomes unselected but the disabled checkox still remains checked. When i uncheck the master row checkbox, the disabled row checkbox still remains checked. Do i need to manually add the attribute "checked" to each checkbox or what do i need to do, to make it work ?

 

Thanks in  advance for all your help :)

[Anton Mironov]

Hi, Sam,

In order to achieve these requirements try the following approaches:

1. In order to deselect all rows that meet the criteria add them in an array and deselect each one programmatically.

2. Using a property that is not a field in the grid could be achieved with the help of the dataItem. The dataItem represents the whole object and all of its properties even when they are not shown in the grid. Here is an example of the condition:

if(currentDataItem.name == "Jan" && currentDataItem.age > 30 && currentDataItem.zipcode > 100){
              deselectedRows.push(row);
            }

The full implementation could be found in the dojo below:

• https://dojo.telerik.com/IsOZiDaK

3. I have tried to replicate the behavior you described, however, I was not able to. Try the example above and let me know if the issue persists.

Kind Regards,
Anton Mironov
Progress Telerik

[sam]

It solved my issue.

 

Thanks for your help

[Don]

I have a similar issue/question but I'm using Telerik UI grid ASP.NET Core. 

I have a kendo grid and one of the columns is a column (columns.Select() ) with checkboxes that I want to show/hide depending on several Status values from the model. 

 

NOTE: I am able to show/hide a button with a columns.Command (see codes below) but can't find the way to show/hide checkboxes with Columns.Select.

columns.Command(command => command.Custom("Review")
                .Visible("showHideReviewBtn").Click("EditReview")
                .HtmlAttributes(new { style = "color:#ffffff; background-color: #2E86C1; height:25px; width:60px; font-size:9px;" }))
            .Width(75);

[Anton Mironov]

Hi Don,

Thank you for the provided details.

In order to hide checkboxes conditionally, I would recommend using the DataBound Event of the Kendo UI Grid. In the Event handler function, get all items (rows) of the Grid. Iterate by them and get every needed input checkbox and dataItem. If the condition is met in the properties of the dataItem, use the "hide" method on the input. Here is an example:

.Events(e => e.DataBound("onDataBound"))

    function onDataBound() {
        var grid = $("#grid").data("kendoGrid");
        var rows = grid.items();

        $(rows).each(function (e) {
            var row = this;
            var dataItem = grid.dataItem(row);

            if (dataItem.Freight > 30) {
                var checkbox = $(row).find("input[type=checkbox]");
                $(checkbox).hide();
            }
        })
    }

Find attached a sample project with the needed implementation included.

Let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Sahithi]

Hi Anton,

I used this method to hide checkboxes in some of the rows in the grid conditionally. It works well, but Select all selects all the rows, even the ones with hidden checkboxes. Can we disable them or something?

[Martin]

Hello, Sahithi,

The Select All feature is intended to select all rows regardless whether the checkbox is visible or not. You can use the logic provided by my colleague in this Dojo example to first disable some of the checkboxes which will exclude them from the selection. Let me know how that works for you.