radtabstrip load on demand - javascript functions in second tab

10 posts, 1 answers
  1. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 14 Aug 2009 Link to this post

    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.
  2. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 17 Aug 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 20 Aug 2009 Link to this post

    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.
  5. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 21 Aug 2009 Link to this post

    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.
  6. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 25 Aug 2009 Link to this post

    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. 
  7. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 27 Aug 2009 Link to this post

    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.
  8. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 27 Aug 2009 Link to this post

    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
  9. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 27 Aug 2009 Link to this post

    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.
  10. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 27 Aug 2009 Link to this post

    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.
  11. Om
    Om avatar
    3 posts
    Member since:
    Oct 2010

    Posted 10 May 2012 Link to this post

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

    Best Regards
    Shankar
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017