This is a migrated thread and some comments may be shown as answers.

RadTab created dynamically create the Tab for first time but afterwards last tab state is maintained for each tab . Clicking other tab doesn't show

5 Answers 216 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
vikash
Top achievements
Rank 1
vikash asked on 14 Apr 2019, 04:30 AM

Hi , 

I have a RadTabStrip which is to generate tab dynamically . Each tab load same usercontrol but with different data . My issue is that When the tab is created for first time it loads the data but when I toggle to earlier tab , the data reflected is of last created tab . This is basically due to creation of RadMultiPage having same id . 

How to overcome this issue . 

My code are as follow ..

 

<asp:Content ID="Content1" ContentPlaceHolderID="FormPlaceHolder" runat="server">
    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" Skin="Metro">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerMpInfo" runat="server">
        <AjaxSettings>            
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
     <script type="text/javascript">
         /* <![CDATA[ */
            function onTabSelecting(sender, args) {
                if (args.get_tab().get_pageViewID()) {                   
                    args.get_tab().set_postBack(false);
                }               
            }
         /* ]]> */
        </script>

    <telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip1" SelectedIndex="0"
        runat="server" MultiPageID="RadMultiPage1" Skin="Windows7" Width="100%" Align="Justify"
        OnTabClick="RadTabStrip1_TabClick">
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"  OnPageViewCreated="RadMultiPage1_PageViewCreated">
    </telerik:RadMultiPage>
</asp:Content>

 

 

CodeBehind cs file is ..

 

if (!Page.IsPostBack)
            {
                try
                {
                   
                    if(mpCollection.Count() > 0 && this.Master.IdProgram.HasValue)
                    {
                        //  AddTab("ΣMPs");
                        using (Context idcardContext = new Context())
                        {
                            foreach (string mp in mpCollection)
                            {
                                MP currentMp = MPTestBusiness.GetMPById(idcardContext, Int32.Parse(mp));

                                mpListCollection.Add(currentMp);
                                AddTab(currentMp);
                            }
                            AddPageView(RadTabStrip1.FindTabByText(mpListCollection[0].Code));
                            
                        }            
                    }

             }
                catch (Exception ex)
                {
                    Log.Error(ex);
                    this.Master.DisplayErrorAlert(MessageConstants.GenericError);
                }

 

  private void AddTab(MP mp)
        {
            RadTab tab = new RadTab();
            tab.Text = mp.Code;
            RadTabStrip1.Tabs.Add(tab);            
        }

 

  protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            
            string userControlName = "../UserControl/MPInfoControl.ascx";
            Control userControl = Page.LoadControl(userControlName);
            userControl.ID = "userControl_" + e.PageView.ID;         
          
            if(!e.PageView.Controls.Contains(userControl))
            e.PageView.Controls.Add(userControl);
        }
        private void AddPageView(RadTab tab)
        {
            if(tab != null)
            {          
            RadPageView pageView = new RadPageView();
            pageView.ID = tab.Text;
                tab.PageViewID = pageView.ID;
                RadMultiPage1.PageViews.Add(pageView);

            }
        }
       
        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            if (e.Tab != null)
            {
                AddPageView(e.Tab);
                e.Tab.PageView.Selected = true;
            }
        }

 

 

 

I have followed the following demo 

https://demos.telerik.com/aspnet-ajax/tabstrip/examples/multipage/dynamic-pageview-creation/defaultcs.aspx

 

however here different usercontrol has been used for loading in different tab but in my case same usercontrol has to be loaded . Going further I will be adding another user control for specific values . 

5 Answers, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 26 Apr 2019, 07:40 AM
Hi Vikash,

From the code you have shared I can how the Tabs and MultiPageViews are created, but I am unable to understand how the data is being populated within the UserControl. How does it know, when to change and to what?

I have created a sample which is somewhat replicates the scenario you have described an attached it to my response. This sample has a MasterPage, a Content Page and a WebUserControl. When the page is loading, 5 Tabs are being generated, the user control is re-used for all the Tabs/PageViews but the Control inside WebUserControl loads different Data depending on the PageViews ID.

You can take inspect the code to get a better understanding how it's is done and try implementing it for your project. If the issue still persist, I advise that you modify my sample to replicate the issue and send it back to us in a formal support ticket.

Kind regards,
Attila Antal
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Hans
Top achievements
Rank 1
answered on 16 Mar 2021, 09:11 AM

Hi Attila,

I have a similar problem. Can you share your sample?

Kind regards,

Pieternel

 

 

0
Attila Antal
Telerik team
answered on 16 Mar 2021, 01:05 PM

Hi Pieternel,

I have attached a Visual Studio Sample to my previous message. Download the sample and test it out.

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Hans
Top achievements
Rank 1
answered on 16 Mar 2021, 01:46 PM

Hi Attila, that's the problem. I cannot see your sample in your previous message. See my screendump.

 

Regards!

0
Attila Antal
Telerik team
answered on 16 Mar 2021, 02:40 PM

Hi Hans,

Seems there was a Sync issue between the front and back-end. Try again, the attachment will be available now.

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TabStrip
Asked by
vikash
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Hans
Top achievements
Rank 1
Share this question
or