This is a migrated thread and some comments may be shown as answers.

Dynamically generated tab closes on click

2 Answers 111 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

Daniel asked on 09 May 2012, 04:40 PM

Hi,

Basically I have a static tab in my page (not closable) with a radgrid in it. On a row double click, I create a tab in javascript, select the tab and generate a user control in it (a detail grid). So far so good, it works great, however theres a wierd behavior with a newly generated tab under certain conditions.

Here is the javascript part of my code:

<script type="text/javascript">

var tabStrip1;

function OnClientLoad() {

tabStrip1 = $find('<%= RadTabStrip1.ClientID %>');

for (var i = 0; i < tabStrip1.get_tabs().get_count(); i++) {

if (i != 0) {

AttachCloseImage(tabStrip1.get_tabs().getItem(i), "../../Images/delete.gif");

}

function addNewTab(sender, eventArgs) {

//Va chercher l'information du row que j'ai de besoin

var dataItem = $get(eventArgs.get_id());

var grid = sender;

var MasterTable = grid.get_masterTableView();

var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];

var cell = MasterTable.getCellByColumnUniqueName(row, "element_couvert");

var value = cell.innerHTML;

//add le tab

var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

var tab;

tab = tabStrip.findTabByText(value);

if (tab) {

tab.click();

} else {

var tab = new Telerik.Web.UI.RadTab();

tab.ID = cell.innerHTML.replace("/", "").replace(" ", "");

tab.set_text(value);

tabStrip.trackChanges();

tabStrip.get_tabs().add(tab);

tabStrip.commitChanges();

tab.click();

AttachCloseImage(tab, "../../Images/delete.gif");

}

function CreateCloseImage(closeImageUrl) {

var closeImage = document.createElement("img");

closeImage.src = closeImageUrl;

closeImage.alt = "Fermer cet onglet";

return closeImage;

}

function AttachCloseImage(tab, closeImageUrl) {

var closeImage = CreateCloseImage(closeImageUrl);

closeImage.AssociatedTab = tab;

closeImage.onclick = function(e) {

if (!e) e = event;

if (!e.target) e = e.srcElement;

deleteTab(tab);

e.cancelBubble = true;

if (e.stopPropagation) {

e.stopPropagation();

}

return false;

}

tab.get_innerWrapElement().appendChild(closeImage);

}

function deleteTab(tab) {

var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

var multiPage = $find("<%= RadMultiPage1.ClientID %>");

var pageView = tab.get_pageView();

var tabToSelect = tab.get_nextTab();

if (!tabToSelect)

tabToSelect = tab.get_previousTab();

tabStrip.trackChanges();

tabStrip.get_tabs().remove(tab);

tabStrip.commitChanges();

multiPage.trackChanges();

multiPage.get_pageViews().remove(pageView);

multiPage.commitChanges();

if (tabToSelect)

tabToSelect.set_selected(true);

}

function onTabSelecting(sender, args) {

if (args.get_tab().get_pageViewID()) {

args.get_tab().set_postBack(false);

}

</script>

code behind:

Protected Sub RadMultiPage1_PageViewCreated(ByVal sender As Object, ByVal e As RadMultiPageEventArgs) Handles RadMultiPage1.PageViewCreated

If e.PageView.ID <> "RadPageView5" Then

Dim userControlName As String = "/Commun/UserControls/DetailElementCouvert.ascx"

Dim ctrl As Control

Dim userControl As Fede.Web.Sifa.DetailElementCouvert

ctrl = LoadControl(userControlName)

userControl = CType(ctrl, Fede.Web.Sifa.DetailElementCouvert)

userControl.ID = e.PageView.ID & "_userControl"

userControl.Strategie = e.PageView.ID.Trim()

userControl.LaDate = CDate(Master.fJour.SelectedDate)

e.PageView.Controls.Add(userControl)

End If

End Sub

Private Sub AddPageView(ByVal tab As RadTab)

Dim pageView As RadPageView = New RadPageView

pageView.ID = tab.Text

RadMultiPage1.PageViews.Add(pageView)

RadMultiPage1.SelectedIndex = RadMultiPage1.PageViews.Count - 1

pageView.CssClass = "pageView"

tab.PageViewID = pageView.ID

End Sub

Protected Sub RadTabStrip1_TabClick(ByVal sender As Object, ByVal e As RadTabStripEventArgs) Handles RadTabStrip1.TabClick

If String.IsNullOrEmpty(e.Tab.PageViewID) Then

AddPageView(e.Tab)

e.Tab.PageView.Selected = True

e.Tab.Selected = True

End If

End Sub

html:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Orientation="HorizontalTop"

SelectedIndex="0" MultiPageID="RadMultiPage1" OnClientLoad="OnClientLoad" OnClientTabSelecting="onTabSelecting">

<Tabs>

<telerik:RadTab Text="Information élément couvert" Selected="True" PageViewID="RadPageView5">

<TabTemplate>

<div class="textWrapper">

Information élément couvert

</div>

</TabTemplate>

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">

<telerik:RadPageView runat="server" ID="RadPageView5">

<telerik:RadGrid ID="RadGrid1" Culture="French (Canada)" runat="server" GroupingEnabled="False"

ShowStatusBar="True" ClientSettings-ClientEvents-OnRowDblClick="addNewTab" ClientSettings-ClientEvents-OnCommand="OnCommand">

<MasterTableView AllowFilteringByColumn="true" AllowPaging="True" AllowSorting="true"

AutoGenerateColumns="False" PageSize="16" CommandItemDisplay="Top">

<CommandItemTemplate>

<div style="float: right">

<telerik:RadButton ID="DownloadPDF" runat="server" Text="Confirmer action sur JV" />

<telerik:RadButton ID="RadButton5" runat="server" Text="Confirmer action sur FT" />

<telerik:RadButton ID="RadButton1" runat="server">

<Icon PrimaryIconCssClass="rbRefresh" PrimaryIconLeft="8" PrimaryIconTop="4" />

</telerik:RadButton>

</div>

</CommandItemTemplate>

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Bottom" />

<PagerStyle AlwaysVisible="True" Mode="Slider" />

<ItemStyle Wrap="false" HorizontalAlign="Right" VerticalAlign="Middle" />

<AlternatingItemStyle Wrap="false" HorizontalAlign="Right" VerticalAlign="Middle" />

<Columns>

<telerik:GridBoundColumn DataField="etat_bloc" HeaderText="État du bloc" UniqueName="etat_bloc" FilterControlWidth="70%" DataType="System.String">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="strategie" HeaderText="Stratégie" UniqueName="strategie" FilterControlWidth="70%" DataType="System.String">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"/>

<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="element_couvert" HeaderText="Code élément couvert" UniqueName="element_couvert" FilterControlWidth="70%" DataType="System.String">

<HeaderStyle HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="date_echeance" DataFormatString="{0:d}" HeaderText="Date échéance" FilterControlWidth="70%"

UniqueName="date_echeance" DataType="System.DateTime">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="nomi_designe" DataFormatString="{0:N0}" HeaderText="Nominal utilisé ($)" FilterControlWidth="70%"

UniqueName="nomi_designe" Datatype="System.Int64">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="nbre_designe" DataFormatString="{0:N0}" HeaderText="Nombre de désignations" FilterControlWidth="70%"

UniqueName="nbre_designe" Datatype="System.Int64">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="nomi_disponible" DataFormatString="{0:N0}" HeaderText="Nominal utilisable ($)" FilterControlWidth="70%"

UniqueName="nomi_disponible" Datatype="System.Int64">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="taux_utilis_act" HeaderText="Taux utilis. actuel (%)" FilterControlWidth="70%"

UniqueName="taux_utilis_act" DataFormatString="{0:N2}" DataType="System.Double">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="nomi_total_cour" DataFormatString="{0:N0}" HeaderText="Nominal courant ($)" FilterControlWidth="70%"

UniqueName="nomi_total_cour" Datatype="System.Int64">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="nomi_total_prec" DataFormatString="{0:N0}" HeaderText="Nominal précédent ($)" FilterControlWidth="70%"

UniqueName="nomi_total_prec" Datatype="System.Int64">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ecart_absolu" DataFormatString="{0:N0}" HeaderText="Écart absolu ($)" FilterControlWidth="70%"

UniqueName="ecart_absolu" Datatype="System.Int64">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ecart_pct" HeaderText="Écart (%)" UniqueName="ecart_pct" FilterControlWidth="70%"

DataFormatString="{0:N2}" DataType="System.Double">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

<telerik:GridButtonColumn Text="Détail" UniqueName="D" ItemStyle-HorizontalAlign="Center"

ButtonType="LinkButton" CommandName="CustomDetail" />

</Columns>

<PagerStyle AlwaysVisible="True" Mode="Slider" />

</MasterTableView>

<ClientSettings Scrolling-UseStaticHeaders="false">

<Scrolling AllowScroll="True" UseStaticHeaders="true" ScrollHeight="" />

<Resizing AllowResizeToFit="true" AllowColumnResize="true" EnableRealTimeResize="true" />

</ClientSettings>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

</telerik:RadPageView>

</telerik:RadMultiPage>

Here is my problem: when I have no dynamic tab created, and I do an action on the grid in my static tab (be it using a filter, or changing the page in the pager), the first time I try to create a tab it automatically closes itself. However, if i try to create it again, it will work. Also, if i already have a dynamic tab created, this behavior seems to not happen and things are functionning properly.

Also, I have tried to not force a click in my javascript, and click it manually instead. The same thing happens, the tab is created, and when I click on it (and it tries to create the pageview and load the user control), it will close itself. So I can be sure that this bahavior seems to happen when the click action is made upon the tab.

Again, I want to say that this code is working as expected in most cases, except for this very specific case (when using filter or changing page in pager, and no dynamic tab was already created)

Thanks

2 Answers, 1 is accepted

answered on 14 May 2012, 10:12 AM

sample.zip

Hello Daniel,

I've inspected the provided implementation and it seems a valid one. I've also made a sample page based on the scenario mentioned in your post trying to reproduced the experienced problem, but to no avail. Please test whether the same problem is observed on the attached sample.

Greetings,
Dimitar Terziev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.