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

Accessing RadControls from Javascript in MasterPage

16 Answers 308 Views
Sharepoint Integration
This is a migrated thread and some comments may be shown as answers.
wali
Top achievements
Rank 1
wali asked on 01 Jan 2009, 09:17 PM
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

16 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 02 Jan 2009, 03:50 PM

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:



Best wishes,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
wali
Top achievements
Rank 1
answered on 02 Jan 2009, 04:55 PM
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
0
Svetlina Anati
Telerik team
answered on 05 Jan 2009, 09:55 AM
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.
0
wali
Top achievements
Rank 1
answered on 05 Jan 2009, 09:22 PM
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


0
Vlad
Telerik team
answered on 06 Jan 2009, 07:39 AM
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.
0
wali
Top achievements
Rank 1
answered on 06 Jan 2009, 03:21 PM
Calling the loadTabIndex using Sys.Application.add_load(loadTabIndex);  did it for me.

Thanks for your help and great timely support.
   

0
Sergio Cortez
Top achievements
Rank 2
answered on 18 Mar 2009, 03:21 PM
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 :)
0
Atanas Korchev
Telerik team
answered on 18 Mar 2009, 04:17 PM
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.
0
Sergio Cortez
Top achievements
Rank 2
answered on 18 Mar 2009, 04:31 PM
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 :)
0
Atanas Korchev
Telerik team
answered on 18 Mar 2009, 05:51 PM
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.
0
Sergio Cortez
Top achievements
Rank 2
answered on 18 Mar 2009, 06:25 PM
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 .

0
Sergio Cortez
Top achievements
Rank 2
answered on 18 Mar 2009, 11:07 PM
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




0
Atanas Korchev
Telerik team
answered on 19 Mar 2009, 08:38 AM
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.
0
Sergio Cortez
Top achievements
Rank 2
answered on 01 Apr 2009, 12:10 AM
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!
0
Carlos
Top achievements
Rank 1
answered on 14 Oct 2014, 03:10 PM
Just to let you know that the link below is broken.
 
0
Marin Bratanov
Telerik team
answered on 15 Oct 2014, 10:13 AM

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.

 
Tags
Sharepoint Integration
Asked by
wali
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
wali
Top achievements
Rank 1
Vlad
Telerik team
Sergio Cortez
Top achievements
Rank 2
Atanas Korchev
Telerik team
Carlos
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or