This is a migrated thread and some comments may be shown as answers.

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

10 Answers 691 Views
PageLayout
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 10 Mar 2017, 06:30 PM

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>

10 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 15 Mar 2017, 11:27 AM

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.
0
Dan
Top achievements
Rank 1
answered on 15 Mar 2017, 12:13 PM

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

0
Rob Ainscough
Top achievements
Rank 1
answered on 11 Mar 2019, 04:49 PM

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.

0
Marin Bratanov
Telerik team
answered on 12 Mar 2019, 07:09 AM
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.
0
Rob Ainscough
Top achievements
Rank 1
answered on 12 Mar 2019, 07:49 PM

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
0
Rob Ainscough
Top achievements
Rank 1
answered on 12 Mar 2019, 07:50 PM

oops missed my code obfuscation rpl_MoveIn should be rpl_MI 

Cheers, Rob.

0
Marin Bratanov
Telerik team
answered on 15 Mar 2019, 06:03 AM
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.
0
n/a
Top achievements
Rank 1
answered on 10 Apr 2020, 02:01 PM

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

0
Peter Milchev
Telerik team
answered on 13 Apr 2020, 03:53 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
n/a
Top achievements
Rank 1
answered on 13 Apr 2020, 03:58 PM
Thank you!!
Tags
PageLayout
Asked by
Dan
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Dan
Top achievements
Rank 1
Rob Ainscough
Top achievements
Rank 1
n/a
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or