How to set Visible property of a LayoutRow using Javascript...

3 posts, 0 answers
  1. DB
    DB avatar
    5 posts
    Member since:
    May 2012

    Posted 10 Mar Link to this post

    I have a problem that I've been trying to research for the past couple of days.   My project involves 

    a PageLayout with multiple LayoutRows and LayoutColumns.    What I'm trying to accomplish is

    to programmatically set the visible property of one of my LayoutRows to "True" when a certain

    button is clicked.  I want to do this client side via javascript.   Is this possible?   Here is a snipet 

    of my code:

                   <telerik:LayoutRow ID="LayoutRow_SelectNote" Visible="false">      
                        <Columns>
                            <telerik:LayoutColumn Span="10">
                                Select Orders To Recap From Below List:
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3917 posts

    Posted 15 Mar Link to this post

    Hello,

    The server Visible property prevents WebForm controls from rendering at all to the client. This means their HTML is not available in the browser and you cannot access it.

    If you do not want it rendered, you will need a postback.

    Otherwise, you can hide and show it with CSS:

    <style>
        .initiallyHidden
        {
            display:none;
        }
    </style>
    <telerik:RadPageLayout runat="server" ID="rpl1">
        <Rows>
            <telerik:LayoutRow ID="LayoutRow_SelectNote" Visible="true" CssClass="initiallyHidden myCustomRow">
                <Columns>
                    <telerik:LayoutColumn Span="10">
                        Select Orders To Recap From Below List:
                    </telerik:LayoutColumn>
                </Columns>
            </telerik:LayoutRow>
            <telerik:LayoutRow>
                <Columns>
                    <telerik:LayoutColumn Span="10">
                        always visible
                        <br />
                        <asp:Button ID="Button1" Text="show my row" OnClientClick="showRow(); return false;" runat="server" />
                    </telerik:LayoutColumn>
                </Columns>
            </telerik:LayoutRow>
        </Rows>
    </telerik:RadPageLayout>
    <script>
        function showRow() {
            document.getElementsByClassName("myCustomRow")[0].classList.remove("initiallyHidden");
            //or do this with jQuery, and/or older class name modification features
        }
    </script>


    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. DB
    DB avatar
    5 posts
    Member since:
    May 2012

    Posted 15 Mar in reply to Marin Bratanov Link to this post

    Hi Marin,

        Thank you very much for the code example.   I'm going to add it to 

    my project and see how it works !

    Kind Regards,

    Dan

Back to Top