Update RadPanel on Grid row click with partial postback

Question

I'm working on a project with multiple RadGrids and RadHtmlCharts, and the page is laid out with two RadSplitters. The top splitter contains two RadGrids, the bottom splitter contains three RadHtmlCharts.

Code below (code not relevant to the question removed for cleaner reading):

<telerik:RadAjaxManagerProxy ID="AjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Tasks">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="InterviewProgressPieChartErrorMessage" />
                <telerik:AjaxUpdatedControl ControlID="InterviewProgressPanePieChart" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

<telerik:RadSplitter ID="GridStorageSplitter" runat="server" Orientation="Vertical" Width="920" LiveResize="false" CssClass="radSplitter" BorderStyle="None" BorderSize="0">

    <telerik:RadPane ID="NotificationsPane" runat="server" CssClass="gridpaneleft" MinWidth="250">
        <telerik:RadGrid ID="Notifications" runat="server" AllowSorting="True" CellSpacing="0" DataSourceID="EventLog" AutoGenerateColumns="False" GridLines="None" CssClass="gridgrid">
        </telerik:RadGrid>
    </telerik:RadPane>

    <telerik:RadSplitBar ID="GridSplitter" runat="server">
        <AdjacentPanesNames LeftPaneName="NotificationsPane" RightPaneName="TasksPane" />
    </telerik:RadSplitBar>

    <telerik:RadPane ID="TasksPane" runat="server" CssClass="gridpaneright" MinWidth="400">
        <telerik:RadGrid ID="Tasks" DataSourceID="JobsInfo" runat="server" AutoGenerateColumns="False" CellSpacing="0" GridLines="None" CssClass="gridgrid">

            <ClientSettings EnablePostBackOnRowClick="true">
                <Selecting AllowRowSelect="true" EnableDragToSelectRows ="false"/>
                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
            </ClientSettings>

            <MasterTableView DataSourceID="JobsInfo" AllowMultiColumnSorting="True" HierarchyLoadMode="Client" ShowHeader="false">
            </MasterTableView>

        </telerik:RadGrid>
    </telerik:RadPane>

</telerik:RadSplitter>

<telerik:RadSplitter ID="GraphStorageSplitter" runat="server" Orientation="Vertical" Width="920" Height="400" LiveResize="false" CssClass="radSplitter" BorderStyle="None" BorderSize="0">

    <telerik:RadPane ID="JobNumbersPane" runat="server" Width="70" MinWidth="60">
        <asp:Table ID="JobNumbersTable" runat="server" CssClass="topmargin7"></asp:Table>
    </telerik:RadPane>

    <telerik:RadSplitBar ID="GraphSplitter1" runat="server">
        <AdjacentPanesNames LeftPaneName="JobNumbersPane" RightPaneName="InterviewStartTimesGraphPane" />
    </telerik:RadSplitBar>

    <telerik:RadPane ID="InterviewStartTimesGraphPane" runat="server" Width="30%" MinWidth="280">
        <telerik:RadHtmlChart ID="interviewStartTimes" runat="server" Legend-Appearance-Visible="false"></telerik:RadHtmlChart>
    </telerik:RadPane>

    <telerik:RadSplitBar ID="GraphSplitter2" runat="server">
        <AdjacentPanesNames LeftPaneName="InterviewStartTimesGraphPane" RightPaneName="ReferralsChartPane" />
    </telerik:RadSplitBar>

    <telerik:RadPane ID="ReferralsChartPane" runat="server" Width="30%" MinWidth="200">
        <telerik:RadHtmlChart ID="referralsChart" runat="server" OnLoad="referralsChart_Load"></telerik:RadHtmlChart>
    </telerik:RadPane>

    <telerik:RadSplitBar ID="GraphSplitter3" runat="server">
        <AdjacentPanesNames LeftPaneName="ReferralsChartPane" RightPaneName="InterviewProgressPane" />
    </telerik:RadSplitBar>

    <telerik:RadPane ID="InterviewProgressPane" runat="server" Width="30%" MinWidth="200">

        <asp:Label ID="InterviewProgressPieChartErrorMessage" runat="server" Text="No Interviews have been sent out for the selected job." Visible="false"></asp:Label>
        <telerik:RadHtmlChart runat="server" ID="InterviewProgressPieChart" Visible="true" OnLoad="loadInterviewProgressPieChart">
        </telerik:RadHtmlChart>
    </telerik:RadPane>

</telerik:RadSplitter>

I'm trying to add functionality to the page to load InterviewProgressPieChart with relevant data when the user clicks on a row in the Tasks RadGrid. It works, but the post back reloads the entire page (including the master page), which I would like to avoid.
I have also tried using RadAjaxManager, but it still reloads the entire page on post back (by design, it seems).

Wrapping the RadSplitters in a RadAjaxPanel allows me to only load the contents of that panel on post back, but you can't put a RadAjaxPanel within a RadSplitter, and I don't know how to put only the relevant Grid/Chart in the AjaxPanel.

score 0 · Answer 1 · answered Jun 11 '13 at 14:09

0

You need a setting whose initiator (AjaxControlID) is the grid (Notifications) and in the updated controls you have the InterviewProgressPieChart chart:

    <telerik:AjaxSetting AjaxControlID="Notifications">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="InterviewProgressPieChart" />
        </UpdatedControls>
    </telerik:AjaxSetting>

That is, assuming your grid posts the page automatically on row click.

answered Jun 11 '13 at 14:09

rdmptn

5,413
1
16
29

I'm not sure how that is any different than what I have already tried (except Tasks is the AjaxControlID). This still reloads the entire page. – raumkrieger Jun 11 '13 at 14:56
It differs in the sense that it captures postback events from a different control. If things are not working with this perhaps you have some JS error. Also, try using regular ASP:UpdatePanels instead of the AJAX settings (one around the grid with ID Notifications and one around the InterviewProgressPieChart HtmlChart control) to see if this will change things. If it doesn't - then the grid is not the postback initiator and you need to find which control/code is in order to capture it. – rdmptn Jun 17 '13 at 16:15

Update RadPanel on Grid row click with partial postback

1 Answers1