Accessing RadControls from Javascript in MasterPage - Integrating Controls

wali

4 posts

Member since:
Jan 2007

Posted 01 Jan 2009 Link to this post

Hi,

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

Svetlina Anati

Admin

2795 posts

Posted 02 Jan 2009 Link to this post

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

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

wali

4 posts

Member since:
Jan 2007

Posted 02 Jan 2009 Link to this post

Thanks Svetlina !

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

Svetlina Anati

Admin

2795 posts

Posted 05 Jan 2009 Link to this post

Hi Wali,

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.

wali

4 posts

Member since:
Jan 2007

Posted 05 Jan 2009 Link to this post

I am still getting error on tabstrip.findTabByText("Reports") 'Object doesn't support this property or method'.

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

Vlad

Admin

11100 posts

Posted 06 Jan 2009 Link to this post

Hello,

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.

wali

4 posts

Member since:
Jan 2007

Posted 06 Jan 2009 Link to this post

Calling the loadTabIndex using Sys.Application.add_load(loadTabIndex); did it for me.

Thanks for your help and great timely support.

Sergio Cortez

23 posts

Member since:
Nov 2008

Posted 18 Mar 2009 Link to this post

Hi Wali and Hi Telerik guys

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 :)

Atanas Korchev

Admin

8462 posts

Posted 18 Mar 2009 Link to this post

Hi Sergio Cortez,

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.

Sergio Cortez

23 posts

Member since:
Nov 2008

Posted 18 Mar 2009 Link to this post

Thank you Albert for the reply

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 :)

Atanas Korchev

Admin

8462 posts

Posted 18 Mar 2009 Link to this post

Hi Sergio Cortez,

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.

Sergio Cortez

23 posts

Member since:
Nov 2008

Posted 18 Mar 2009 Link to this post

Im using Telerik.Web.Ui version 2008.3.1125.35

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 .

Sergio Cortez

23 posts

Member since:
Nov 2008

Posted 18 Mar 2009 Link to this post

I got an update on this.
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

Atanas Korchev

Admin

8462 posts

Posted 19 Mar 2009 Link to this post

Hello Sergio Cortez,

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.

Sergio Cortez

23 posts

Member since:
Nov 2008

Posted 31 Mar 2009 Link to this post

Hi Albert I could finally get the desired behavior.
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!

Carlos

8 posts

Member since:
Dec 2012

Posted 14 Oct 2014 in reply to Svetlina Anati Link to this post

Just to let you know that the link below is broken.

Marin Bratanov

Admin

4330 posts

Posted 15 Oct 2014 Link to this post

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,

Marin Bratanov
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.