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

[Dan]

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>

[Marin Bratanov]

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

[Dan]

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

[Rob Ainscough]

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.

[Marin Bratanov]

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

[Rob Ainscough]

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

[Rob Ainscough]

oops missed my code obfuscation rpl_MoveIn should be rpl_MI 

Cheers, Rob.

[Marin Bratanov]

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

[n/a]

What do you have to do to get the Layout Row's ID accessible in the code behind?  I am trying to programatically hide/show a row

                                                <telerik:LayoutRow ID="AfterM0" HiddenXl="True">

                AfterM0.HiddenXL = False     <-- is saying AfterM0 is not declared

[Peter Milchev]

Hello Christopher,

The LayoutRow can be accessed via the FindControl method of the RadPageLayout control and passing the row ID:

<telerik:RadPageLayout runat="server" ID="RadPageLayout1">
    <telerik:LayoutRow ID="FirstRow">
        <Rows>
            <telerik:LayoutRow>
                <Content>My Content</Content>
            </telerik:LayoutRow>
        </Rows>
    </telerik:LayoutRow>
</telerik:RadPageLayout>

protected void Page_Load(object sender, EventArgs e)
{
    var row = RadPageLayout1.FindControl("FirstRow") as LayoutRow;
}

Regards,
Peter Milchev
Progress Telerik

[n/a]

Thank you!!