programatically change order of controls? 1

[bobetko]

I have aspx page with two controls on it. Let's say I have two repeters:

    <asp:Repeater ID="rImages" runat="server">
        //content
    </asp:Repeater>
    <br /> 
    <asp:Repeater ID="rCategories" runat="server">
        //content
    </asp:Repeater>

In this example Repeater rImages is rendered first, then comes second one, rCategories.

My problem is I need sometime to change order of these two, to show first rCategories, then rImages, depending of the user's input.

Can I do this dynamically during run-time?
How do I approach this problem?

Thanks

 

[ca8msm]

Just dynamically assign them both a CSS class and use that to position them


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[bobetko]

Repeater Control doesn't support class property.

I assume you mean to place repeater inside DIV tag and use CSS to control position?!

I am fairly OK with CSS, but I don't have clue how to change order. I can change stacking order with Z-Index, but, that's not going to do the job.

 

[ca8msm]

I assume you mean to place repeater inside DIV tag and use CSS to control position?!

Yes, that's exactly what I mean. I'll knock up a quick example tomorrow if you haven't figured the CSS out by then...


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jbenson001]

ca8msm..I'd like to see that example. I have not used CSS much at all and would like to learn more.

Thanks... Jim

 

[ca8msm]

OK, as I don't know the posters page layout at all, I'll just show the simplest example I can think of.

CSS

    .showFirst
    {
        position: absolute;    
        top: 20px;
    }
    .showSecond
    {
        position: absolute;    
        top: 40px;
    }

HTML

    <div id="firstDiv" runat="server">
        <asp:Label ID="Label1" runat="server" Text="I'm part of the first div"></asp:Label>
    </div>
    
    <div id="secondDiv" runat="server">
        <asp:Label ID="Label2" runat="server" Text="I'm part of the second div"></asp:Label>
    </div>

Code-behind

        Dim SwapOrder As Boolean = True
        If SwapOrder = True Then
            firstDiv.Attributes.Add("class", "showSecond")
            secondDiv.Attributes.Add("class", "showFirst")
        Else
            firstDiv.Attributes.Add("class", "showFirst")
            secondDiv.Attributes.Add("class", "showSecond")
        End If

You'll see that in this example the second div is positioned first, although it comes second in the actual HTML.

To make it easier to explain, this example just uses absolute positioning (which takes the div out of the document flow) but I'm sure you could use relative positioning instead and place all your content in a container div.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[ca8msm]

Actually, I may as well just post a relative example as well...

CSS

    .showFirst
    {
        position: relative;    
        top: 0px;
    }
    .showSecond
    {
        position: relative;    
        top: 50px;
    }

HTML

<div>
    <div id="firstDiv" runat="server">
        <asp:Label ID="Label1" runat="server" Text="I'm part of the first div"></asp:Label>
    </div>
    
    <div id="secondDiv" runat="server">
        <asp:Label ID="Label2" runat="server" Text="I'm part of the second div"></asp:Label>
    </div>
</div>

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jbenson001]

Hey ca8msm.. thanks for the examples.. this is great. It really helps me understand.. I will be using CSS in the future.

Jim

 

[bobetko]

Thanks ca8msm,

I can't use absolute positioning.

For the relative positioning, I see you have top:50px?
In both DIVs I will have repeater controls which can grow depending of data. Hight of the DIV is variable and I can't assume any value to it.

Thanks for your examples...