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

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

    Posted 10 Mar 2017 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
    4889 posts

    Posted 15 Mar 2017 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 2017 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

  4. Rob Ainscough
    Rob Ainscough avatar
    262 posts
    Member since:
    Jan 2010

    Posted 11 Mar Link to this post

    I've noticed that LayoutRow supports an ID but can't be referenced in code behind ... is there any way to change the LayoutRow dynamically in code behind?

    Cheers, Rob.

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4889 posts

    Posted 12 Mar Link to this post

    Hi Rob,

    The page layout is a front-end grid that has minimal server code and functionality, because it is basically a small collection of CSS and a few tags that translate directly to HTML tags.

    That said, you can define elements for it programmatically: https://docs.telerik.com/devtools/aspnet-ajax/controls/pagelayout/server-side-programming/defining-structure-in-code-behind.

    Its goal is to be lightweight and so not all properties can be changed dynamically with server code. For example, you can toggle the Visible property easily:

    protected void Button1_Click(object sender, EventArgs e)
    {
        LayoutRow_SelectNote.Visible = false;
    }
    <telerik:RadPageLayout runat="server" ID="rpl1">
        <Rows>
            <telerik:LayoutRow ID="LayoutRow_SelectNote">
                <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" OnClick="Button1_Click" runat="server" />
                    </telerik:LayoutColumn>
                </Columns>
            </telerik:LayoutRow>
        </Rows>
    </telerik:RadPageLayout>

    but, for example, the CssClass will not update.

    Other boolean properties should work, though, for example, the following markup will hide it with CSS on desktop browser (but it will still render), while the server code will make it visible by removing the class that hides it

    <telerik:LayoutRow ID="LayoutRow_SelectNote" HiddenXl="true">
    protected void Button1_Click(object sender, EventArgs e)
    {
        LayoutRow_SelectNote.HiddenXl = false;
    }

    If you are looking to completely re-arrange the structure, I would advise considering the following:

    1. first, see if you can implement the responsive layout without drastic changes as per the following article and the Span** and Hidden** attributes: https://docs.telerik.com/devtools/aspnet-ajax/controls/pagelayout/how-to/react-to-viewport-change 
    2. second, if you want to change the structure of the page, maybe it will be easier for you to work with your own HTML elements and use a css-only grid (like the bootstrap grid that you can use as a standalone stylesheet, without everything else bootstrap carries).

    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Rob Ainscough
    Rob Ainscough avatar
    262 posts
    Member since:
    Jan 2010

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

    Hi Marin,

    I found a fairly simple way to dynamically change LayoutRow visibility by setting the rows I wanted to identify with ID="row_1" and then cycle thru the collection of rows looking for ClientID = "row_1" and then set the Visibility if a match is found ... obviously an index lookup would be faster but so long as there aren't too many Rows it's fast enough.

    For IDX = 0 To Me.rpl_MI.Rows.Count - 1
        Select Case Me.rpl_MI.Rows(IDX).ClientID
            Case "row_1", "row_4", "row_6", "row_10"
                Me.rpl_MoveIn.Rows(IDX).Visible = False
        End Select
    Next
  7. Rob Ainscough
    Rob Ainscough avatar
    262 posts
    Member since:
    Jan 2010

    Posted 12 Mar Link to this post

    oops missed my code obfuscation rpl_MoveIn should be rpl_MI 

    Cheers, Rob.

  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4889 posts

    Posted 15 Mar Link to this post

    Hi Rob,

    It is good to hear you have resolved this.

    A collection would still iterate over the list of elements, or keep a hash table in memory, so I don't think it would be a more performant solution than the loop you created - generally, there shouldn't be so many rows as to cause a performance hit with this approach, and if there are - the entire page is likely to be rather slow because of the large amounts of content.


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top