Thursday, September 15, 2011

Using DataList control display multiple records per row in an ASP.NET

Posted by Rahul Kharde at 3:53 AM

DataLists are usually used to display HTML format in rows and column. We can customize the DataList layout through its RepeatColumns and RepeatDirection properties, which, respectively, indicate how many columns are rendered and whether those items are laid out vertically or horizontally.
The RepeatDirection property can accept one of two values, that is, Vertical or Horizontal. The RepeatDirection is Vertical by default.
RepeatDirection="Horizontal"
A DataList control is useless without templates. A template is a combination of HTML elements, controls, and embedded server controls, and can be used to customize and manipulate the layout of a control. You can also customize the DataList control at run time using the ListItemType property in the ItemCreated event
You can also do the same at run time by specifying your desired layout using the RepeatLayout property of the DataList control
DataList1.RepeatLayout = RepeatLayout.Flow

Below example shows the record images in the horizontal format (only 3 per row)
RepeatColumns="3"

HTML

  <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" OnItemDataBound="DataList1_ItemDataBound"
        RepeatColumns="3">
        <ItemTemplate>
            <table border="1px; solid black">
                <tr>
                    <td style="height: 25px; background-color: #CCCCCC; width: 60px; text-align: center;">
                        <b>ROW
                            <%# Eval("No") %>b>
                    </td>
                </tr>
                <tr style="text-align: center; vertical-align: middle;">
                    <td style="height: 100px; width: 100%">
                        <asp:HiddenField ID="HDID" runat="server" Value='<%# Eval("No") %>' />
                        <asp:Image ID="Image1" runat="server" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>

Code
Here we create the temparay dataset and insert 5 records in it. In item bound event we set dynamic path of image

  protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataSet ds = new DataSet();
                ds.Tables.Add("list");
                ds.Tables[0].Columns.Add("No");
                for (int i = 1; i <= 5; i++)
                {
                    DataRow dr = ds.Tables[0].NewRow();
                    dr["No"] = i.ToString();
                    ds.Tables[0].Rows.Add(dr);
                }
                DataList1.DataSource = ds.Tables[0];
                DataList1.DataBind();
            }
        }

        protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
            {
                Image img = (Image)e.Item.FindControl("Image1");
                HiddenField HD = (HiddenField)e.Item.FindControl("HDID");
                img.ImageUrl = @"~/images/" + HD.Value + ".png";
            }
        }


Download 


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!


Kindly Bookmark and Share it:

YOUR ADSENSE CODE GOES HERE

0 comments:

Have any question? Feel Free To Post Below:

 

Popular Posts

Recent Comments

© 2011. All Rights Reserved | Help to understand .Net | Template by Blogger Widgets

Home | About | Top