Refreshing a grid in a tab from a different tab

[CP]

Hi,

 

I have a multipage control that has 5 tabs. On the 2nd tab Ihave a grid which displays order details and on the 5th tab I have another grid which allows the selection of a product to be inserted into the grid on tab #2. When the product row is double-clicked a RadWindow is popped into which the full order details can be added. On completing the data entry a button then inserts the added data into the datatable which is the source of the grid on tab #2 and executes a "CloseAndRebind" script in the window code-behind e.g.:

protected void btnInsertClicked(object sender, EventArgs e)
{
    DataSet ds = Session["OrdersTables"] as DataSet;
    DataRow nr = ds.Tables["LineItems"].NewRow();

    nr["LineItem_Id"] = GetNewItemId(23);
    ...
    .... data inserted into DataRow
    ...
    ds.Tables["LineItems"].Rows.Add(nr);

    // update the session
    Session.Remove("OrdersTables");
    Session.Add("OrdersTables", ds);

    ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind();", true);
}

 

This script comes from one of your examples :

function CloseAndRebind(args) {
    GetRadWindow().BrowserWindow.refreshGrid(args);
    GetRadWindow().close();
}

 

which bubbles back to the parent page and triggers this AJAX request to execute a ReBind on the grid in tab #2

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" DefaultLoadingPanelID="mainLoadingPanel">
    <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="grid2LoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
</telerik:RadAjaxManager>

 

The AJAX request triggers the NeedDataSource event of the grid on tab #2 to re-load the DataSource however on switching to tab #2 the grid was still showing the old data. At this point clicking the refresh option top-right of the grid the NeedDataSource event is again triggered and this time the new line is displayed.

I'd like the AJAX request to switch to tab #2 and then issue the refresh so coded:

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    if (e.Argument == "Rebind")
    {
        // swap back to the order lines tab then refresh it
        RadTab rt = RadTabStrip1.Tabs.FindTabByText("Order Items");
        rt.Selected = true;

        RadGrid1.MasterTableView.SortExpressions.Clear();
        RadGrid1.MasterTableView.GroupByExpressions.Clear();
        RadGrid1.Rebind();
    }
}

 

However the swap back to tab #2 fails to happen and the grid is still not refreshed.

[Konstantin Dikov]

Hi,

This seems to be a problem with the AJAX configuration and I would suggest that you enable the AJAX for the RadTabStrip and the RadMultiPage as documented in the following help topic:

• http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/troubleshooting/tips-and-tricks-for-ajaxifying-specific-controls#ajaxifying-radmultipage-and-radtabstrip-controls

Note that with the custom AJAX requests through the RadAjaxManager you will have to include the manager in the settings, so it could update the RadTabStrip and the RadMultiPage. However, this approach will require to remove the AJAX settings for particular controls within the RadMultiPage.

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[CP]

Hi Konstantin,

I changed my AjaxManager to be:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" DefaultLoadingPanelID="mainLoadingPanel">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
            </UpdatedControls>
         </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

 

and I also found i had not set the SelectedIndex on the MultiPage in my AjaxRequest.

The tab is now displayed correctly after the user adds an item however this change has led to another problem. The CSS that places the PageView to the right of my TabStrip (Vertical, left-aligned ) is no longer working and the PageView now appears below the TabStrip instead of to the right.

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1"
    Skin="Glow" Width="120px" Height="355px" SelectedIndex="0" Orientation="VerticalLeft">
    <Tabs>
        <telerik:RadTab PageViewID="PageView1" Font-Size="Small" Text="Basic Data"></telerik:RadTab>
        <telerik:RadTab PageViewID="PageView2" Font-Size="Small" Text="Order Items"></telerik:RadTab>
        <telerik:RadTab PageViewID="PageView3" Font-Size="Small" Text="Terms &<br>Comments"></telerik:RadTab>
        <telerik:RadTab PageViewID="PageView4" Font-Size="Small" Text="More Info"></telerik:RadTab>
        <telerik:RadTab PageViewID="PageView5" Font-Size="Small" Text="Add a new Item"></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="innerMultiPage">

    <telerik:RadPageView runat="server" ID="PageView1">
        <div class="orderData">
            Order specific data here .............
        </div>
    </telerik:RadPageView>
</telerik:RadMultiPage>

 

.innerMultiPage {
    display: inline-block;
    *display: inline;
    zoom: 1;
    position: relative;
    margin-bottom: -3px;
}

 

Any suggestions as to why this has stopped working ??

I can send you a sample but couldn't attach a zip file to this post.

Thanks, Kyle

[CP]

Hi again,

 

I found the UpdatePanelRenderMode="Inline" setting for the AjaxUpdatedControl entries for the additions I made to my Ajaxmanager and the PageViews are back where they belong.