RadRotatorItem as sqldatasource control parameter

[Dusty]

Is there a way to set a value in the RadRotatorItem that can be used as an asp control parameter in a SqlDataSource?  I have a RadRotator with a client item shown event that I want to fire a repaint of RadHTMLCharts on a page when the Rotator hit's the next item.  I want to be able to specify the value passed to the control parameter.

[Marin Bratanov]

Hello,

I think the easiest approach would be to store that info in a span or a hidden span in the rotator item so you can retrieve it.

Then, in the ItemShown event, you can put it in a hidden field or textbox so you can use it for the server. request.

Regards,

Marin Bratanov
Telerik

[Dusty]

Thanks - I tried using a similar method but I think I'm unfamiliar with the repaint method of a RadHtmlChart and it rebinding from the datasource attached to it.  Through the rotator, i'm trying to update a control that is a control parameter of the datasource of the chart, but on repaint, nothing seems to happen.

 

<telerik:RadRotator ID="RadRotator1" runat="server" Width="1200px" ItemWidth="150"
                        Height="250px" ItemHeight="188" ScrollDuration="500" FrameDuration="5000" PauseOnMouseOver="false" RotatorType="Carousel" OnClientItemShown="OnClientItemShown">
                        <Items>
                            <telerik:RadRotatorItem ID="rr648">
                                <ItemTemplate>
                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Img/Employees/Aaron_g.jpg" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem ID="rr762">
                                <ItemTemplate>
                                    <asp:Image ID="Image2" runat="server" ImageUrl="~/Img/Employees/Travis_p.jpg" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem ID="rr764">
                                <ItemTemplate>
                                    <asp:Image ID="Image3" runat="server" ImageUrl="~/Img/Employees/Frank_j.jpg" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem ID="rr769">
                                <ItemTemplate>
                                    <asp:Image ID="Image4" runat="server" ImageUrl="~/Img/Employees/Mark_k.jpg" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem ID="rr770">
                                <ItemTemplate>
                                    <asp:Image ID="Image5" runat="server" ImageUrl="~/Img/Employees/Kevin_dawe.jpg" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                        </Items>
                    </telerik:RadRotator>

<telerik:RadHtmlChart ID="rchContractFunnel" runat="server" DataSourceID="sdsContractBreakdown" Height="210px" Width="500px" Skin="Silk">
                            <PlotArea>
                                <Series>
                                    <telerik:FunnelSeries DynamicHeightEnabled="false" DynamicSlopeEnabled="false" SegmentSpacing="0" NeckRatio="0.3" DataFieldY="Total" DataNameField="name">
                                    </telerik:FunnelSeries>
                                </Series>
                            </PlotArea>

                            <Legend>
                                <Appearance Visible="true"></Appearance>
                            </Legend>
                            <ChartTitle Text="Week To Date"></ChartTitle>

                        </telerik:RadHtmlChart>

<asp:SqlDataSource ID="sdsContractBreakdown" ConnectionString="<%$ ConnectionStrings:CMICDATAConn %>"
                SelectCommand="asp_GetSalesDashboardData_ContractFunnel" SelectCommandType="StoredProcedure" runat="server">
                <SelectParameters>
                    <asp:ControlParameter ControlID="rrTeam" DefaultValue="648" Name="EmpID" PropertyName="Text" />
                    <asp:ControlParameter ControlID="rblDateRange" DefaultValue="1" Name="DateTypeID" PropertyName="SelectedValue" />
                </SelectParameters>
            </asp:SqlDataSource>

<asp:Label ID="rrTeam" runat="server" Text="" style="visibility:hidden;"></asp:Label>

<telerik:RadScriptBlock runat="server" ID="rcb1">
            <script type="text/javascript">
                function OnClientItemShown(sender, args) {

                    var rotatorItem = args.get_item();
                    var itemElem = rotatorItem.get_element();
                    var wrapper = itemElem.firstChild;
                    var ds = $find("<%=sdsContractBreakdown.ClientID %>");

                    if (wrapper.id == "RadRotator1_i0") {
                        var rrTeam = document.getElementById("rrTeam").innerHTML;
                        var team = "648";
                        rrTeam = team;
                    }
                    if (wrapper.id == "RadRotator1_i1") {
                        var rrTeam = document.getElementById("rrTeam").innerHTML;
                        var team = "762";
                        rrTeam = team;
                    }
                    if (wrapper.id == "RadRotator1_i2") {
                        var rrTeam = document.getElementById("rrTeam").innerHTML;
                        var team = "764";
                        rrTeam = team;
                    }
                    if (wrapper.id == "RadRotator1_i3") {
                        var rrTeam = document.getElementById("rrTeam").innerHTML;
                        var team = "769";
                        rrTeam = team;
                    }
                    if (wrapper.id == "RadRotator1_i4") {
                        var rrTeam = document.getElementById("rrTeam").innerHTML;
                        var team = "770";
                        rrTeam = team;
                    }

                    setTimeout(function () {
                        var funnel = $find("<%=rchContractFunnel.ClientID %>");
                        funnel.set_dataSource(ds);
                        funnel.set_transitions(true);
                        funnel.repaint();
                    }, 1000);
                    
                }

            </script>
        </telerik:RadScriptBlock>

​

[Marin Bratanov]

Hello,

The repaint() method of RadHtmlChart only redraws its client-side rendering. It will not request new data because the control does not have a built-in facility for invoking postbacks.

I can suggest two approaches to your case:

• invoke an AJAX request that will update parameters of the data source on the server and set it again to the chart so it gets the new data (of course, the chart must be part of the response)
• OR, work with the chart entirely with client-side data (note that using the server-side SqlDataSource control is not possible on the client, you need to use an array: http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/client-side-programming/overview#modify-the-radhtmlcharts-data-source-on-the-client)

Regards,

Marin Bratanov
Telerik