Dynamically disable grid rows

[Jason]

Hello,

Looking for an easy solution to enable/disable all grid rows based on other values/selections on the page.

The following selectable parameters for the grid gives me exactly what I need but I need to be able to configure the grid based on the user's input values on the page.

.Columns(columns => {
    columns.Bound(e => e.Id).Hidden();
    columns.Select()
        .Width("20px");
    columns.Bound(e => e.Name)
        .Title("Name")
        .Width("400px");
    columns.Bound(c => c.Description)
        .Title("Description")
        .Width("400px");
})
.Selectable(select => select
    .Mode(GridSelectionMode.Single)
    .Type(GridSelectionType.Row)
)



 

I've tried using the following jquery to toggle the rows, with no luck.  'enabled' is the parameter passed to the function.

var grid = $('#grid').data('kendoGrid');

grid.items().each(
    function (index, value) {
        $(value).find('.k-checkbox').attr('disabled', !enabled);
    }
);

 

Any suggestions on how I can achieve the functionality needed with the grid component?

Thanks.

Jason

 

 

[Jason]

I've also tried the following jquery,

 

 

$("#gridPermissions").kendoGrid({
    selectable: "single, row"
});

 

This simply removes ALL rows in the grid but keeps the column names.

 

[Anton Mironov]

Hi, Jason,

Thank you for the provided code snippets.

If you would like to disable the checkbox elements, use the "k-state-disabled" class instead. You could introduce an if-else clause to programmatically enable or disable them:

var grid = $('#grid').data('kendoGrid');
 
grid.items().each(
    function (index, value) {
        $(value).find('.k-checkbox').addClass("k-state-disabled");
    }
);

I hope you find this helpful.

 

Regards,
Anton Mironov
Progress Telerik

[Jason]

Thanks Anton.

 

Worked perfectly.