Dynamic change cell background

1 Answer 4828 Views

Grid

Nick asked on 15 Dec 2016, 06:41 AM

pic.png

Hi,

I have a issue when to change the cell background dynamic, please refer to attach screenshot, below is the detail.

1, The PartNo, Spec, CmdtyCode are editable field, and they are colored as orange, and there is no color for other un-editable fields.

2, What I want is if the PartNo is blank, then set the CmdtyCode, Spec as editable and orange. If PartNo is not blank, then set the CmdtyCode, Spec as un-editable and not set color.

Now I can changed cell background and edit status normal. But if I lock the CmdtyCode field and other fields, I cannot get the correct index of locked editable field, is there any one can help me?

1 Answer, 1 is accepted

answered on 16 Dec 2016, 12:36 PM

Hello Nick,

You can use an approach similar to the ones in the following how-to article from our documentation:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values

I have prepared a simple example, illustrating handling the dataBound event, and adding custom classes to cells in given columns, based on the value of the field, displayed in a different column:

http://dojo.telerik.com/OtUxad

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Nick

commented on 19 Dec 2016, 04:01 AM

issue1.png

Hi Dimiter,

Thanks for your reply.

My issue still not solve now, I do some update and add my comment in the demo your support, and my issue can repeat in there, please refer to the attach screenshot.

I am not use the dataBound event. because I just want to change cell color after changing a field value. No need to save and re-bound the data.

Dimiter Topalov

commented on 20 Dec 2016, 12:28 PM

Hi Nick,

The observed behavior when there is a locked column is caused by the fact that when the Grid has locked columns, two tables are rendered - one for the locked content, and one - for the scrollable one, thus the custom logic, involving indexes of certain elements within collections, returned by the jQuery selectors, does not work as expected.

You can use the following fields to access the corresponding parts of the Grid:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-content

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-lockedContent

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-lockedHeader

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.