Kendo Angular Grid - read rows and set background color

[Sagar]

Hi,

I've a few queries related to kendo grid (using via AngularJS way).

1. What is the recommended way to read the entire grid data in AngularJS.. I want to read all the rows and find a row whose column value matches a given value..

2. Once I find this row, I would like to set the background color of this row and its detailedRow (aka child row) to gray color.. I think every row in kendo grid has a rowId value set dynamically. That will be of use in setting the background-color of the row..

3. There is a checkbox column too in the grid.. so would like to check the checkbox for this row.

Any thoughts on this? A sample code would be of great help..
Thanks in advance.

Thanks,
Sagar

[Alexander Popov]

Hi Sagar,

The simplest solution would be to subscribe to the Grid's dataBound event, iterate over the items returned by the DataSoure's view method and check the conditions. If there is a matching item you can find the corresponding Grid row by its data-uid attribute and set its background color and expand it. Here is an example illustrating how the above could be achieved.

Regards,
Alexander Popov
Telerik

 

 

[Sagar]

Hi Alexander,

I've to make the background color of a few rows on a click event of a button. I've done that but my grid has a detail row (i.e. child band). I am able to get the data-Uid of the row and change its background color. I need to find that row's child band (or detail Row) and change the background color of it as well.

I really appreciate your efforts as it helps us in many ways and clears our doubts. :)

Thanks,
Sagar

[Sagar]

For my last post, I'm done with that as well.. but stuck on something.. I've the row of my grid and had set its background color. My grid has a column of checkbox. I want to check the checkbox of this row. I'm not using dataBound event because this is happening on a click event of a button. I've the data-uid and have access to the row in question.

There is a column named isSelected mapped to checkbox column.

Let me know how can I check the checkbox as well as have access to the dataItem for the current row.

Thanks,
Sagar

[Alexander Popov]

Hello Sagar,

Since you have the row and the checkbox is bound to a field, then I would suggest getting the dataItem and setting the new value. For example: 

var item = grid.dataItem(row);
item.set("isSelected", true);

Regards,
Alexander Popov
Telerik

 

 

[Sagar]

Perfect! that's what I did. But there is one caveat in this, the grid object you're using the first line, to get it, we gotta use jquery style code, something like:

var grid = $("#GridID").data("kendoGrid");

Is there any angular way for this?

[Alexander Popov]

Hello Sagar,

Sure, just specify a name to the kendo-grid attribute, as explained in the Using Kendo with AngularJS article. For example: 

<div kendo-grid="MyGrid" options="MyGridOptions"></div>
...
$scope.MyGrid.dataItem(row);

Regards,
Alexander Popov
Telerik

 

 

[Sagar]

Great, thanks a ton Alexander...!