Disable checkboxes for a few rows from the selectable checkbox column
4 Answers 263 Views
sam
Top achievements
Rank 1
sam asked on 07 Jul 2020, 07:56 AM

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,
    });

4 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 08 Jul 2020, 02:56 PM

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):

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

Regards,
Anton Mironov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

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();
}
- by
sam
Top achievements
Rank 1
on 08 Jul 2020, 05:48 PM

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

- by
sam
Top achievements
Rank 1
on 08 Jul 2020, 06:07 PM
0
Anton Mironov
Telerik team
answered on 09 Jul 2020, 12:37 PM

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:

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

Best Regards,
Anton Mironov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

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 :)

- by
sam
Top achievements
Rank 1
on 10 Jul 2020, 05:57 AM
0
Anton Mironov
Telerik team
answered on 13 Jul 2020, 03:49 PM

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:

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

It solved my issue.

 

Thanks for your help

- by
sam
Top achievements
Rank 1
on 30 Jul 2020, 03:04 AM

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);

- by
Don
Top achievements
Rank 1
on 12 Nov 2020, 10:43 PM
0
Anton Mironov
Telerik team
answered on 13 Nov 2020, 12:47 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
sam
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or