Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadTabStrip Templates and Loading in IFrame

10 Answers 247 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 02 Sep 2008, 06:46 PM
I am have a few issues trying to get a tabstrip to work with a local IFrame on the page.  According to the documentation, if you want to use a Templated Tab then you must perform a databind on the control.  However, what I have noticed is that after I perform a databind, my tab no longer loads the contents according to the Target and NavigationUrl I've specified.  I've also tried using a Hyperlink in my template as well and I could not seem to get this to work. 

I'm sure I'm missing something but I can't figure it out.

Here is the code for the page and code behind...
------------------------- Page ----------------

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
        </telerik:RadScriptManager>
   
    </div>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server">
        <Tabs>
           
        </Tabs>
        <TabTemplate>
        <table>
        <tr>
            <td>
                <asp:HyperLink ID="HyperLink1" Target="IFrm1" NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "Url") %>' Text='<%# DataBinder.Eval(Container.DataItem, "Text") %>' runat="server">HyperLink</asp:HyperLink>
               
            <td>
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="pushpin.gif"/></td>
        </tr>
        </table>       

 </TabTemplate>

    </telerik:RadTabStrip>
    <iframe name="IFrm1" style="width: 1017px; height: 595px"></iframe>
    </form>
</body>
</html>


------------------ Code Behind  ------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RadTabStrip1.DataTextField = "Text";
            RadTabStrip1.DataNavigateUrlField = "Url";
            RadTabStrip1.DataFieldID = "ID";
            RadTabStrip1.DataFieldParentID = "ParentID";
            RadTabStrip1.DataSource = GenerateSiteData();
            RadTabStrip1.DataBind();

        }
    }

    private ArrayList GenerateSiteData()
    {
        ArrayList siteData = new ArrayList();
        //siteData.Add(new SiteDataItem(1, null, "All Sites", ""));
        //siteData.Add(new SiteDataItem(2, 1, "Search Engines", ""));
        //siteData.Add(new SiteDataItem(3, 1, "News Sites", ""));
        siteData.Add(new SiteDataItem(4, 2, "Yahoo", "http://www.yahoo.com"));
        siteData.Add(new SiteDataItem(5, 2, "MSN", "http://www.msn.com"));
        siteData.Add(new SiteDataItem(6, 2, "Google", "http://www.google.com"));
        siteData.Add(new SiteDataItem(7, 3, "CNN", "http://www.cnn.com"));
        siteData.Add(new SiteDataItem(8, 3, "BBC", "http://www.bbc.co.uk"));
        siteData.Add(new SiteDataItem(9, 3, "FOX", "http://www.foxnews.com"));
        return siteData;
    }

}

public class SiteDataItem
{
    private string _text;
    private string _url;
    private int _id;
    private int _parentId;
    public string Text
    {
        get { return _text; }
        set { _text = value; }
    }
    public string Url
    {
        get { return _url; }
        set { _url = value; }
    }
    public int ID
    {
        get { return _id; }
        set { _id = value; }
    }
    public int ParentID
    {
        get { return _parentId; }
        set { _parentId = value; }
    }
    public SiteDataItem(int id, int parentId, string text, string url)
    {
        _id = id;
        _parentId = parentId;
        _text = text;
        _url = url;
    }
    public static List<SiteDataItem> GetSiteData()
    {
        List<SiteDataItem> siteData = new List<SiteDataItem>();
        siteData.Add(new SiteDataItem(1, 0, "All Sites", ""));
        siteData.Add(new SiteDataItem(2, 1, "Search Engines", ""));
        siteData.Add(new SiteDataItem(3, 1, "News Sites", ""));
        siteData.Add(new SiteDataItem(4, 2, "Yahoo", "http://www.yahoo.com"));
        siteData.Add(new SiteDataItem(5, 2, "MSN", "http://www.msn.com"));
        siteData.Add(new SiteDataItem(6, 2, "Google", "http://www.google.com"));
        siteData.Add(new SiteDataItem(7, 3, "CNN", "http://www.cnn.com"));
        siteData.Add(new SiteDataItem(8, 3, "BBC", "http://www.bbc.co.uk"));
        siteData.Add(new SiteDataItem(9, 3, "FOX", "http://www.foxnews.com"));
        return siteData;
    }
}

 

10 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 03 Sep 2008, 08:55 AM
Functionality.zip
Hi Randy,

I have attached a working version of your example. A JavaScript function was required due to a limitation of RadTabStrip. Please check the attached page for more info.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Randy
Top achievements
Rank 1
answered on 03 Sep 2008, 10:31 AM
thanks.  that worked.  Just one more problem.  It works if I click the hyperlink.  If I click the tab itself, then nothing happens.   I guess what I am looking for is a way to show the tab text normally (not a hyperlink) and an image button.   When I click the tab, I want the IFrame updated.   Also, how do I do specify a target frame as part of the databind?    When I get rid of the template and do a simple databind,  I'm not sure how to set the target so the page will not get replaced.

Thanks,
0
Atanas Korchev
Telerik team
answered on 03 Sep 2008, 10:55 AM
Hello Randy,

I believe this is the expected behavior - clicking the hyperlink will navigate whilst clicking the rest of the tab just selects it. If you need an icon you can use the ImageUrl property of the tab. Also you can set the NavigateUrl and Target properties of the tab. For databinding scenarios you can use a binding or hook up to the TabDataBound event. Here is an axample how to use a data binding.
        <telerik:RadTabStrip runat="server" ID="RadTabStrip1">
            <DataBindings>
                <telerik:RadTabBinding TextField="Text" Target="IFrame1" NavigateUrlField="NavigateUrlField" />
            </DataBindings>
        </telerik:RadTabStrip>

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Randy
Top achievements
Rank 1
answered on 03 Sep 2008, 12:03 PM
Ok I think we are very close but I am still not sure how to use the templated tab and have the Iframe loaded.  As soon as I flip on the templated column support then the tab does not work.  If I comment out the template and include the Databindings, it works.  However, that wont for us.  I've included the code below.

Perhaps it would if I describe what I am tring to do.  Maybe I am going about this wrong.  I want to include a "PIN" and Delete button on each tab (after the text).  When a user wants to keep a tab, they would click a PIN image which would change the image from an "unpin" to a "pin" and do a postback to allow me to update the setting on the server.  If they click the "delete" button then the tab would be removed and a postback would occur to allow me to update the setting on the server.  If they click anywhere else inside the tab, the tab would become selected and update the IFrame using the Navigate Url.  

Any suggestions on how best to achieve this?


--------- PAGE ------------------------- 

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="TabStrip_Examples_Functionality_Default" %>

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

html xmlns="http://www.w3.org/1999/xhtml">

<

head id="Head1" runat="server">

<title></title>

</

head>

<

body>

<form id="form1" runat="server">

<script type="text/javascript">

function preventBubble(e)

{

e.cancelBubble =

true;

if (e.stopPropagation)

e.stopPropagation();

}

</script>

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

</div>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" ClickSelectedTab="True">

<%

-- <DataBindings>

<telerik:RadTabBinding TextField="Text" Target="IFrm1" NavigateUrlField="Url" ImageUrlField="ImgUrl"/>

</DataBindings>--

%>

<TabTemplate>

<table>

<tr>

<td>

<asp:Label runat=server ID="Label1" Text='<%# DataBinder.Eval(Container.DataItem, "Text") %>'/>

</td>

<td>

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="pushpin.gif" /></td>

</tr>

</table>

</TabTemplate>

</telerik:RadTabStrip>

<iframe name="IFrm1" style="width: 1017px; height: 195px"></iframe>

</form>

</

body>

</

html>

--- ------------- CODE BEHIND


using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

using

System.Collections.Generic;

public

partial class TabStrip_Examples_Functionality_Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

RadTabStrip1.DataTextField =

"Text";

RadTabStrip1.DataNavigateUrlField =

"Url";

RadTabStrip1.DataFieldID =

"ID";

RadTabStrip1.DataFieldParentID =

"ParentID";

RadTabStrip1.DataSource = GenerateSiteData();

RadTabStrip1.DataBind();

}

}

private ArrayList GenerateSiteData()

{

ArrayList siteData = new ArrayList();

siteData.Add(

new SiteDataItem(2, 0, "Search Engines", "", ""));

siteData.Add(

new SiteDataItem(3, 0, "News Sites", "", ""));

siteData.Add(

new SiteDataItem(4, 2, "Yahoo", "http://www.yahoo.com", "pushpin.gif"));

siteData.Add(

new SiteDataItem(5, 2, "MSN", "http://www.msn.com", "pushpin.gif"));

siteData.Add(

new SiteDataItem(6, 2, "Google", "http://www.google.com", "pushpin.gif"));

siteData.Add(

new SiteDataItem(7, 3, "CNN", "http://www.cnn.com", "pushpin.gif"));

siteData.Add(

new SiteDataItem(8, 3, "BBC", "http://www.bbc.co.uk", "pushpin.gif"));

siteData.Add(

new SiteDataItem(9, 3, "FOX", "http://www.foxnews.com", "pushpin.gif"));

return siteData;

}

}

public

class SiteDataItem

{

private string _text;

private string _url;

private int _id;

private int _parentId;

private string _imgUrl;

public string Text

{

get { return _text; }

set { _text = value; }

}

public string Url

{

get { return _url; }

set { _url = value; }

}

public string ImgUrl

{

get { return _imgUrl; }

set { _imgUrl = value; }

}

public int ID

{

get { return _id; }

set { _id = value; }

}

public int ParentID

{

get { return _parentId; }

set { _parentId = value; }

}

public SiteDataItem(int id, int parentId, string text, string url, string imgUrl)

{

_id = id;

_parentId = parentId;

_text = text;

_url = url;

_imgUrl = imgUrl;

}

public static List<SiteDataItem> GetSiteData()

{

List<SiteDataItem> siteData = new List<SiteDataItem>();

siteData.Add(

new SiteDataItem(1, 0, "All Sites", "", ""));

siteData.Add(

new SiteDataItem(2, 1, "Search Engines", "", ""));

siteData.Add(

new SiteDataItem(3, 1, "News Sites", "", "pushpin.gif"));

siteData.Add(

new SiteDataItem(4, 2, "Yahoo", "http://www.yahoo.com", "pushpin.gif"));

siteData.Add(

new SiteDataItem(5, 2, "MSN", "http://www.msn.com", "pushpin.gif"));

siteData.Add(

new SiteDataItem(6, 2, "Google", "http://www.google.com", "pushpin.gif"));

siteData.Add(

new SiteDataItem(7, 3, "CNN", "http://www.cnn.com", "pushpin.gif"));

siteData.Add(

new SiteDataItem(8, 3, "BBC", "http://www.bbc.co.uk", "pushpin.gif"));

siteData.Add(

new SiteDataItem(9, 3, "FOX", "http://www.foxnews.com", "pushpin.gif"));

return siteData;

}

}

0
Atanas Korchev
Telerik team
answered on 03 Sep 2008, 01:32 PM
TabStrip.zip
Hi Randy,

I have updated the sample project. Please find attached.

Greetings,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Randy
Top achievements
Rank 1
answered on 03 Sep 2008, 02:00 PM
Thanks.  That is exactly what I was after. 

If possible, could you explain how the javascript functions work.  What exactly are you doing? 

Thanks
0
Atanas Korchev
Telerik team
answered on 03 Sep 2008, 02:08 PM
Hello Randy,

The preventBubble prevents DOM event bubbling so clicking the link does not reach the code which handles click in RadTabStrip which normally prevents navigation. Overriding the _click method serves the same purpose but for the image buttons. Both preventBubble and _click are workarounds since RadTabStrip does not automatically detect click events by template controls and simply consumes them.

Subscribing to the OnClientTabSelected event is required to perform navigation when the user clicks outside the link (but no on the image button).

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Randy
Top achievements
Rank 1
answered on 03 Sep 2008, 02:34 PM
Two minor issues.

1.  The tab doesn't get selected when I click the hyperlink.  the frame gets updated though.  If i click on the tab background it does get selected. 

2.  I don't think I really need hyperlinks now that it works correctly when I click on the background.  However, I think you are currently pulling the link from the hyperlink.  What would you recommend that I do here?  Should I add a Label instead?  If so, where would the Url come from?

Thanks.
0
Atanas Korchev
Telerik team
answered on 03 Sep 2008, 02:41 PM
Hi Randy,

To solve both issues you can use a Label instead of hyperlink. You can store the url in the Value property of the tabs which can be accessed using the get_value() client-side method:

RadTabStrip1.DataValueField = "Url";

Navigation should be performed in OnClientTabSelected:

function OnClientTabSelected(sender, args)
{
   var url = args.get_tab().get_value();
   if (url)
   {
       window.open(url, "Iframe1");
   }
}

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
vivek
Top achievements
Rank 1
answered on 11 Nov 2010, 05:59 AM

I am having problem with TAB IFrame.I am having three TAB. Each Tab is having IFrame and src of the IFrame is opening a url of the different server.

 

 

 

Me.IFrame.Attributes("src") = strWebApplLink.Trim()

 

 

Now wat is happening, when i click TAB1,it works properly. Clicking the TAB2 also work fine. But When i repeat this work, I am getting the JavaScript Error(ext-all.js) with height error incorrect. Error comes in form of JavaScript popup."Do You want to debug".when i click NO. It properly open the requested URL .I have no idea to fix this problem.

Your help will be appritiated.Thanks in Advance




Tags
TabStrip
Asked by
Randy
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Randy
Top achievements
Rank 1
vivek
Top achievements
Rank 1
Share this question
or