RadPageView and Function Set_height

13 posts, 0 answers
  1. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 06 Mar 2014 Link to this post

    Hello,

    I would like to Know the function to set height on client side.

    pageView.set_height("100%")  => doesn't work.


    function addNewTab() {
                     
                    var tabstrip = $find('<%=RadTabStrip1.ClientID%>');
                    tabstrip.trackChanges();
                    var tab = new Telerik.Web.UI.RadTab();
                    tab.set_text("Root Tab 4");
                    tabstrip.get_tabs().add(tab);
                    tabstrip.commitChanges();
     
                    var multiPage = $find("<%= RadMultiPage1.ClientID %>");
                    multiPage.trackChanges();
                    var pageView = new Telerik.Web.UI.RadPageView();
                    pageView.set_id("Page14");
                    pageView.set_contentUrl("<%=this.Page.ResolveUrl("~/page.aspx")%>");
                    pageView.set_selected(true);
                   
                    pageView.set_Height("100%");  // here i want to set height
     
                    multiPage.get_pageViews().add(pageView);
                    multiPage.commitChanges();
    }

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Mar 2014 in reply to Olivier Link to this post

    Hi Olivier,

    With reference to this forum thread please try the following JavaScript to set the height of RadPageView.

    JavaScript:
    var multiPage = $find("<%=RadMultiPage1.ClientID %>");
    multiPage.trackChanges();
    var pageView = new Telerik.Web.UI.RadPageView();
    pageView.set_id("Page14");
    pageView.set_contentUrl("<%=this.Page.ResolveUrl("~/RadTabStrip/PopulateHtml.aspx")%>");
    pageView.set_selected(true);
    multiPage.get_pageViews().add(pageView);
    multiPage.commitChanges();
    for (i = 0; i < multiPage.get_pageViews().get_count() ; i++){
        var PageView = multiPage.get_pageViews().getPageView(i);
        multiPage.get_element().style.height = "475px";
    }

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Mar 2014 in reply to Olivier Link to this post

    Hi Olivier,

    The reference forum thread link is not properly attached in the above post. Please check this link.

    http://www.telerik.com/forums/edit-radpageview-css-on-client-side-using-javascript#h6xuA7F5-k6eA3Q643aPxA

    Thanks,
    Princy.
  5. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 07 Mar 2014 Link to this post

    Thank you Princy,

    I am surprised to have at the end of the addition of PageView, looping back to affect the height.

    this is not possible at the time of creation of PageView?

    thank you again
    oliver
  6. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 08 Mar 2014 Link to this post

    Hello Princy

    When you write this :
    <code>
    for (i = 0; i < multiPage.get_pageViews().get_count() ; i++){
        var PageView = multiPage.get_pageViews().getPageView(i);
        multiPage.get_element().style.height = "475px";
    }
    </code>
    var PageView is use for what ?
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Mar 2014 in reply to Olivier Link to this post

    Hi Olivier,

    You can set the height of the PageView after committing the changes, because before that get_element() property of RadPageView will return null. Please ignore the code that I posted above and have a look into the following JavaScript to achieve your scenario.

    JavaScript:
    var multiPage = $find("<%=RadMultiPage1.ClientID %>");
    multiPage.trackChanges();
    var pageView = new Telerik.Web.UI.RadPageView();
    pageView.set_id("Page14");
    pageView.set_contentUrl("<%=this.Page.ResolveUrl("~/RadTabStrip/PopulateHtml.aspx")%>");
    pageView.set_selected(true);
    multiPage.get_pageViews().add(pageView);
    multiPage.commitChanges();
    multiPage.get_element().style.height = "475px";

    Let me know if you have any concern.
    Thanks,
    Princy.
  8. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 10 Mar 2014 Link to this post

    thanks Princy
  9. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 10 Mar 2014 Link to this post

    hello Princy,

    When i add tabTemplate, and if i add by function javascript, i don't see the TabTemplate.

    Have you an idea to see it, with the function AddTab.

    see other thread to understand : other Thread click here

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">
          <Tabs>
             <telerik:RadTab runat="server" Text="Root Tab 1" PageViewID="PageView1" ImageUrl="~/images/icones/24x24/error.png" />
             <telerik:RadTab runat="server" Text="Root Tab 2" PageViewID="PageView2" />
             <telerik:RadTab runat="server" Text="Root Tab 3" PageViewID="PageView3" />
          </Tabs>
            <TabTemplate>
                    <asp:ImageButton runat="server" ID="BTN_WEBMAIL" ImageUrl="~/images/icones/24x24/mail.png" OnClientClick="alert('toto');" />
        </TabTemplate>
        </telerik:RadTabStrip>
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Mar 2014 in reply to Olivier Link to this post

    Hi Olivier,

    Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server">
        <Tabs>
            <telerik:RadTab Text="Grid">
            </telerik:RadTab>
            <telerik:RadTab Text="Async Upload">
            </telerik:RadTab>
        </Tabs>
        <TabTemplate>
            <table>
                <tr>
                    <td>
                        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/plus.gif" OnClientClick="OnClientClick();" />
                    </td>
                    <td>
                        <asp:Label runat="server" ID="lbl" CssClass="LabelClass" Text='<%# DataBinder.Eval(Container, "Text") %>'></asp:Label>
                    </td>
                </tr>
            </table>
        </TabTemplate>
    </telerik:RadTabStrip>

    JavaScript:
    <script type="text/javascript">
        function OnClientClick(sender, args) {
            var tabstrip = $find("<%=RadTabStrip1.ClientID %>");
            tabstrip.get_tabs().removeAt(tabstrip.get_selectedTab().get_index());
        }
    </script>

    Let me know if you have any concern.
    Thanks,
    Princy.
  11. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 11 Mar 2014 Link to this post

    Hello,

    Have you test TabTemplate and AddTab Function Javascript ?

    The image in TabTemplate doesn't appear !

    function addNewTab() {
                      
                    var tabstrip = $find('<%=RadTabStrip1.ClientID%>');
                    tabstrip.trackChanges();
                    var tab = new Telerik.Web.UI.RadTab();
                    tab.set_text("Root Tab 4");
                    tabstrip.get_tabs().add(tab);
                    tabstrip.commitChanges();
      
                    var multiPage = $find("<%= RadMultiPage1.ClientID %>");
                    multiPage.trackChanges();
                    var pageView = new Telerik.Web.UI.RadPageView();
                    pageView.set_id("Page14");
                    pageView.set_contentUrl("<%=this.Page.ResolveUrl("~/page.aspx")%>");
                    pageView.set_selected(true);
                    
                    pageView.set_Height("100%");  // here i want to set height
      
                    multiPage.get_pageViews().add(pageView);
                    multiPage.commitChanges();
    }
  12. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 11 Mar 2014 Link to this post

    Princy

    I found this : http://www.telerik.com/help/aspnet-ajax/tabstrip-create-closable-tabs-client-side.html

    but i would like to get 3 buttons like this picture

    please help me ! i stay for one week on this work.
  13. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Mar 2014 in reply to Olivier Link to this post

    Hi Olivier,

    Please add the following code snippet in your code which works as expected for me.

    JavaScript:
    function OnClientLoad() {
        tabStrip1 = $find('<%= RadTabStrip1.ClientID %>');
        for (var i = 0; i < tabStrip1.get_tabs().get_count(); i++) {
            //call a new method called AttachAnotherImage for inserting new images
            AttachAnotherImage(tabStrip1.get_tabs().getItem(i), "plus.gif");
            AttachAnotherImage(tabStrip1.get_tabs().getItem(i), "closed-mac.png");
            AttachCloseImage(tabStrip1.get_tabs().getItem(i), "delete-icon.png");
        }
    }
     
    function addtab() {
        var tab = new Telerik.Web.UI.RadTab();
        tab.set_text("Root RadTab" + tabStrip1.get_tabs().get_count());
        tabStrip1.get_tabs().add(tab);
        //call a new method called AttachAnotherImage for inserting new images
        AttachAnotherImage(tab, "plus.gif");
        AttachAnotherImage(tab, "closed-mac.png");
        AttachCloseImage(tab, "delete-icon.png");
    }
     
    //defenition of the newly added method
    function AttachAnotherImage(tab, anotherImageUrl) {
        var anotherImage = CreateCloseImage(anotherImageUrl);
        //you can attach event here
        anotherImage.AssociatedTab = tab;
        tab.get_innerWrapElement().appendChild(anotherImage);
    }

    Hope this will helps you.
    Thanks,
    Princy.
  14. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 12 Mar 2014 in reply to Princy Link to this post

    Thanks

    it's work very well !

    Olivier
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017