How to resize telerik radhtmlchart on window resize

Question

0.00/5 (No votes)

See more:

We are using Asp.net Repeater to show multiple telerik charts dynamically on the page.

There is an issue with size of the charts which are not resized according to window size

How to fix this issue.

ASP.NET

<pre>     <asp:Repeater ID="rptDashboard" runat="server">
                            <ItemTemplate>
                                <div  style="padding-bottom: 2%;">
                                    <div class="card" style="box-shadow: 4px 4px 10px rgba(0,0,0,0.16);">
                                        <div id="divBar" runat="server" >
                                            <div class="card-header card-dash">
                                                <asp:Label ID="lblBar" runat="server" CssClass="card-dash-title"></asp:Label>
                                                <asp:Button runat="server" ID="btnBar" class="button float-right" Text="View More" />
                                            </div>
                                            <Telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="250" Skin="Metro">
                                                <PlotArea>
                                                    <Series>
                                                        <Telerik:ColumnSeries Name="X" DataFieldY="Y">
                                                            <TooltipsAppearance>
                                                                <ClientTemplate>#=dataItem.Z# </ClientTemplate>
                                                            </TooltipsAppearance>
                                                            <LabelsAppearance Visible="true" />
                                                        </Telerik:ColumnSeries>
                                                    </Series>
                                                    <XAxis DataLabelsField="X">
                                                        <MajorGridLines Visible="false" />
                                                        <MinorGridLines Visible="false" />
                                                    </XAxis>
                                                    <YAxis>
                                                        <MajorGridLines Visible="false" />
                                                        <MinorGridLines Visible="false" />
                                                        <LabelsAppearance />
                                                    </YAxis>
                                                </PlotArea>
                                                <Legend>
                                                    <Appearance Visible="false" />
                                                </Legend>

                                            </Telerik:RadHtmlChart>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblBarText"></asp:Label>
                                                </div>
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblBarValue"></asp:Label>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="divPie" runat="server">
                                            <div class="card-header card-dash">
                                                <asp:Label ID="lblPie" runat="server" CssClass="card-dash-title"></asp:Label>
                                                <asp:Button runat="server" ID="btnPie" class="button float-right " Style="cursor: pointer; border: 1px solid transparent; color: white; border-radius: 3px; background-color: #7030a0;" BackColor="#7030a0" Text="View More" />
                                            </div>
                                            <Telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Height="250" Skin="Metro">
                                                <PlotArea>
                                                    <Series>
                                                        <Telerik:PieSeries DataFieldY="Y" NameField="X">
                                                            <LabelsAppearance>
                                                            </LabelsAppearance>
                                                            <TooltipsAppearance>
                                                                <ClientTemplate>#=dataItem.X# </ClientTemplate>
                                                            </TooltipsAppearance>
                                                        </Telerik:PieSeries>
                                                    </Series>
                                                    <YAxis>
                                                    </YAxis>
                                                </PlotArea>
                                                <Legend>

                                                    <Appearance Position="Right" Visible="true" />
                                                </Legend>

                                            </Telerik:RadHtmlChart>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblPieText"></asp:Label>
                                                </div>
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblPieValue"></asp:Label>
                                                </div>
                                            </div>


                                        </div>
                                        <div id="divDonut" runat="server">
                                            <div class="card-header card-dash">
                                                <asp:Label ID="lblDonut" runat="server" CssClass="card-dash-title"></asp:Label>
                                                <asp:Button runat="server" ID="btnDonut" class="button float-right" Text="View More" />
                                            </div>
                                            <Telerik:RadHtmlChart runat="server" ID="RadHtmlChart3" Height="250" Skin="Metro">
                                                <PlotArea>
                                                    <Series>
                                                        <Telerik:DonutSeries DataFieldY="Y" NameField="X">
                                                            <LabelsAppearance>
                                                            </LabelsAppearance>
                                                            <TooltipsAppearance>
                                                                <ClientTemplate>#=dataItem.X# </ClientTemplate>
                                                            </TooltipsAppearance>
                                                        </Telerik:DonutSeries>
                                                    </Series>
                                                    <YAxis>
                                                    </YAxis>
                                                </PlotArea>
                                                <Legend>
                                                    <Appearance Position="Right" Visible="true" />
                                                </Legend>

                                            </Telerik:RadHtmlChart>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblDonutText"></asp:Label>
                                                </div>
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblDonutValue"></asp:Label>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="divGauge" runat="server">
                                            <div class="card-header card-dash">
                                                <asp:Label ID="lblGauge" runat="server" CssClass="card-dash-title"></asp:Label>
                                                <asp:Button runat="server" ID="btnGauge" class="button float-right" Style="cursor: pointer; border: 1px solid transparent; color: white; border-radius: 3px; background-color: #7030a0;" BackColor="#7030a0" Text="View More" />
                                            </div>

                                            <Telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="250px">
                                                <Pointer Value="50.2">
                                                    <Cap Size="0.1" />
                                                </Pointer>
                                                <Scale Min="0" Max="100" MajorUnit="20">
                                                    <Labels Format="{0}" />
                                                    <Ranges>
                                                        <Telerik:GaugeRange Color="#c20000" From="20" To="40" />
                                                        <Telerik:GaugeRange Color="#ff7a00" From="40" To="60" />
                                                        <Telerik:GaugeRange Color="#ffc700" From="60" To="80" />
                                                        <Telerik:GaugeRange Color="#8dcb2a" From="80" To="100" />

                                                    </Ranges>
                                                </Scale>
                                            </Telerik:RadRadialGauge>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblGaugeText"></asp:Label>
                                                </div>
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblGaugeValue"></asp:Label>
                                                </div>
                                            </div>
                                            <asp:Label ID="lblGaugeVal" Text="97" runat="server" CssClass="Label1" />
                                        </div>
                                        <div id="divSeries" runat="server">
                                            <div class="card-header card-dash">
                                                <asp:Label ID="lblSeries" runat="server" CssClass="card-dash-title"></asp:Label>
                                                <asp:Button runat="server" ID="btnSeries" class="button float-right" Text="View More" />
                                            </div>
                                            <Telerik:RadHtmlChart runat="server" ID="RadHtmlChart4" Height="250" Skin="Metro">

                                                <PlotArea>

                                                    <%--  <Series>
                                                    
                                                    <Telerik:ColumnSeries DataFieldY="Y1" Name="">

                                                        <TooltipsAppearance DataFormatString="{0}" />

                                                        <LabelsAppearance Visible="true" />

                                                    </Telerik:ColumnSeries>

                                                    <Telerik:ColumnSeries DataFieldY="Y2" Name="" >
                                                        
                                                        <TooltipsAppearance DataFormatString="{0}" />

                                                        <LabelsAppearance Visible="true" />

                                                    </Telerik:ColumnSeries>
                                                    <Telerik:ColumnSeries DataFieldY="Y3" Name="">

                                                        <TooltipsAppearance DataFormatString="{0}" />

                                                        <LabelsAppearance Visible="true" />

                                                    </Telerik:ColumnSeries>
                                                </Series>--%>
                                                    <XAxis DataLabelsField="X">
                                                        <MajorGridLines Visible="false" />
                                                        <MinorGridLines Visible="false" />
                                                    </XAxis>
                                                    <YAxis>
                                                        <MajorGridLines Visible="false" />
                                                        <MinorGridLines Visible="false" />
                                                    </YAxis>
                                                </PlotArea>
                                                <Legend>
                                                    <Appearance Position="Bottom">
                                                    </Appearance>
                                                </Legend>

                                            </Telerik:RadHtmlChart>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblSeriesText"></asp:Label>
                                                </div>
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblSeriesValue"></asp:Label>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="divLine" runat="server">
                                            <div class="card-header card-dash">
                                                <asp:Label ID="lblLine" runat="server" CssClass="card-dash-title"></asp:Label>
                                                <asp:Button runat="server" ID="btnLine" class="button float-right" Text="View More" />
                                            </div>
                                            <Telerik:RadHtmlChart runat="server" ID="RadHtmlChart5" Height="250px" Skin="Metro">
                                                <PlotArea>
                                                    <Series>
                                                        <Telerik:LineSeries DataFieldY="Y1" Name="2016">

                                                            <LabelsAppearance Visible="false">
                                                            </LabelsAppearance>
                                                        </Telerik:LineSeries>
                                                        <Telerik:LineSeries DataFieldY="Y2" Name="2017">

                                                            <LabelsAppearance Visible="false">
                                                            </LabelsAppearance>
                                                        </Telerik:LineSeries>
                                                        <Telerik:LineSeries DataFieldY="Y3" Name="2018">

                                                            <LabelsAppearance Visible="false">
                                                            </LabelsAppearance>
                                                        </Telerik:LineSeries>
                                                    </Series>
                                                    <XAxis DataLabelsField="X">
                                                        <MajorGridLines Visible="false" />
                                                        <MinorGridLines Visible="false" />
                                                    </XAxis>
                                                    <YAxis>
                                                        <MajorGridLines Visible="false" />
                                                        <MinorGridLines Visible="false" />
                                                    </YAxis>
                                                </PlotArea>


                                            </Telerik:RadHtmlChart>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblLineText"></asp:Label>
                                                </div>
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblLineValue"></asp:Label>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="divStacked" runat="server">
                                            <div class="card-header card-dash">
                                                <asp:Label ID="lblStacked" runat="server" CssClass="card-dash-title"></asp:Label>
                                                <asp:Button runat="server" ID="btnStacked" class="button float-right" Text="View More" />
                                            </div>
                                            <Telerik:RadHtmlChart runat="server" ID="RadHtmlChart6" Height="250px" Skin="Metro">
                                                <PlotArea>
                                                    <Series>
                                                        <Telerik:ColumnSeries DataFieldY="Y1" Stacked="true" Name="">
                                                            <LabelsAppearance Visible="true" Position="Center">
                                                                <ClientTemplate>#=dataItem.Y1# </ClientTemplate>
                                                            </LabelsAppearance>
                                                            <TooltipsAppearance Visible="true">
                                                                <ClientTemplate>#=dataItem.X1# </ClientTemplate>
                                                            </TooltipsAppearance>
                                                        </Telerik:ColumnSeries>
                                                        <Telerik:ColumnSeries DataFieldY="Y2" Stacked="true" Name="">
                                                            <LabelsAppearance Visible="true" Position="Center">
                                                                <ClientTemplate>#=dataItem.Y2# </ClientTemplate>
                                                            </LabelsAppearance>
                                                            <TooltipsAppearance Visible="true">
                                                                <ClientTemplate>#=dataItem.X2# </ClientTemplate>
                                                            </TooltipsAppearance>
                                                        </Telerik:ColumnSeries>

                                                    </Series>
                                                    <XAxis DataLabelsField="X">
                                                        <MajorGridLines Visible="false" />
                                                        <MinorGridLines Visible="false" />
                                                        <LabelsAppearance Visible="true"></LabelsAppearance>
                                                    </XAxis>
                                                    <YAxis>
                                                        <MajorGridLines Visible="false" />
                                                        <MinorGridLines Visible="false" />
                                                    </YAxis>
                                                </PlotArea>
                                                <Legend>
                                                    <Appearance Position="Bottom" Visible="true" />
                                                </Legend>

                                            </Telerik:RadHtmlChart>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblStackedText"></asp:Label>
                                                </div>
                                                <div class="col-md-6">
                                                    <asp:Label runat="server" Text="" ID="lblStackedValue"></asp:Label>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="divRepeater" runat="server">
                                            <div class="card-header card-dash">
                                                <asp:Label ID="lblRepeater" runat="server" CssClass="card-dash-title"></asp:Label>
                                                <asp:Button runat="server" ID="btnRepeater" class="button float-right" Text="View More" />
                                            </div>
                                            <div class="row">
                                                <asp:Repeater ID="rptRepeater" runat="server">
                                                    <ItemTemplate>
                                                        <div class="col-sm-2">


                                                            <div class='<%# Eval("CSS")%>'>
                                                                <div class="pad-all text-center">
                                                                    <span class="text-3x text-thin"><%# Eval("X")%></span>
                                                                    <p><%# Eval("Y")%></p>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </ItemTemplate>
                                                </asp:Repeater>
                                            </div>
                                        </div>
                                       
                               
                            </ItemTemplate>
                        </asp:Repeater>

What I have tried:

window.onresize = function () {
    $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget().resize();
}

Posted 20-Nov-19 20:03pm

khaleelsyed

Add a Solution

Comments

Herman<T>.Instance 21-Nov-19 3:33am

set width and height in css class to a percentage. Than it will autoscale by resizing

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)