A TapStrip inside of a TapStrip with Usercontrols

11 posts, 0 answers
  1. Jorge Saa-Gerbier
    Jorge Saa-Gerbier avatar
    22 posts
    Member since:
    Dec 2008

    Posted 07 May 2009 Link to this post

    Good morning,

    I'am a TabStrip inside of other TabStrip both with Usercontrols

    I would like to know how I can advance to the following  Tab of the "external" TabStrip from the "internal" TabStrip.

    Thanks for your help
    Regards
  2. Alex Lawson
    Alex Lawson avatar
    43 posts
    Member since:
    May 2008

    Posted 13 May 2009 Link to this post

    I have a similar setup and use Javascript to create a reference to the object, and then use the client interfaces:

    when creating the tabs, either via the IDE or code, assign a sequential value to the tabs 1,2,3,etc

    Within javascript I would use something similar to:

     
                var tabStrip = $find("<%= RadTabStrip1.ClientID %>"); 
                var selectedValue = parseInt(tabStrip.get_selectedTab().get_value()); 
                var newValue = selectedValue + 1; 
                tabStrip.findTabByValue(newValue.toString()).select(); 

    Obviously you would need to code in validation for the number of tabs you have...
  3. Jorge Saa-Gerbier
    Jorge Saa-Gerbier avatar
    22 posts
    Member since:
    Dec 2008

    Posted 14 May 2009 Link to this post

    Thank you for your answer,
    I'm afraid your answer didn't work for me, I get an error message, it doesn't recognize "TabStrip external" (RadTabStrip1)  from "TabStrip internal" (RadTabStrip2).

    I describe in more detail mon problem:
    I have a .aspx that has a TabStrip "external" ("RadTabStrip1") in which there are 5 tab, each one is a UserControl (.ascx), which represents 5 steps in a procedure, i.e. first, only the first tab is available (enabled), once all the validations have been made, you may go on to the second tab with one button (Next Step), and then it's available (enabled) the second tab.

    This second tab has another TabStrip "internal" ("RadTabStrip2") with seven tabs, all of them valid with no problem, each one of them is same UserControl (.ascx) that show different consulting options to a database, showing different items according to Repeater1_ItemDataBound, adding a LinkButton to each shown item.

    I would like to "simulate" with the LinkButtons (of each shown item) the button (Next Step) of the TabStrip "external" ("RadTabStrip1"). I haven't been able to find the syntaxis of the path of this button.

    Thanks for you help,
    Jorge Saa-Gerbier

  4. Alex Lawson
    Alex Lawson avatar
    43 posts
    Member since:
    May 2008

    Posted 14 May 2009 Link to this post

    Ah I see, I happen to have a project which implements a similar number of levels, this works for me:

    In external tab:

    function GetTabStrip() 
        var ts = returnObjById("<%= mpgContents.ClientID %>"); 
        return ts 
     
    // Cross browser function to return form objects 
     
    function returnObjById( id ) 
        if (document.getElementById) 
            var returnVar = document.getElementById(id); 
        else if (document.all) 
            var returnVar = document.all[id]; 
        else if (document.layers) 
            var returnVar = document.layers[id]; 
        return returnVar; 

    In internal tab:

    function MoveExternalTab() 
        var tabStrip = window.GetTabStrip(); 
        var selectedValue = parseInt(tabStrip.get_selectedTab().get_value());  
        var newValue = selectedValue + 1;  
        tabStrip.findTabByValue(newValue.toString()).select();  

    You can move the 'move tab' code to either external or internal.  If you are using more levels you may need to implement an iframe qualifier to the JS call from the internal statement.

  5. Jorge Saa-Gerbier
    Jorge Saa-Gerbier avatar
    22 posts
    Member since:
    Dec 2008

    Posted 14 May 2009 Link to this post

    Hi Alex

    Thank you very much for your promt answer.

    I can't succeed to do it (I would like to "simulate" with the LinkButtons (of each shown item) the button (Next Step) of the TabStrip "external" ("RadTabStrip1"). I haven't been able to find the syntaxis of the path of this button.)

    Maybe I skipped one important detail, which is, that "TabStrip External" is made by using dynamic pageviews and user controls.

    Each user control contains a "Next Step" button that switches to the next tab.

    It's not clear to me what you mean when you say "tab external" and "tab internal" I guess that the "usercontrols" in each tab. 

    Also, what do you mean by : "<%= mpgContents.ClientID %>", I guess that mpgContents is equivalent to RadMultiPage of the "TabStrip external" ?

    Would it be too much to ask if you could send a complete example?

    Thanks a million for your help.
    Regards

  6. Alex Lawson
    Alex Lawson avatar
    43 posts
    Member since:
    May 2008

    Posted 15 May 2009 Link to this post

    No problem, would it be possible that you could post your code so I can properly see the design patternyou are using?  I could code an example if not, I would need an example of your method of loading pagecontrols, I use several methods each with their seperate loading\scope quirks.
  7. Jorge Saa-Gerbier
    Jorge Saa-Gerbier avatar
    22 posts
    Member since:
    Dec 2008

    Posted 17 May 2009 Link to this post

    Hi Alex

    Finally I could simulate  from the TabStrip "Internal" the button (Next Step) of the TabStrip "external" ("RadTabStrip1") with the LinkButtons (of each shown item).

    using the following syntax:

    In TabStrip "internal" (Etapa02_00.ascx [usercontrol])

     

    function

     

    LinkButton1_ClientClick(id)

     

    {

     

        var ts = window.GetTabStrip();

     

     

     

        var text = "Informaciones Suplementarias";

     

     

        var tab = ts.findTabByText(text);

     

     

        if (!tab)

     

        {

            alert(

    "There is no tab with text \"" + text + "\"");

     

        }

        tab.set_selected(

    true);

     

        tab.set_enabled(

    true);

     

    }

     

    and in TabStrip "external" RadTabStrip1 which is found in Default.aspx

     

    function

     

    GetTabStrip(id)

     

    {

     

        var ts = $find("<%= RadTabStrip1.ClientID %>");

     

     

        return ts;

     

    }

     

     
    That's the way I did it !

    But now I have another problem!

    I cannot update the session["vehiculoSelected"]

    the code in the TabStrip "internal" (Etapa02_00.ascx [usercontrol])
     
    .......
    <asp:Repeater

     

     

        ID="Repeater1"

     

     

        runat="server"

     

     

        OnItemDataBound="Repeater1_ItemDataBound"

     

     

        OnItemCommand="Repeater1_GetSelectedID"

     

     

        >

     

     

     

        <ItemTemplate>

     

     

     

            <asp:HiddenField ID="HiddenID" runat="server" Value='<%# Eval("vh_id_key") %>' />

     

     

     

    .......
            <asp:LinkButton

     

     

                ID="LinkButton1"

     

     

                runat="server"

     

     

                CommandArgument='<%# Eval("vh_id_key") %>'

     

     

                CommandName="Select"

     

     

                CssClass="LinkButton"

     

     

     

                Width="160"

     

     

                Height="30"

     

     

     

                OnClientClick='<%# "LinkButton1_ClientClick(" + Eval("vh_id_key") + " );" %>'

     

     

            />

     

     

     

    [C#:]

     

     

    protected void Repeater1_GetSelectedID(object source, RepeaterCommandEventArgs e)

     

    {

     

        if (e.CommandName.Equals("Select"))

     

        {

     

            HiddenField hiddenID = (HiddenField)e.Item.FindControl("HiddenID");

     

            Session[

    "VehiculoSelect"] = hiddenID.Value;

     

     

        }

    }

     



    Check if you're really registering  Session["VehiculoSelect"], adding in the control LinkButton1 OnClick = "LinkButton1_Click", with an "alert" and really have the value.

     

     

     

     

    protected void LinkButton1_Click(object sender, EventArgs e)

     

    {

        Session[

    "VehiculoSelect"] = ((LinkButton)sender).CommandArgument;

     

        Ficha_Vehiculo.Alert(((

    LinkButton)sender).CommandArgument);

     

    }

     

    It actually goes to the next external tab, without updating the Session["VehiculoSelect"] .


    Thanks a million for your help.
    Regards

  8. Alex Lawson
    Alex Lawson avatar
    43 posts
    Member since:
    May 2008

    Posted 26 May 2009 Link to this post

    Congrats on solving the issue, I have found I have had to change my coding style so much to get the tabstrip working just how I like it - is worth it in the end as it greatly enrichens my web interfaces.

    Regarding the session variable you will probably fins that they are encapsulated to a page\iframe.  Personally I have moved away from session variables due to time out and realease issues, instead I favour hidden fields and use it in my implementation as follows:

    Top level page:

    <asp:HiddenField ID="hdnJobID" runat="server" Value="0" /> 
     
    <script type="text\Javascipt"
     
    function GetJobID() 
      var JobID = returnObjById("<%= hdnJobID.ClientID %>").value 
      return JobID 
     
    function SetJobID(newID) 
      var objJobID = returnObjById("<%= hdnJobID.ClientID %>"
      objJobID = newID 
     
    function returnObjById( id ) 
      if (document.getElementById) 
        var returnVar = document.getElementById(id); 
      else if (document.all) 
        var returnVar = document.all[id]; 
      else if (document.layers) 
        var returnVar = document.layers[id]; 
      return returnVar; 
     
    </script> 
     

    Then in child iframes I can call these methods using the syntax of window.parent.GetJobID or window.frames.<frame ID>.GetJobID()

  9. Jorge Saa-Gerbier
    Jorge Saa-Gerbier avatar
    22 posts
    Member since:
    Dec 2008

    Posted 27 May 2009 Link to this post

    Thank you very much for your promt answer.

    I can't pass the value I'm interested in though. In fact:
    <asp:HiddenField ID="hdnJobID" runat="server" Value="199" />    
     
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">  
    <script type="text/javascript">  
    <!--  
    function GetTabStrip(idSelect)  
    {    
        SetJobID(idSelect);  
    alert("GetJobID() : " + GetJobID() + "  --> idSelect : " + idSelect);      
        var ts = $find("<%= RadTabStrip1.ClientID %>");  
        return ts;  
    }    
     
    function GetJobID()    
    {    
      var JobID = returnObjById("<%= hdnJobID.ClientID %>").value    
      return JobID    
    }    
        
    function SetJobID(newID)    
    {    
      var objJobID = returnObjById("<%= hdnJobID.ClientID %>")    
      objJobID = newID    
    }    
        
    function returnObjById( id )    
    {    
      if (document.getElementById)    
        var returnVar = document.getElementById(id);    
      else if (document.all)    
        var returnVar = document.all[id];    
      else if (document.layers)    
        var returnVar = document.layers[id];    
      return returnVar;    
    }    
     
    //-->          
    </script> 
    </telerik:RadScriptBlock> 

    In the function GetTabStrip(idSelect), I give it the value idSelect in which I'm interested to pass the following Tab,

    The first thing I do is:

    •  SetJobID(idSelect);  Here is the problem, it doesn't keep the value given.

    As a verification  I put the following line:

    • alert("GetJobID() : " + GetJobID() + "  --> idSelect : " + idSelect);      

    Showing the following:

    • GetJobID() : 199   --> idSelect : 32    Note: I changed the value from 0 to 199 to try!

     

    I expected it would show:

    • GetJobID() : 32   --> idSelect : 32

    Once the value is saved correctly, I need to retrive it with GetJobID() from the following tab.

    The truth is I don't kow where the problem might be!

    Thanks a million for your help.
    Regards

  10. Jorge Saa-Gerbier
    Jorge Saa-Gerbier avatar
    22 posts
    Member since:
    Dec 2008

    Posted 27 May 2009 Link to this post

    Hi Alex;

    Excuse me but I just found the mistake:

    function SetJobID(newID)    
    {    
      var objJobID = returnObjById("<%= hdnJobID.ClientID %>")  
      objJobID.value = newID    
    }   

    It says:  
    • objJobID = newID    

    and it should say:
    •   objJobID.value = newID    

    Again, thanks a lot for all your patience and help.

    Jorge Saa-Gerbier

  11. Alex Lawson
    Alex Lawson avatar
    43 posts
    Member since:
    May 2008

    Posted 01 Jun 2009 Link to this post

    Ah mea culpa :-) Coding from memory is not so good.

    Hope all is OK, happy to help.
Back to Top