Creating dynamic div and show the kendo ui chart

[jagan]

Hi Team,

I have a grid in web user control and I am dynamically adding that user control in Asp.net Web Forms(not MVC architecture). I want to show the kendo ui chart dynamically for each and every instance of web user control under the grid. All the examples in web for kendo ui provides a static div with id as chart  " <div id="chart"></div>". But requirement is I want to show the chart dynamically. For example I am dynamically creating two user controls(control1,control2) each have different datasource. I want the kendo chart to be shown under this web user control. Can anyone provide a solution to this.

Thanks,
R.Jaganathan

[jagan]

Please can anyone reply for this...its very urgent.

[Atanas Korchev]

Hello,

 We are not sure what you are asking. Could you please elaborate? What have you tried so far? How does your current code look like? Basically you can create a Kendo UI Chart from any jQuery object. 

Greetings,
Atanas Korchev
the Telerik team

[jagan]

Hi,
I have a web user control in asp.net as"crosstab.ascx". It has a radgrid. I will load this user control dynamically in a home page with datatable from db. I have to load the corresponding kendo chart inside this web user control. There can be n number of user controls that are loaded dynamically in home page for this web user control. I have the corresponding json data for kendo chart. Is there any possibility to load the kendo chart dynamically inside the web user control? Please clarify.

[Atanas Korchev]

Hello,

 What does "load kendo chart dynamically" mean? A Kendo UI Chart is initialized when its jQuery plugin function is executed:

<script>
$("#some-id").kendoChart();
</script>

Regards,
Atanas Korchev
the Telerik team

[jagan]

Hi Atanas,
For example I dont have any div present in my user control. Whenever I get json data for radgrid, I want to dynamically add div and show kendo chart inside the div. Is it possible in kendo UI dataviz?

[Atanas Korchev]

Hello,

 You can use jQuery to create a DIV and append it to your page.

  var div = $("<div/>");
  $(document.body).append(div);
  
  div.kendoChart({
    series: [ 
      { data: [1, 2] }
    ]
  });

Here is a live demo showing that: http://jsbin.com/ixupix/1/edit

Regards,
Atanas Korchev
the Telerik team

[jagan]

Thanks Atanas. This is what I want.