I am trying to access RadTabstrip control in SharePoint MasterPage to set the Tab through client-side javascript code but getting 'Object doesn't support this property or method' error. Below is what I am trying:
<telerik:RadTabStrip runat="server" id="RadTabStrip1" Width="433px" SelectedIndex="0" ClickSelectedTab="True" OnClientTabSelected="onClientTabSelected"
OnClientLoad="onClientTabLoad">
function loadTabIndex(tabstrip) {
//If tabstrip reference isn't null
if (tabstrip != null) {
alert('test');
var tab = tabstrip.findTabByText("Reports");
//Get tab object
if (tab != null) {
tab.select(); //Select tab
}
}
}
accessing loadTabIndex(tabstrip) from onload event
<body class="body" topmargin="0" onload="javascript:_spBodyOnLoadWrapper(); loadTabIndex(ctl00_RadTabStrip1);">
However, I am getting error on tabstrip.findTabByText("Reports")
How can I achieve what I am trying to do? Please help.
Regards,
IW
16 Answers, 1 is accepted
Hi Wali,
In order to use the client API of certain control, you should reference its client object - in order to do this you should use the built-in AJAX method $find as explained below:
http://www.telerik.com/help/aspnet-ajax/editor_getingreferencetoradeditor.html
I also do not recommend to hard - code the ID because it is not a good practice and you would better use code-blocks and extract the ClientID as $find("<%=RadTabStrip1.ClientID%>").
As explained in the provided article for the RadEditor (the same facts are true not only for all RadControls but for every client-side AJAX object), the onload event is too early in th page lifecycle and you cannot use it to reference the object - in order to execute some script on page load, you should use the Sys.Application.add_load syntax.
I hope that the provided explanations are helpful and since the RadControls are built on top of the MS AJAX Framework, I believe that it will be easier for you to use them after reading some helpful resources about the AJAX fundamentals - you can find some below. Note that these links point to the Microsoft sites and we cannot guarantee their content and/or availability will not change over time:
- MS AJAX Overview: http://msdn.microsoft.com/en-us/library/bb398874.aspx.
- Installing MS AJAX: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6.
- A hub with some MS AJAX resources: http://msdn.microsoft.com/en-us/library/ee341002.aspx.
- ScriptManager control overview: http://msdn.microsoft.com/en-us/library/bb398863.aspx.
- MS AJAX videos: http://www.asp.net/web-forms/videos/aspnet-ajax.
- Forum section for ASP.NET AJAX and the AjaxControlToolkit toolset: http://forums.asp.net/1022.aspx/1?ASP+NET+AJAX+Ajax+Control+Toolkit.a
Best wishes,
Svetlina
the Telerik team
I tried the below:
var tabStrip = $find( "<%= RadTabStrip1.ClientID %>");
var tab = tabStrip.findTabByText( "Reports");
tab.select();
However, I was getting SharePoint message 'Code Block are not allowed in this file '
So, I modified the web.config file
<.pageparserpath virtualpath="/_catalogs/masterpage/*" compilationmode="Always" allowserversidescript="true" includesubfolders="true".>
For some reason SharePoint does not like <%= %> block.
But now I am getting 'An unexpected error has occurred'
Is there anything else I am missing?
Regards,
IW
I assume that the code blocks cannot be evaluated for some reason and that is why you got a message they are not allowed. I suggest to wrap the script which contains the code blocks with the RadCodeBlock control and test again. Another option is to get back to your original approach with the hard - coded ID, just make sure that the reference is done by using the $find method.
Best wishes,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Even hardcoded approach gives me same error.
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function loadTabIndex() {
var tabstrip = ("<%= RadTabStrip1.ClientID %>");
var tab = tabstrip.findTabByText("Reports");
}
</script>
</telerik:RadCodeBlock>
I am calling the loadTabIndex from onload.
Regards,
IW
You should use $find() method to get reference to ASP.NET AJAX components:
function loadTabIndex() {
var tabstrip = $find("<%= RadTabStrip1.ClientID %>");
var tab = tabstrip.findTabByText("Reports");
}
Sincerely yours,
Vlad
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Thanks for your help and great timely support.
I just want to question if these coding with javascript is to access the TabStrip to get highlighted the current selected element on the page?
What i mean is that I'm running into issues to highlight the correct Tab inside sharepoint because TabStrip loses its state in every postback.
So in the telerik Demo page http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/sitenavigation/defaultcs.aspx
It says that the way to overcome this limitation is to use the RadTabStrip.FindTabByUrl method in conjunction with RadTab.SelectParents.
I have implemented the code in my masterpage but its not working, so righ now im a little confussed.
Please Help me :)
The example you are referring to uses server-side code (C#) while this topic discusses client-side (JavaScript) implementations. As far as I know using server-side code in sharepoint pages is not trivial but is still possible. You can check this MSDN article for the details.
Kind regards,
Albert
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Right now i have configured my Sharepoint to work with server-side code (C#) and i have implemented the RadTabStrip.FindTabByUrl and RadTab.SelectParents, but its not working.
So, right now i dont know if im doing something wrong implementing this C# code or maybe this code doesnt work properly in the sharepoint world and I should use Javascript implementation instead or what do you recommend?
My main goal is to geet the correct Tab Highlited after every postback
:S
I really appreciate your help :)
Is the tabstrip bound to a sharepoint datasource? In this example RadTabStrip is bound to the PortalSiteMapDatasource control and highlights the current path automatically. What is different in your case? Also which version are you using? This capability was not available in earlier versions.
Regards,
Albert
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
The tab strip is bound to a SiteMapDataSource and this SiteMapDataSource has a Custom Navigation Provider that inherits from SPNavigationProvider
<asp:SiteMapDataSource ShowStartingNode="false" SiteMapProvider="MyCustomNav" ID="topSiteMap1" runat="server" StartFromCurrentNode="false" />
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" DataSourceID="topSiteMap1" Skin="MyCustomSkin" EnableEmbeddedSkins="False"/>
I thought that it will handle the items highlight automatically.
I will try to use a PortalSiteMapDatasource instead of a SiteMapDataSource as the sharepoint.telerik.com example.
I dont know exactly the differences but maybe it has something to do .
I have changed the SiteMapDataSource and replaced with PortalSiteMapDatasource and a lot of thing started to work instantaneously.
The highlighted item works now in all the sharepoint areas (Document Center, News, Sites, etc etc)
But for my custom sections (MyCustomArea1, MycustomArea2) it still does not highlight these items.
mmm, i will continue to research
RadTabStrip should retain the current do this by itself if bound to a sitemap provider which correctly implements the CurrentNode property.
Regards,
Albert
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
The only line that i was missing is to execute a Databind to the radTabStrip before trying to find the SelectedTab.
Here is the link to the other forum which has more details
http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/moss-and-radtabstrip-for-navigation.aspx
:)
Thank you everyone!
Hi Carlos,
Thank you for your report. I removed the links to the article because it no longer exists. It was only a collection of links that had general information about the MS AJAX framework. Since those links go dead over time, we removed our own help article to avoid misleading people. I edited the original post to show the links that are still live: http://www.telerik.com/forums/accessing-radcontrols-from-javascript-in-masterpage#1cPmfZNf6kmuuJAayVP1xg.
Regards,
Telerik
Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.