Tabstrip not displaying tab text

[Srinivasa Gokidi]

Hi,

I am using RadTabs. My scenario first two tabs shouldnt have close options and rest of the tabs you can close. I tried to bind the close image button to the tabs. Its binding the close button but text is not displaying. Please see images. Here is my code..

<div>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" ReorderTabsOnSelect="true"
        Orientation="HorizontalTop">
        <Tabs>
            <telerik:RadTab Text="Home" Width="150px" NavigateUrl="Default.aspx">
            </telerik:RadTab>
            <telerik:RadTab Text="My Reports" Width="150px" NavigateUrl="Reports.aspx">
            </telerik:RadTab>
            <telerik:RadTab Text="Task Data" Width="150px" NavigateUrl="Details.aspx">
                <TabTemplate>
                    <div class="textWrapper">
                        <%# DataBinder.Eval(Container, "Text") %>
                    </div>
                    <span class="ie6shim"></span>
                    <img src="Images/delete.gif" style="margin-left: 120px" alt="Close" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" />
                </TabTemplate>
            </telerik:RadTab>
            <telerik:RadTab Text="Site History" Width="150px" NavigateUrl="Diagram.aspx">
                <TabTemplate>
                    <div class="textWrapper">
                        <%# DataBinder.Eval(Container, "Text") %>
                    </div>
                    <span class="ie6shim"></span>
                    <img src="Images/delete.gif" style="margin-left: 120px" alt="Close" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" />
                </TabTemplate>
            </telerik:RadTab>
            <telerik:RadTab Text="Project Management" Width="150px" NavigateUrl="PrjMgmt.aspx">
                <TabTemplate>
                    <div class="textWrapper">
                        <%# DataBinder.Eval(Container, "Text") %>
                    </div>
                    <span class="ie6shim"></span>
                    <img src="Images/delete.gif" style="margin-left: 120px" alt="Close" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" />
                </TabTemplate>
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
</div>

function deleteTab(tabText) {
    alert(tabText);
    var tabStrip = $find("<%# CCOMTabs.ClientID %>");
    var tab = tabStrip.findTabByText(tabText);
    var pageView = tab.get_pageView();

    var tabToSelect = tab.get_nextTab();
    if (!tabToSelect)
        tabToSelect = tab.get_previousTab();

    tabStrip.get_tabs().remove(tab);

    if (tabToSelect)
        tabToSelect.set_selected(true);
}

[Shinu]

Hello Sreenivasa Gokidi,

In addition to adding a DataBinder.Eval statement, you must also explicitly call the DataBind method for the tabs so that the template has access to the properties of the tab.

Sample code :
C#:

protected void Page_Load(object sender, EventArgs e)
   {
       for (int i = 0; i < RadTabStrip1.Tabs.Count; i++)
       {
           RadTabStrip1.Tabs[i].DataBind();
       }
   }

Thanks,
Shinu.