RadPageView and Function Set_height

[Olivier]

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();
}

[Princy]

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.

[Princy]

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.

[Olivier]

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

[Olivier]

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 ?

[Princy]

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.

[Olivier]

thanks Princy

[Olivier]

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>

[Princy]

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.

[Olivier]

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();
}

[Olivier]

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.

[Princy]

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.

[Olivier]

Thanks

it's work very well !

Olivier