Welcome Guest Search | Active Topics | Sign In | Register

Tabstrip and multipage/page view Options
Eric
Posted: Monday, February 15, 2010 9:37:41 AM
Rank: Member
Groups: Member

Joined: 2/15/2010
Posts: 25
Hi, just got this product because I really like the ease of putting together these tabs and making multiple panels per tab selected..

I created a tab strip.. I have a top group that I don't want to be selectable. I have a subgroup under that with a list of items/tab items. For testing pursposes I have the first tab item pointed to id=pageview1 and under that I have another sub group where I have that tabitem pointing to an id=pageview2, but when I run the test I click on the top level pointing to PV1 and it goes there, then the sub group tab item and it goes to the correct PV2, but when I then go back to the original it doesn't bring up PV1 again.. a matter of fact no matter what tabitem I select after that it always brings up PV2..

What am I not setting or missing.. do I need some event and manage what tab is selected and hid pageviews?

Thanks
eo_support
Posted: Monday, February 15, 2010 10:36:25 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

That's normal. When you have a parent item and sub group, the logic is:

1. The parent item is used to switch the sub group. It does not switch tabs;
2. The leaf item is used to switch tabs;

Because in your case only PV2 is associated to the leaf item, so that's all you will see.

If you wish to have more control over which tab to show, you can handle the TabStrip's ClientSideOnItem click event and to switch to any tab you want inside that event handler. It will be something like this:

Code: HTML/ASPX
<eo:TabStrip ClientSideOnItemClick="tab_click_handler" ....
.....


Code: JavaScript
function tab_click_handler(e, info)
{
    //Get the tab item
    var item = info.getItem();

    //Check whether this is the first top level item. You
    //will need to change this part to fit your own logic
    if ((item.getLevel() == 0) && (item.getIndex() == 0)
    {
        //Get the MultiPage object
        var multiPage = eo_GetObject("MultiPage1");

        //Select the first PageView
        multiPage.selectPageByIndex(0);
    }
}


The above code uses our client side API. So you may want to take a look of the client side API documentation if you are not already familiar with it.

http://doc.essentialobjects.com/library/1/clientapi_howto.aspx

Hope this helps.

Thanks!
Eric
Posted: Monday, February 15, 2010 10:55:59 AM
Rank: Member
Groups: Member

Joined: 2/15/2010
Posts: 25
Is there some page declaration because I don't there is no property it will let me use that has "ClientSideOnItemClick" I read your link but I'm still confused what to do here.. I see how this can solve my problem but the property doesn't exist.

Thanks
eo_support
Posted: Monday, February 15, 2010 11:00:25 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Make sure you look on the TabStrip control. The property is on the TabStrip control (not on TabItem). You will have a single function to handle the click event for all tabs. You would then check which item was clicked inside your function and act accordingly.

Thanks!
Eric
Posted: Monday, February 15, 2010 11:01:03 AM
Rank: Member
Groups: Member

Joined: 2/15/2010
Posts: 25
ooops.. had it in the wrong statement.. what are the parameters "e" and "info"?
Eric
Posted: Monday, February 15, 2010 11:06:26 AM
Rank: Member
Groups: Member

Joined: 2/15/2010
Posts: 25
Here is the tabstrip statement on the aspx page

<eo:TabStrip ID="TabStrip1" runat="server" ControlSkinID="None" MultiPageID="MultiPage1" ClientSideOnItemClick="tab_click_handler(this, 'info')">


Here's the javascript function and it won't fire
function tab_click_handler(e, info)
{
//Get the tab item
var item = info.getItem();

//Check whether this is the first top level item. You
//will need to change this part to fit your own logic
if ((item.getLevel() == 0) && (item.getIndex() == 0)
{
//Get the MultiPage object
var multiPage = eo_GetObject("MultiPage1");

//Select the first PageView
multiPage.selectPageByIndex(0);
}
}




eo_support
Posted: Monday, February 15, 2010 11:07:51 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You will want to take a look of the API documentation link we provided to you first. Those should contain all information about every property, objects and what they are about. It doesn't make much sense for us to repeat everything that's already there.

Thanks!
Eric
Posted: Monday, February 15, 2010 11:17:06 AM
Rank: Member
Groups: Member

Joined: 2/15/2010
Posts: 25
that's what I've been doing.. I can't find it.. but I'm sure it's here.. going to dig deeper.. this isn't rocket science
Eric
Posted: Monday, February 15, 2010 11:30:02 AM
Rank: Member
Groups: Member

Joined: 2/15/2010
Posts: 25
Ok, I get to this page "http://demo.essentialobjects.com/Default.aspx?id=menu_client_event" that is going to give me some source code.. I don't need the source code for the javascript, I have good examples.. I do a "view page source" from the browser thinking I'm going to see the actual syntax of the call itself on the tab and I get a string of CDATA that makes no sense.. the javascript handles 2 parameters, "e" and "info".. they are evedintely strings.. I just want to see an example of the call from the aspx source page? Where can I find that.. I've dug in your documenation and I can't find it anywhere.. do you have a link? pretty, pretty please can I have a link? - thank you
eo_support
Posted: Monday, February 15, 2010 11:31:58 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
It is not. You can also copy the sample code from the sample project and see how it works (you have the full source code installed on your machine when you install the controls). That way you won't miss the details. For example, in our previous reply we had:

Code: HTML/ASPX
<eo:TabStrip ClientSideOnItemClick="tab_click_handler" ...>
.....
</eo:TabStrip>


However you put in

Code: HTML/ASPX
<eo:TabStrip ClientSideOnItemClick="tab_click_handler(this, 'info')" ....>
.....
</eo:TabStrip>


It doesn't work because ClientSideOnItemClick takes a function name. So details are important. In any case make sure read the doc line by line, the doc won't directly tell you why your code is not working. But it should tell you how it supposes to work. We won't be pointing out your code error every time either because we do not troubleshoot user code. We will be happy to tell you where to look and what to do, but we do not review or debug your code unless the issue is related to a problem with the product.

Thanks!
eo_support
Posted: Monday, February 15, 2010 11:35:15 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Eric wrote:
Ok, I get to this page "http://demo.essentialobjects.com/Default.aspx?id=menu_client_event" that is going to give me some source code.. I don't need the source code for the javascript, I have good examples.. I do a "view page source" from the browser thinking I'm going to see the actual syntax of the call itself on the tab and I get a string of CDATA that makes no sense.. the javascript handles 2 parameters, "e" and "info".. they are evedintely strings.. I just want to see an example of the call from the aspx source page? Where can I find that.. I've dug in your documenation and I can't find it anywhere.. do you have a link? pretty, pretty please can I have a link? - thank you


The whole sample project is installed on your machine (There is a link "Demo Source Code" on the top of the sample page that tells you that). Go to Start -> All Programs -> EO.Web for ASP.NET xxxx -> Live Demo you should see a few shortcuts for the sample project. You can also browse the files in the installtation folder directly. The default location is Program Files\Essential Objects\EO.Web Controls 7.0 (2009).

Thanks
Eric
Posted: Monday, February 15, 2010 11:38:43 AM
Rank: Member
Groups: Member

Joined: 2/15/2010
Posts: 25
nevermind, got that sucker.. I see it API knows the params to send, I just needed to call the method and not worry about the params.. ok.. got it - thanks


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.