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

Cell template with a visual control

3 Answers 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 13 Jan 2017, 12:51 PM

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

3 Answers, 1 is accepted

Sort by
0
Eduardo Serra
Telerik team
answered on 13 Jan 2017, 03:55 PM
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
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.
0
David
Top achievements
Rank 1
answered on 13 Jan 2017, 04:16 PM

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.

 

0
Eduardo Serra
Telerik team
answered on 16 Jan 2017, 05:24 PM
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
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.
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Eduardo Serra
Telerik team
David
Top achievements
Rank 1
Share this question
or