Angular directive elements in Kendo Row Templates

[June]

Hi guys,

I'm currently using Angular 1.5.x with Kendo UI Professional, the latest release (version 2016.2.504).  

I have a kendo grid which uses row templates.  In these row templates, I have a number of angular directive elements that is basically a wrapper around the Kendo combo box and a button.  The kendo combo box is bound to a remote data source using the kendo.data.DataSource object.  Whenever I attempt to add a new Row or remove an existing row from the Kendo grid, I think Kendo redraws everything in the grid and all of my angular elements get recreated so that each angular element with the remote data source goes through a DataBound event and calls the remote source again.  This is highly inefficient is something that I want to avoid overall.  I know that if I just use a plain old kendo combo box instead of my angular wrapper element, this doesn't happen, but that's not what I want.  Can anyone help me with this?  Is there some way I can stop the angular element from being recreated whenever I want to add a new row or remove an existing row from the Kendo grid?

 

Thanks in advance for the help!  

[Vladimir Iliev]

Hi June,

Please note that you cannot avoid re-rendering of the rows when new row is added and therefor you should use different solution. For example you can make the comboboxes use single dataSource instance or load all items on the client side and filter them for each combobox individually. Such example could be:

• Kendo UI Grid for Angular: row template with comboboxes loading items from shared dataSource

Regards,
Vladimir Iliev
Telerik by Progress