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

Client-Side - Cannot get a Hook on the RadTabStrip

6 Answers 188 Views

TabStrip

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

David asked on 21 Jul 2011, 01:26 AM

Hi,
I am trying to create a variable for the RadTabStrip on my page, but $find keeps returning a null value. Here is my code (the javascript is in a RadCodeBlock at the foot of the page):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.5_1.js" type="text/javascript"></script>

<script src="js/behaviours.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<ClientEvents OnRequestStart="jsAjaxStarting" OnResponseEnd="ajaxFinished" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="Button1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Panel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="Button2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Panel2" />

<telerik:AjaxUpdatedControl ControlID="tab1IsAJAX" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div id="loadingDiv" class="screenCenter" style="display: none;">

<br />

<span>LOADING</span>

</div>

<telerik:RadTabStrip ID="TestRadTabStrip" runat="server"

OnClientLoad="jsStoreLicenceApplicTabStripClientObject"

SelectedIndex="0" MultiPageID="RadMultiPage1">

<Tabs>

<telerik:RadTab PageViewID="RadPageView1" runat="server" Text="Tab 1" Value="Tab1" ></telerik:RadTab>

<telerik:RadTab PageViewID="RadPageView2" runat="server" Text="Tab 2" Value="Tab2" ></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

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

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

<asp:Panel ID="Panel2" runat="server">

<p>This is page 1</p>

</asp:Panel>

<asp:Button ID="Button1" runat="server" Text="Go to Tab 2" OnClick="Click1" /><br />

<asp:Label ID="tab1IsAJAX" Text="" runat="server" />

</telerik:RadPageView>

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

<asp:Panel ID="Panel1" runat="server">

<p>This is page 2</p>

<asp:Button ID="Button2" runat="server" Text="Go to Tab 1" OnClick="Click2" /><br />

<asp:Label ID="tab2IsAJAX" Text="" runat="server" />

</asp:Panel>

<asp:Button ID="Button3" runat="server" Text="Hide Panel" /><br />

</telerik:RadPageView>

</telerik:RadMultiPage>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

$(document).ready(hookUpEvents);

function hookUpEvents() {

var tabId = '<%= TestRadTabStrip.ClientID %>';

var tabStrip = $find(tabId);

debugger;

if (tabStrip) {

var selectedTab = tabStrip.get_selectedTab();

var tabvalue = selectedTab.get_value();

}

if (tabvalue === 'Tab2')

$('#' + '<%= RadPageView2.FindControl("Panel1").ClientID %>').bind('click', hidePanel);

}

</script>

</telerik:RadCodeBlock>

</div>

</form>

</body>

</html>

I am using a Web site project template and Telerik.Web.UI, Version=2010.3.1215.35

Any help would be appreciated. Cheers

6 Answers, 1 is accepted

answered on 21 Jul 2011, 03:37 PM

I don't think the posted solution addresses the actual underlying problem.

I've started having the same problem since installing the latest telerik dll, with code that worked before, and I think the cause is that telerik aren't creating the component object until extremely late in the page life-cycle.

For instance, let's say I want to do some initialisation on a tab strip using a function something like this...

function initTabStrip () {

var tabStrip = %find("myTabStripID");

// do something...

}

If I attach this to a button handler and click it manually once the page is up then it works fine.

But if I register a script block on page load (or pre-render) then $find returns null.

Next thing I tried was calling the function from a jquery $(document).ready() function, but it still doesn't work.

I guess the only way the new dll is going to work in this scenario is using a Timer to fire the function once telerik has finally woken up and created the component object - anyone have any ideas of a suitable delay to use???

answered on 25 Jul 2011, 01:30 AM

Hi Shinu,
Thanks for that article. Very interesting.

I have got it working but one more question. I am trying to achieve unobtrusive javascript. That means having clean mark-up, separated from javascript. At the moment, I have to use a RadCodeBlock to get at control IDs. But this leaves me with a big block of javascript in my aspx file:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

$(document).ready(hookUpButtonClick);

function hookUpButtonClick() {

$('#' + '<%= RadPageView2.FindControl("Button3").ClientID %>').bind('click', hidePanel);

}

function hidePanel() {

var panelId = '<%= RadPageView2.FindControl("Panel1").ClientID %>';

$('#' + panelId).slideToggle();

return false;

}

</script>

</telerik:RadCodeBlock>

Is there a way to get this same result, but with the javascript in a sep0arate javascript file?

Accepted