Cell template with a visual control

[David]

Hi,

I have a grid and I want to put a visual control into each cell in one column.

The uses the jquery plugin pattern. So I would normally use it as such:

 

var $progressBar = $("<div />").appendTo($container);
$progressBar.myProgressBar(options);

 

The problem I am running into is using a cell template I don't have access to the cell ($container) to append this element to.

Is there a way I can add in this?

 

Thanks

[Eduardo Serra]

Hello David,

The ability to include Kendo UI Charts inside a Kendo UI Grid is contemplated and included in the library. Take a look at the following documentation to see the best way to do it; you can find the use nested chart sample here.

In the column where we want the charts to appear, we include a template to assign a class and, using said class, we populate the cell in the DataBound event of the grid which occurs after the grid is initialized.

Keep in mind that this sample shows the demo uses bar charts, but the approach would be similar regardless of the type of data visualization used.

I hope this helps.

Regards,
Eduardo Serra
Telerik by Progress

[David]

Thanks for the response. Can you explain more about the databound event as the documentation is a bit unclear about what it does. And I have a concern:

My control performs an animation. The data will be getting a refreshed in the background by signalr (using a signalr datasource). Ideally I would not want a progress bar animation to halt mid way and start reanimating due to another row getting updated or start animating when that row has not changed.

 

[Eduardo Serra]

Hello David,

The dataBound event is triggered after the data has been bound to the Grid, while the dataBinding event fires during the binding process.

We used this event because we want the grid to be populated with the data first so that data is subsequently available for being used to render the charts.

If you want to check the order in which the events are fired, I encourage you to take a look, edit, and play around with this sample in our documentation; notice how the box in the bottom shows the events being fired in real time.

I hope this helps!

Regards,
Eduardo Serra
Telerik by Progress