A TapStrip inside of a TapStrip with Usercontrols

[Jorge Saa-Gerbier]

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

[Alex Lawson]

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...

[Jorge Saa-Gerbier]

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

[Alex Lawson]

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.

[Jorge Saa-Gerbier]

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

[Alex Lawson]

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.

[Jorge Saa-Gerbier]

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

[Alex Lawson]

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()

[Jorge Saa-Gerbier]

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

[Jorge Saa-Gerbier]

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

[Alex Lawson]

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

Hope all is OK, happy to help.