Multipage + TabStrip = Incorrect Tab Index

[Wesley Davis]

Even the demo doesn't work right in this regard.

Typical (assume 0-based tab indexing):
1) Load page, all looks well, tab (0) selected,
content from tab (0) displayed
2) Click tab (1) - selects tab (1), but
shows content of tab (2)
3) Click last tab - last tab is selected, but
it shows the content of the next to last tab
4) Click tab (0) - selects tab (0), but shows
the content of tab (1)
5) Will not show contents of tab (0),
no matter what

I looked at all kinds of stuff - used code straight from tutorial; it all ends up failing like the description above.

I also tried using Javascript to select the proper tab, but the syntax, assuming the Multipage control ID = MyMultiPage:

__sfMyMultiPage.SetIndex(1)

This ends up with a try-catch error of "[object error]". So, even if I do it manually, HOW? The syntax is straight out of the samples / tutorials. The event that invokes the java script is working as expected, i.e., use "this" parameter's ID to determine the tab & page view index. Why isn't the __sfMyMultiPage object valid, and working with .SetIndex(x)?

I'd rather just use the built-in easy Multipage + Tabstrip method, but as I said above, even the demo doesn't work.-

[Gokul B]

Hi Wesley,

This is well known issue. Whenever, trying to integrate the Multipage with Tabstrip control using "MultipageID" property will not displays the pages in order. To get rid of this issue you can use the one of the following workaround.

* Setting the AutoPost as true for the tabstrip control will resolve this issue.
* Else We can resolve this issue using ClientSideOnItemSelect event of the tabstrip control.Please have a look at the below code snippet.

$script type="text/javascript">

function CallMultipage(Odata)
{
if(Odata.Text=="General")
{
_sfMultiPage1.SetIndex(0);
}
else if(Odata.Text=="Security")
{
_sfMultiPage1.SetIndex(1);
}
else if(Odata.Text=="Privacy")
{
_sfMultiPage1.SetIndex(2);
}
else if(Odata.Text=="Content")
{
_sfMultiPage1.SetIndex(3);
}
else if(Odata.Text=="Programs")
{
_sfMultiPage1.SetIndex(4);
}
else
{
_sfMultiPage1.SetIndex(5);
}
}
$/script>

Call the above "CallMultipage(this)" function in ClientSideOnItemSelect event of the tabstrip control.

However, we have attached our sample for your ready references.

http://websamples.syncfusion.com/samples/Tools.Web/4.4.0.51/F60475/TabStrip_Forum60475/main.htm

Thanks for using syncfusion products.

Regards,
Gokulkumar B

[Wesley Davis]

Thanks. I hadn't thought of that.

I see there's a new version 5 out, and may try that as well.

[Gokul B]

Hi Wesley,

Thanks for your update.

Just a quick note on this issue. Instead of setting the Multipage Pageindex in script, you can also set the "PageViewID" for TabStripItem. Before this setting, please make sure "MultiPageID" of the TabStrip has been set to the appropriate Multipage. Please take a look at the below code snippet.


.

.
.

.


However, we have attached our modified version of our sample for our ready references.

http://websamples.syncfusion.com/samples/Tools.Web/4.4.0.51/F-60475/TabStrip_Forum60475/main.htm

Let us know if you need any other assistance.

Regards,
Gokulkumar B

[shreeram]

Hello Syncfusion Friends

I am hell struggeling in coustomizing the tabstrip with multi page view .Issue is i would like increase a tab size and font of the tab.i t is urgent for my project
Can u please help me as soon as possible .....

Shreeram
Bangalore
09242349646

[Melba Winshia]

Hi Shreeram,

You can increase a tab size and font of the tab by specifying the height and size of font for the tab element through css(.TabTextCell).

.TabTextCell
{

height:15px;
width:15px;
padding-top:3px;
padding-left:1px;
padding-right:1px;
font-family:Verdana;
font-size:15px;
color:Magenta;
background-image:url('../images/tabbg.gif');

}

Please refer the sample in the below link which illustrates the above.

http://websamples.syncfusion.com/samples/Tools.Web/4.4.0.51/F-604751/TabStrip_Forum60475/main.htm

Please try this and let me know if this helps.

Thanks,
Melba