Images In Gridview DataList Using ObjectDataSource

In this example i am explaining how to Add or Show Images in GridView or DataList using ObjectDataSource In Asp.Net C# VB.NET. For this first of all we need to create a Object to populate gridview or DataList.

Right click on solution explorer and add new class, name it whatever you want to.

Images In Gridview DataList Using ObjectDataSource


In this class write a method to populate GridView, i'm creating a DataTable and adding some records.

The C# code behind

public DataTable GetData()
{
  DataTable dt = new DataTable();
  dt.Columns.Add(new DataColumn
                ("PictureID", typeof(int)));
  dt.Columns.Add(new DataColumn
                ("PictureURL", typeof(string)));
  dt.Columns.Add(new DataColumn
                ("Title", typeof(string)));

        DataRow dr = dt.NewRow();
        dr["PictureID"] = 1;
        dr["PictureURL"] = ResolveUrl
                ("~/Images/Ball1.gif");
        dr["Title"] = "FootBall";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["PictureID"] = 2;
        dr["PictureURL"] = "~/Images/Mobiles.jpg";
        dr["Title"] = "Mobile Phones";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["PictureID"] = 3;
        dr["PictureURL"] = "~/Images/Watch.jpg";
        dr["Title"] = "Watches";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["PictureID"] = 4;
        dr["PictureURL"] = "~/Images/Perfumes.jpg";
        dr["Title"] = "Perfumes";
        dt.Rows.Add(dr);
        return dt;
    }

VB.NET code behind
Public Function GetData() As DataTable
    Dim dt As New DataTable()
    dt.Columns.Add(New DataColumn("PictureID", GetType(Integer)))
    dt.Columns.Add(New DataColumn("PictureURL", GetType(String)))
    dt.Columns.Add(New DataColumn("Title", GetType(String)))
    
    Dim dr As DataRow = dt.NewRow()
    dr("PictureID") = 1
    dr("PictureURL") = ResolveUrl("~/Images/Ball1.gif")
    dr("Title") = "FootBall"
    dt.Rows.Add(dr)
    
    dr = dt.NewRow()
    dr("PictureID") = 2
    dr("PictureURL") = "~/Images/Mobiles.jpg"
    dr("Title") = "Mobile Phones"
    dt.Rows.Add(dr)
    
    dr = dt.NewRow()
    dr("PictureID") = 3
    dr("PictureURL") = "~/Images/Watch.jpg"
    dr("Title") = "Watches"
    dt.Rows.Add(dr)
    
    dr = dt.NewRow()
    dr("PictureID") = 4
    dr("PictureURL") = "~/Images/Perfumes.jpg"
    dr("Title") = "Perfumes"
    dt.Rows.Add(dr)
    Return dt
End Function

Now go to design view of the page and drag a GridView from toolbox.

Steps to create ObjectDataSource

Click on smart tag of gridview and select Choose Data Source > New DataSource

From next screen select Object, Click on OK
In next screen, choose your Object (the class file we created earlier )_ from the dropdown, Click on next.

In define data methods screen, choose your method for select statement you wrote in the class file(in our case it is GetData(),Return DataTable), Click on finish.



Now click on smart tag of GridView and Click on Edit Columns.

Uncheck the Auto-Generate field checkBox at bottom left of screen.



From the box at top left add two BoundField and 1 ImageField as shown in figure
Select first Bound field and change HeaderText property to "Picture ID" and DataField property to PictureID.


Repeat same for second bound field and for Title.
Select the ImageField and set DataImageUrlField property to PictureURL.

Complete HTML source of page will look like this
<asp:GridView ID="GridView1" Runat="server" 
              AutoGenerateColumns="False" 
              BorderWidth="1px" CellPadding="3" 
              BorderStyle="None" 
              BorderColor="#CCCCCC" 
              DataSourceID="ObjectDataSource1" 
              AllowPaging="True" PageSize=3>
<PagerStyle ForeColor="#000066" HorizontalAlign="Left" 
            BackColor="White">
</PagerStyle>
<HeaderStyle ForeColor="White" Font-Bold="True" 
             BackColor="#006699">
</HeaderStyle>
<Columns>
<asp:BoundField HeaderText="Picutre ID" 
                DataField="PictureID">
<ItemStyle HorizontalAlign="Center" 
           VerticalAlign="Middle">
</ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderText="Title" DataField="Title">
</asp:BoundField>
<asp:ImageField DataImageUrlField="PictureURL">
</asp:ImageField>
</Columns>
<SelectedRowStyle ForeColor="White" Font-Bold="True" 
                  BackColor="#669999"></SelectedRowStyle>
<RowStyle ForeColor="#000066"></RowStyle>
</asp:GridView>
<asp:ObjectDataSource ID="ObjectDataSource1" 
                      runat="server" 
                      SelectMethod="GetData"
                      TypeName="ImagesInGridView">
</asp:ObjectDataSource>

Now save the project, build it and run it.

Hope this helps

Related Posts:
Insert Delete Edit Update GridView with ObjectDataSource

Insert Edit Delete record in GridView using SqlDataSource ItemTemplate and EditItemTemplate

Edit or update multiple records/rows in gridview with checkbox

Delete multiple rows in Gridview with checkbox and delete confirmation Javascript

Add Auto Number Column in GridView or DataList
If you like this post than join us or share

4 comments:

Mike Mac said...

I know you say that your site is best viewed in Firefox but it actually shows errors in IE. We are all aware that codewise Firefox Mozilla is cleaner and arguably more efficient but your site closes IE with an error which means around 70% of the browsing population do not see your site.

You have code examples for ASP.NET and MSSQL yet Explorer users cannot view them? Isn't that odd? Let me know if you need a screengrab of the issue.

Mike Mac
mike@designm3.com


Anonymous said...

Thank you for this post. It helped me a LOT!!!


Anonymous said...

tell me onething ..if i want to add the columns in the gridview as per the user input ..how do i do it ??
m kinda stuck ..

regards.


kavya said...

nice


Find More Articles