locked
Help in constructing html inside repeater with vertical scroll bar RRS feed

  • Question

  • User483994611 posted

    I want to construct a html table shown below inside a repeater with div using css class not with table .plz help me out !!

    Title

    Image1    ProdName1   Price1

                   Quantity1

    Image2    ProdName2  Price2

                   Quantity2

    Tuesday, December 27, 2016 5:23 PM

All replies

  • User-691209617 posted

    you need to use DataBound event 

    check this link for detail to insert the HTML

    Tuesday, December 27, 2016 5:44 PM
  • User483994611 posted

    I know repeater logic .I can construct the html with table tr td.I need to sonstruct the html with div just please  give me some idea.

    Wednesday, December 28, 2016 6:28 AM
  • User-1838255255 posted

    Hi suvo,

    According to your description, I make a sample use div and class, it show the result like table, here is the sample code, but I am not clear why not use table, I think it is more easy than use div combine with CSS.

    <head runat="server">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #Box {
                height: 120px;
                width: 450px;
                border: 1px solid blue;
                margin: 0 auto;
            }
    
            .SmallBox {
                height: 120px;
                width: 32.85%;
                border: 1px solid blue;
                float: left;
            }
    
            .Second {
                float:left;
                margin-left:40px;
                margin-top:10px;
            }
    
            .Third {
                float: left;
                margin-left: 40px;
                margin-top: 50px;
            }
            .Fourth {
                float:left;
            margin-left:60px;
            margin-top:55px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <div id="Box">
                            <div class="SmallBox">
                                <asp:Image ID="Image1" runat="server" ImageUrl="SmallImage.jpg" />
                            </div>
                            <div class="SmallBox">
                                <asp:Label ID="Label2" runat="server" Text='<%# Eval("Productname") %>' CssClass="Second"></asp:Label>
                                <asp:Label ID="Label3" runat="server" Text='<%# Eval("Amount") %>' CssClass="Third"></asp:Label>
                            </div>
                            <div class="SmallBox">
                                <asp:Label ID="Label4" runat="server" Text='<%# Eval("Price") %>' CssClass="Fourth"></asp:Label>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </form>
    </body>
    
    Code Behind:
     protected void Page_Load(object sender, EventArgs e)
            {
                DataTable table = new DataTable();
                table.Columns.Add("Productname", typeof(string));
                table.Columns.Add("Amount", typeof(int));
                table.Columns.Add("Price", typeof(string));
    
                // Here we add five DataRows.
                table.Rows.Add("Computer1", 3020,"$3232");
                table.Rows.Add("Computer4", 3000, "$3232");
                table.Rows.Add("Computer43", 3030, "$3332");
                table.Rows.Add("Computer1", 3040, "$3232");
                table.Rows.Add("Computer5", 3000, "$3232");
                table.Rows.Add("Computer1", 3000, "$3232");
                Repeater1.DataSource = table;
                Repeater1.DataBind();
            }

    Result:

    I am not sure where you want to use scroll bar, I make a sample about how to use vertical scroll bar in div, you could try to add it through your needs.

     <div style="overflow:auto; width:100px;height:100px;">
                    here is some text<br/><br/><br/><br/><br/><br/><br/><br/>
                    here is some text
                </div>

    If this reply can not solve your problem, please le me know.

    Best Regards,

    Eric Du

    Wednesday, December 28, 2016 8:55 AM