CODEWITHSUNDEEP
c#asp.netgridview
rootpanthera
rootpanthera

Reputation: 2771

Show as many columns to fit GridView width ASP.NET

I have a GridView which is populated by images from my database. My current GridView looks like that:

enter image description here

But I would like to fit my grid width, like this:

enter image description here

And here is my code:

     <asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"  Width="100%" GridLines="None">

<Columns>

    <asp:ImageField DataImageUrlFormatString="http://myurl/{0}" DataImageUrlField="url" ControlStyle-Height="200px" ControlStyle-Width="200px">
<ControlStyle Height="200px" Width="200px"></ControlStyle>
    </asp:ImageField>

</Columns>
</asp:GridView>

Any help appriciated.

Upvotes: 1

Views: 600

Answers (1)

C Sharper
C Sharper

Reputation: 8626

You can use datalist instead of gridview in this case having 3 columns

It works nearly same as gridview.

<asp:DataList ID="dlImages" runat="server" RepeatColumns="4" CellPadding="3" CellSpacing="3"
                                        RepeatDirection="Horizontal">
                                        <ItemTemplate>
                                            <table class="TableBorder">
                                                <tr>
                                                    <td class="NormalTextBig" valign="top" align="left">
                                                        <%#Container.ItemIndex + 1%>.
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top" align="left">
                                                        <asp:ImageButton ID="ImageButton1" runat="server" CommandName="ImageClick" CommandArgument='<%# Eval("PageName") %>' />
                                                    </td>
                                                </tr>
                                            </table>
                                        </ItemTemplate>
                                    </asp:DataList>

Binding:

  Protected Sub dlImages_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlImages.ItemDataBound
            If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then

                CType(e.Item.FindControl("ImageButton1"), ImageButton).ImageUrl = "ImageResize.aspx?ImageName=ScreenMasterImages/" & e.Item.DataItem("ImgName") & "&BoxSize=" & 300
                CType(e.Item.FindControl("ImageButton1"), ImageButton).ToolTip = e.Item.DataItem("PageName")
            End If
        End Sub

I have used this code for same purpose like you mentioned in my project.

ItemCommand:

Protected Sub dlImages_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) Handles dlImages.ItemCommand
            If e.CommandName = "ImageClick" Then
                Session("ImageName") = e.CommandArgument
                Response.Redirect("ScreenDetails.aspx")
            End If
        End Sub

This is how it will look:

enter image description here

I think you have similar thing to do :)

Upvotes: 2

Related Questions