radtabstrip load on demand - javascript functions in second tab

[kachy]

I am using the RadTabastrip on demand load example. I have one RadDatePicker in the first usercontrol, which works fine. I want to have 2 raddatepickers in second usercontrol, but when second user control loads by clicking on the second tab, javascript needed to show the popup calender for those 2 raddatepickers does not load, so the raddatepickers don't work.
Can you please suggest how can I make that work?

Thanks.

[kachy]

I am just trying to understand how the RadTabStrip load on demand works. After the second tab is loaded, I don't see any of the controls from second tab when I view the HTML Source of the page, may be thats why I am not able to find the RadDatePicker control from the second tab using Javascript. This is because the second tab is loaded with AJAX, I think. Is there any other way I can refer to the RadDatePicker control placed in the second tab?
I am trying to have 2 datePickers in second tab and when the second datepicker date is selected, then load the grid based on the 2 date values?

Thanks.

[Paul]

Hello kachy,

Please refer to this forum post for details on the matter.

All the best,
Paul
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.

[kachy]

I tried using the RadAjaxPage instead of System.Web.UI.Page for the main page which loaded the user controls, it did not make any difference. I added my Javascript Code in a separate JS file and added on main page

<

 

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

 

I call  the javascript function on click of datepicker.

<

 

telerik:RadDatePicker ID="RadDatePicker2"

 

 

Style="vertical-align: middle;" MinDate="1900-1-1"

 

 

SelectedDate="<%# DateTime.Today.AddMonths(-2) %>" runat="server"

 

 

Skin="WebBlue" Width="106px" >

 

 

<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"></Calendar>

 

 

<DatePopupButton Visible="False"></DatePopupButton>

 

 

<DateInput onclick="ToggleFirstPopup2()" Width="106px" >

 

 

</DateInput>

 

 

</telerik:RadDatePicker>

 

function

 

ToggleFirstPopup2() {

 

$find(

"<%= RadDatePicker2.ClientID %>").showPopup();

 

}

$find("<%= RadDatePicker2.ClientID %>") always returns null, so I am not able to use Calendar Control in second tab. For first tab, Calendar control works fine.

I am having one more problem with Load On Demand Tab example. When first tab is clicked, autogenerated grid loads fine, when second tab is clicked , second tab is loaded properly too. Now when I click on first tab again, the grid formatting changes and the column data for which the length is more, is shown with ...  and the width of shorter column increases. The formatting looks like when we set the Table Layout to Fixed in which all columns have same width and column are spread over all the available width.
As I understand, when the first tab is clicked second time, then that tab is not loaded so nothing should happen to the format of that grid. Can you please suggest what can I do differently to remove that error.

Thanks.

[kachy]

Please somebody let me know, how can I use a RadDatePicker in second or third tab of Load On Demand tabstrip example. As stated earlier, I get a Javascript error when I click on DatePicker to show the popup calendar. RadDatePicker2.ClientID always returns null. 
I have a grid in second tab, for which filter is enabled for DateTime column, the Calendar control works fine for that filter. Am I missing something very simple, please let me know how can I use RadDatePicker in second tab?

Thanks. 

[Paul]

Hello kachy,

Here's a sample code snippet that shows the needed approach.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProductsCS.ascx.cs" Inherits="TabStrip_Examples_ApplicationScenarios_LoadOnDemand_ProductsCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

    <script type="text/javascript">
        function ToggleFirstPopup2() {
            $find("<%= RadDatePicker2.ClientID %>").showPopup();
        }
    </script>

</telerik:RadScriptBlock>

<telerik:RadDatePicker ID="RadDatePicker2" Style="vertical-align: middle;" MinDate="1900-1-1"
    SelectedDate="<%# DateTime.Today.AddMonths(-2) %>" runat="server" Skin="WebBlue"
    Width="106px">
</telerik:RadDatePicker>
<input id="Button1" type="button" value="button" onclick="ToggleFirstPopup2()" />

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[kachy]

I have done the exact same thing. When the Javascript function is in the usercontrol page inside RadCodeBlock also, the function is not recognized and I get Object expected error. so I added the ToggleFirstPopUp2 in an external js file, then I get "'null' is null or not an object" error as RadDatePicker2.ClientID always returns null.

Thanks

[Paul]

Hello kachy,

You should use RadScriptBlock, but not RadCodeBlock. These are two different controls.

Best wishes,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[kachy]

Thanks a lot, that worked.
I looked at the link http://www.telerik.com/help/aspnet-ajax/ajxradscriptblockradcodeblock.html
to know the difference between the two.

Thanks once again.

[Om]

Thanks a lot. This has solved my long awaited issue with dynamic rad tabstrip.

Best Regards
Shankar