Grey-out a row in Kendo grid

[Hari]

I have a kendo grid with one of the columns as check boxes. I want to achieve the following:

1. Select a row using check box, click on delete button external to grid and get that row deleted. (looking out for bulk delete also)
2. Select a row using check box, click on a button to grey-out / disable ( row should still be present in the grid) that row.

I could able to achieve first task. I need help for the second task.

Any quick help with sample code will be appreciated. I'm new to kendo.

is this the right way to get a column with check boxes?

 

 checkBox is an empty string ( "" ) which i'm getting from controller

 columns.Bound(p => p.checkBox).ClientTemplate("<input type= 'checkbox' id= 'chkbox' onchange= 'chkchnage()' />").Title("");

columns.Bound(p => p.frontOffice).Title("Rule Description").HeaderHtmlAttributes(new { style = "text-align:center" });

.

.

.DataSource(dataSource => dataSource

            .Ajax()

            .ServerOperation(false)

            .Model(model => model.Id(m => m.checkBox))  //not sure why I added this.Model id is mandatory it seems


            .PageSize(20)

         )

         .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

         .Resizable(resize => resize.Columns(true))

         .Editable(editing => editing.DisplayDeleteConfirmation(true))

         .Navigatable()

         .Pageable()

          

         .Sortable().Render();

[Hari]

Thanks to Kendo support team. I haven't received any information !   Please confirm if that is achievable ?

[Sarvesh]

Hi Hari,

This is achievable using column template. I had the same use case and managed to get it working. 

My checkbox column template is as below
template: '<p align="center" # if(IsReadOnly === "True") { # title="Disabled" # } # /> <input type="checkbox" id="#=KeyField#" # if(IsReadOnly === "True") { # disabled /> # } else { if(IsSelected === "True") { # checked="checked" /> # } else { # /> # } if(saveItem(KeyField)){} } # </p>'

and all other columns have the below template
template: '<p title=\'#=Column1#\' # if(IsReadOnly === "True") { # style="color:gray;white-space:nowrap;" # }# style="white-space:nowrap;">#=Column1#</p>'

My api sends me the IsReadOnly flag for each row, in your case you can modify the grids datasource to set a flag for the item to disable and then refresh the grid.

Regards,
Sarvesh

[Hari]

Thanks Sarvesh for the reply.   will try your suggestion and  let you know.  Give me sometime.