TabStrip Client-side click event doesn't load content

[Shawn]

Hello,

I have a tabstrip that is created dynamically.  There can be several tabs with child tabs in the tabstrip.  When the user clicks on a specific tab a web user control is loaded into the selected tab.  Inside one of these user controls I have a radgrid that has a grid template column with a radbutton.  When the user clicks on this button I want to select a different tab and load its content based on the tab value (the tab value contains the location of the web user control that will be loaded into the tab).

I tried to do this from server-side code, but I was not able to get that to work.  So, now I'm trying to get it to work using client-side code.  The following javascript code almost works.  It does select the tab I want to select, but it will not load the contents of the tab even though the click event is being called.

Here's my tabstrip HTML that is located inside content placeholder of a master page:

<asp:Content ID="tabContent" ContentPlaceHolderID="cphTabStrip" runat="server">
    <telerik:RadTabStrip ID="rtabstripTabs" runat="server" OnTabClick="rtabstripTabs_TabClick" ShowBaseLine="true" OnClientTabSelected="OnClientTabSelected"
        EnableEmbeddedSkins="false" AutoPostBack="False" MultiPageID="rpageviewUserControl">
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="rmpTabStrip" runat="server" SelectedIndex="0">
    </telerik:RadMultiPage>

    <telerik:RadScriptBlock ID="rsbTabs" runat="server">
        <script type="text/javascript">
            function GetTabStrip() {
                var tabstrip = $find("<%= rtabstripTabs.ClientID %>");

                if (tabstrip) {
                    var tab = tabstrip.findTabByValue("Modules/EspsMT/Inventory/wucInventoryAddEditFilters.ascx");
                    tab.click();
                }
            }
        </script>
    </telerik:RadScriptBlock>
</asp:Content>

 Here's the code in the web user control that triggers the GetTabStrip() function:

                <telerik:GridTemplateColumn UniqueName="Test" Resizable="false">
                    <ItemTemplate>
                        <telerik:RadButton ID="btnTest" runat="server" OnClientClicked="btnTest_Clicked" Text="View Pending" ></telerik:RadButton>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>

<telerik:RadScriptBlock ID="rsbInventoryPending" runat="server">
    <script type="text/javascript">
        function btnTest_Clicked(sender, args) {
            window.parent.GetTabStrip();
            return false;
        }
    </script>
</telerik:RadScriptBlock>

I tried using __PostBack() to trigger a postback.  This does load the content; however, it loads the web user control twice and causes a page flash.

Can anyone help me figure out how to do this the proper way?  I'd much rather do this on the server side because then I can set session variables that can be used by the second web user control content.

 Thanks.

[Aneliya Petkova]

Hi Shawn,

Try the following:

1. In the Web User control - on the RadButton, add server-side click handler:

<telerik:RadButton ID="btnTest" runat="server" Text="View Pending" OnClick="btnTest_Click" ></telerik:RadButton>

In this handler(which is in the code behind of your user control) you can find the RadTabStrip and RadMultiPage controls on your master page with this code:

protected void btnTest_Click(object sender, EventArgs e)
{
    RadTabStrip tabstrip = ((RadTabStrip)this.Page.Master.FindControl("RadTabStrip1"));
    RadMultiPage multiPage = ((RadMultiPage)this.Page.Master.FindControl("RadMultiPage1"));

    RadTab tab = tabstrip.FindTabByText("Scheduling");


    if (tab != null)
    {
        tab.Selected = true;
        tab.PageView.Selected = true;
    }
}

If the found tab exists, you can select it and select its PageView.
I made you a short video showing the result: http://screencast.com/t/yaQx0jE6

Please also note that you can do the same if the RadTabStrip is in a ContentPage, not on the Master(but instead of this.Page.Master, you must change it to this.Parent).

Regards,
Aneliya Petkova
Telerik

[Shawn]

Hello Aneliya,

Thanks for your reply! 

I tried implementing your suggestion, but I've run into an issue with the PageView.  I get an exception "Object reference not set to an instance of an object" when the code hits the line: "tab.PageView.selected = true;"  I stepped through the code to find that the tab is found on the page, but the PageView for the tab returns null.

 Here's the code I use to assign the user control to a tab.  It is based on some examples I found on Telerik forums:

 

        protected void showTab(string filePath)
        {
                       RadPageView pageView = new RadPageView();
                        pageView.ID = filePath.Replace("/", "").Replace("~", "").Replace(".ascx", "") + "_PV";
                        rmpTabStrip.PageViews.Add(pageView);
                        LoadMyUserControl(filePath, pageView);
        }

private void LoadMyUserControl(string controlName, Control parent)
        {
            parent.Controls.Clear();
            UserControl ctrl = (UserControl)LoadControl(controlName);
            string userControlID = controlName.Split('.')[0];
            userControlID = userControlID.Replace("/", "").Replace("~", "") + "_UC";
            ctrl.ID = userControlID;
            parent.Controls.Add(ctrl);
        }

 The "showTab" method is called when a tab is clicked.

Is there something wrong with the way I load the user controls into the page view and the tabstrip that is causing the tab's page view to be null?  Thanks.

 

[Aneliya Petkova]

Hi Shawn,

The best place to add user controls to the controls collection of the RadPageView is in the PageViewCreated server-side event. Please check the following help article for more information:

• http://docs.telerik.com/devtools/aspnet-ajax/controls/tabstrip/radmultipage/defining-the-structure-in-the-code-behind

Regards,
Aneliya Petkova
Telerik

[Shawn]

RadTabStrip tabstrip = ((RadTabStrip)this.Page.Master.FindControl("RadTabStrip1"));

RadMultiPage multiPage = ((RadMultiPage)this.Page.Master.FindControl("RadMultiPage1"));

Hi Aneliya,

I did as you suggested and moved the user control addition to the PageViewCreated as the article indicated.  That caused another issue where I could not use the following code that you had suggested because they would return null, but I found a workaround for it.

 

Unfortunately, I'm still getting PageView as null.  I've attached my code as .png files to this post for you.  I don't understand why PageView returns null no matter what I do.  Thanks.

[Aneliya Petkova]

Hello Shawn,

Unfortunately I am not sure I understand your scenario exactly. So I will need a sample project with dummy data, where I can inspect your scenario and observe the issue that you have. Attached you may find a sample project I made for you(you just need to add you Telerik dll's in the bin folder and start Default.aspx). Please test it and modify it in order to show me your implementation and the problem you are experiencing.

P.S: As this is a forum post you are not allowed to attach .zip files. As an alternative you can use one of the sites for free online storage or just open new support ticket.

Regards,
Aneliya Petkova
Telerik

[Shawn]

Hello Aneliya,

Thank you for the sample project.  Your code and mine look almost identical.  The only difference I see is that you have two parent tabs ("Corporate" and "Personal"), and your code works perfectly in this situation.  In my project I have two rows of tabs (child tabs).  For example, under the "Corporate" tab I might have two other child tabs called "Personnel" and "FAQ" while under the "Personal" tab I may have "Documents" and "Information". 

My code doesn't work, for example, when I click on a button inside the user control for Personnel to go to the FAQ tab, or when I click on a button inside Documents to go to the Information tab.  For some reason the PageView is lost (is null) for the child tabs.

I'm not sure how to modify your code to add the child tabs.  In my project the tab structure is done through a table in a database.

Thanks,

Shawn

[Aneliya Petkova]

Hi Shawn,

This scenario could be also achieved using binding to a data source for the RadTabStrip. Attached you may find the project I sent you previously, but modified to use a data source.  Please note that for every tab, you must set its PageViewID(I am doing this in the TabDataBound server-side event). Please inspect and test the project and let me know if you need further assistance or questions.
http://docs.telerik.com/devtools/aspnet-ajax/controls/tabstrip/radmultipage/integrating-with--radtabstrip

Regards,
Aneliya Petkova
Telerik