This is a migrated thread and some comments may be shown as answers.

Grey-out a row in Kendo grid

3 Answers 286 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Hari
Top achievements
Rank 1
Hari asked on 14 Sep 2012, 07:38 AM
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();

3 Answers, 1 is accepted

Sort by
0
Hari
Top achievements
Rank 1
answered on 15 Sep 2012, 02:50 AM
Thanks to Kendo support team. I haven't received any information !   Please confirm if that is achievable ?
0
Sarvesh
Top achievements
Rank 1
answered on 15 Oct 2012, 05:36 AM
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
0
Hari
Top achievements
Rank 1
answered on 17 Oct 2012, 05:12 AM
Thanks Sarvesh for the reply.   will try your suggestion and  let you know.  Give me sometime.
Tags
Grid
Asked by
Hari
Top achievements
Rank 1
Answers by
Hari
Top achievements
Rank 1
Sarvesh
Top achievements
Rank 1
Share this question
or