Server-side events when selection changes?

[Wayne]

I have a rotator control that has a list of periods bound do it (think like a Category).  When I click the button to move to a new selection, I want a grid to update with the information for that period (e.g. grab the ID of the selected period, and query for it).  There doesn't seem to be a way to do this server-side though, only on the client.  Is my only recourse to use Ajax to pull the data and refresh the grid when something changes in the RadRotator?

[Wayne]

Let me clarify I mean when the buttons to switch the visible item in the rotator is clicked, not the item inside (it's just a label).

[Vessy]

Hi Wayne,

If I understand your requirements properly you want to update the content of a Grid when the prev/next button of the Rotator is clicked. if so, I am afraid that the scrolling of the items of the Rotator is done on the client, thus you will need to initiate the update of the Grid client-side. A possible way to implement this is to assign a handler to the Rotator's ClientItemShown event and make an AJAX request from it.

For example, you can use a similar logic:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadRotator ID="RadRotator1" runat="server" Width="300px" RotatorType="Buttons" ScrollDuration="500" OnClientItemShown="OnClientItemShown">
    <ItemTemplate>
        <div class="RotatorItem" style="width: 300px">
            <h2>
                <asp:Label ID="lblTitle" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "title") %>'></asp:Label></h2>
            <div>
                <asp:Label ID="lblShortDesc" Text='<%# DataBinder.Eval(Container.DataItem, "desc")%>' runat="server"></asp:Label>
            </div>
        </div>
    </ItemTemplate>
</telerik:RadRotator>

<telerik:RadGrid ID="RadGrid1" runat="server">
</telerik:RadGrid>
<script type="text/javascript">
    function OnClientItemShown(sender, eventArgs) {
        console.log(1);
        //you can pass the clicked item index as an argument of ajaxRequest();
        $find("RadAjaxManager1").ajaxRequest(eventArgs.get_item().get_index());
    }
</script>

protected void Page_Load(object sender, EventArgs e)

{

    RadRotator1.DataSource = GetData();

    RadRotator1.DataBind();

}

 

private DataTable GetData()

{

    DataTable dt = new DataTable();

    dt.Columns.Add("title", typeof(string));

    dt.Columns.Add("desc", typeof(string));

    dt.Rows.Add("T0", "AAA");

    dt.Rows.Add("T1", "BBB");

    dt.Rows.Add("T2", "CCC");

    return dt;

}

 

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

   //your logic here
     string index = e.Argument;

    RadGrid1.DataSource = new string[] { index, index, index, index, index, index, index };

    RadGrid1.DataBind();

}

I hope this helps.

Regards,
Vessy
Telerik