Hello,
I have the following code for a tab strip and related necessary controls. All my navigational hyperlinks are javascript function calls to the "AddTab" function shown below. The server side code to add the tab and user control is also below.
Given the code and functionality below, how can I add a "Close Tab" icon on each tab to allow the user to close the tab? I have found many examples on this site but none of them are similar to my usage, and when I attempt to merge the logic, it fails. 100% of the tabs are generated dynamically from the client. There aren't any tabs pre-loaded when the site is loaded.
If there's anything I left out or you need information, let me know!
Thanks!
Kevin
I have the following code for a tab strip and related necessary controls. All my navigational hyperlinks are javascript function calls to the "AddTab" function shown below. The server side code to add the tab and user control is also below.
Given the code and functionality below, how can I add a "Close Tab" icon on each tab to allow the user to close the tab? I have found many examples on this site but none of them are similar to my usage, and when I attempt to merge the logic, it fails. 100% of the tabs are generated dynamically from the client. There aren't any tabs pre-loaded when the site is loaded.
If there's anything I left out or you need information, let me know!
Thanks!
Kevin
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
Skin
=
"Default"
>
</
telerik:RadAjaxLoadingPanel
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadTabStrip1"
>
<
UpdatedControls
><
telerik:AjaxUpdatedControl
ControlID
=
"RadTabStrip1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadMultiPage1"
LoadingPanelID
=
"LoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid2"
LoadingPanelID
=
"LoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadMultiPage1"
>
<
UpdatedControls
><
telerik:AjaxUpdatedControl
ControlID
=
"RadMultiPage1"
LoadingPanelID
=
"LoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid2"
LoadingPanelID
=
"LoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
function
AddTab(controlToAdd)
{
var
tabstrip = $find(
"<%= RadTabStrip1.ClientID %>"
);
var
tab =
new
Telerik.Web.UI.RadTab();
tab.set_text(controlToAdd);
tabstrip.trackChanges();
tabstrip.get_tabs().add(tab);
tabstrip.commitChanges();
tab.click();
}
protected
void
RadMultiPage1_PageViewCreated(
object
sender, RadMultiPageEventArgs e)
{
string
tabID;
tabID = e.PageView.ID.IndexOf(
'-'
) < 0 ? e.PageView.ID : e.PageView.ID.Substring(0, e.PageView.ID.IndexOf(
'-'
));
tabID = tabID.Replace(
"_"
,
" "
);
Control userControl = Page.LoadControl(Utilities.CachedData.GetUserControlPath(tabID));
userControl.ID = e.PageView.ID +
"_userControl"
;
e.PageView.Controls.Add(userControl);
}
private
void
AddPageView(RadTab tab)
{
Random random =
new
Random();
int
randomNumber = random.Next(0, 1000000);
RadPageView pageView =
new
RadPageView();
pageView.ID = tab.Text.Replace(
" "
,
"_"
) +
"-"
+ randomNumber.ToString();
RadMultiPage1.PageViews.Add(pageView);
tab.PageViewID = pageView.ID;
}
protected
void
RadTabStrip1_TabClick(
object
sender, RadTabStripEventArgs e)
{
AddPageView(e.Tab);
e.Tab.PageView.Selected =
true
;
}