Develop Reference

Grid lines don't show in ASP.NET GridView

I have a weird issue with an ASP.NET GridView control. It won't display vertical lines, no matter what I do. I have set the following:
<asp:GridView runat="server" ID="gvActivity" AllowPaging="true" PageSize="10" AutoGenerateColumns="false" GridLines="Both" BorderColor="#000000" BorderStyle="Solid"
EmptyDataText="No Data Found" Width="100%">
<EmptyDataRowStyle ForeColor="#990000" HorizontalAlign="Center" Font-Bold="true" Font-Size="X-Large" />
<RowStyle BackColor="#ffffff" ForeColor="#000000" BorderColor="#000000" font-names="corbel, verdana, arial" Font-Size="14px" />
<AlternatingRowStyle BackColor="#ffffcc" ForeColor="#000000" BorderColor="#000000" font-names="corbel, verdana, arial" Font-Size="14px" />
<HeaderStyle BackColor="#006699" ForeColor="#ffffff" HorizontalAlign="Center" BorderColor="#000000" font-names="corbel, verdana, arial" Font-Size="14px" />
<Columns>
<asp:BoundField DataField="ActivityDate" HeaderText="Date" DataFormatString="{0:d}" ItemStyle-Width="20%" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="NewCustomers" HeaderText="Customers" DataFormatString="{0:n0}" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="BidPackSales" HeaderText="Packs" DataFormatString="{0:n0}" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="BidPackTotal" HeaderText="Pack Ttl" DataFormatString="{0:c}" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="BPCommissions" HeaderText="Pack Comm." DataFormatString="{0:c}" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="BoxSales" HeaderText="Boxes" DataFormatString="{0:n0}" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="MBCommissions" HeaderText="Box Comm." DataFormatString="{0:c}" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="TotalCommissions" HeaderText="Total Comm." DataFormatString="{0:c}" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="PaidOn" HeaderText="Paid" DataFormatString="{0:d}" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Right" />
</Columns>
</asp:GridView>
The horizontal lines between the rows show up, but not the vertical lines separating cells. Any help on this?

Hum, the lines show up for me. So, either you have some stray css on that page.
I would also consider clearing out your browser cache. And also, try changing the zoom.
I don't have your data, but if take your gv, and shove in my own columns, say like this:
<asp:GridView runat="server" ID="gvActivity" AllowPaging="true"
PageSize="10" AutoGenerateColumns="false" GridLines="Both" BorderColor="#000000"
BorderStyle="Solid"
EmptyDataText="No Data Found" Width="100%">
<EmptyDataRowStyle ForeColor="#990000" HorizontalAlign="Center" Font-Bold="true" Font-Size="X-Large" />
<RowStyle BackColor="#ffffff" ForeColor="#000000" BorderColor="#000000" Font-Names="corbel, verdana, arial" Font-Size="14px" />
<AlternatingRowStyle BackColor="#ffffcc" ForeColor="#000000" BorderColor="#000000" Font-Names="corbel, verdana, arial" Font-Size="14px" />
<HeaderStyle BackColor="#006699" ForeColor="#ffffff" HorizontalAlign="Center" BorderColor="#000000" Font-Names="corbel, verdana, arial" Font-Size="14px" />
<Columns>
<asp:BoundField DataField="Fighter" HeaderText="Fighter" />
<asp:BoundField DataField="Engine" HeaderText="Engine" />
<asp:BoundField DataField="Thrust" HeaderText="Thrust" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="Preview">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" Width="150px"
ImageUrl='<%# Eval("ImagePath")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And then code to load is this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadGrid();
}
void LoadGrid()
{
using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
{
string strSQL = "SELECT * FROM Fighters";
using (SqlCommand cmdSQL = new SqlCommand(strSQL,conn))
{
conn.Open();
DataTable rstData = new DataTable();
rstData.Load(cmdSQL.ExecuteReader());
gvActivity.DataSource = rstData;
gvActivity.DataBind();
}
}
}
I see/get this:
And consider using bootstrap class. You probably have bootstrap included in your project, and they tend without efforts to make your gv look VERY nice.
Lets dump all of your color stuff, and try this:
<asp:GridView runat="server" ID="gvActivity" AllowPaging="true"
PageSize="10" AutoGenerateColumns="false"
EmptyDataText="No Data Found" Width="100%"
CssClass="table table-hover table-striped">
<Columns>
<asp:BoundField DataField="Fighter" HeaderText="Fighter" />
<asp:BoundField DataField="Engine" HeaderText="Engine" />
<asp:BoundField DataField="Thrust" HeaderText="Thrust" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="Preview">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" Width="150px"
ImageUrl='<%# Eval("ImagePath")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And we now get this:
So, we see/get alternate row shading, and the text and spacing is actually quite nice. (padding around the boxes is better). And no need for a bunch of messy hand built formatting.
But, try a different browser, try change the zoom, try clearing your browser cache.
And if need be, give the bootstrap classes a try
these:
CssClass="table table-hover table-striped"
eg:

Aligning checkboxes in the header and column properly

I just can't figure out what I'm doing wrong. I want checkboxes in the first column display in one direct line under my header with checkbox. Code sample:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
GridLines="None" AllowSorting="True"
AllowPaging="True" PageSize="20" Width="100%" >
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input ID="SelectAllEvs" runat="server" type="checkbox" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="EventSelector" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:BoundField DataField="EventDate"
...
<ItemStyle Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="Subject"
...
</asp:BoundField>
<asp:BoundField DataField="Body"
...
</asp:BoundField>
</Columns>
</asp:GridView>
And image sample of what i have in result is attached.
Thanx for any help.

Remove <ItemStyle HorizontalAlign="Left" /> for checkbox. and give a fix width to that column:
<RowStyle Width="150px"/>

Try this code :
<Columns>
<asp:TemplateField HeaderText="Checkbox">
<ItemTemplate>
<asp:CheckBox ID="EventSelector" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
</Columns>

Master page content going out of placeholder

i have a gridview inside content page , but it always goes out of the placeholder of the master page.. i want the gridview to integrate with the width of the place holder, any help please.
I tried to change the width of the grid, but nothing happened.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<br />
<br />
<br />
<div dir="rtl">
<h2 dir="rtl">نتائج البحث</h2>
<h3 runat="server" id="H3_NoResult" dir="rtl"></h3>
<asp:GridView ID="GV_SearchResult" runat="server" AutoGenerateColumns="False" DataKeyNames="AutoNo" DataSourceID="SDS_GetSearchResult" CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" PageSize="300" AllowSorting="True">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="AutoNo" HeaderText="رقم الطعام" InsertVisible="False" ReadOnly="True" SortExpression="AutoNo" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" >
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:HyperLinkField DataTextField="NameAr" HeaderText="اسم العربي للطعام" DataNavigateUrlFields="AutoNo"
DataNavigateUrlFormatString="FoodItem.aspx?AutoNo={0}" SortExpression="NameAr" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" >
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:HyperLinkField>
<asp:BoundField DataField="NameEn" HeaderText="الاسم الانجليزي للطعام" SortExpression="NameEn" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" >
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NameDescAr" HeaderText="وصف الطعام بالعربي" SortExpression="NameDescAr" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" >
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NameDescEn" HeaderText="وصف الطعام بالإنجليزي" SortExpression="NameDescEn" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" >
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="FoodCatName" HeaderText="صنف الطعام" ReadOnly="True" SortExpression="FoodCatName" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" >
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="الصورة" SortExpression="ImgLink">
<ItemTemplate>
<asp:Image ID="Img_TopicImage" AlternateText="لا يوجد صورة" runat="server" Height="70px" Width="100px" ImageUrl='<%#String.Format("../RecipeImages/{0}", Eval("ImgLink")) %>' />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#557c12" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>
<asp:SqlDataSource ID="SDS_GetSearchResult" runat="server" ConnectionString="<%$ ConnectionStrings:dietdbCS %>" SelectCommand="GetFoodListTBL_By_FoodName_By_FoodDescs" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:QueryStringParameter DefaultValue="" Name="FoodName" QueryStringField="val" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</asp:Content>

make the width gridview = 100%
<asp:GridView ID="GV_SearchResult" runat="server" AutoGenerateColumns="False" DataKeyNames="AutoNo" DataSourceID="SDS_GetSearchResult" CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" PageSize="300" AllowSorting="True" width="100%">

Place the gridview inside a div and giv overflow for the div as follows.
<div style="overflow-x:scroll;overflow-y:scroll;">
<asp:gridview id="grid1" runat="server" />
</div>

How to format time(0) SQL data field as AM/PM using GridView DataFormatString property

I have a GridView control that binds to a time(0) SQL data field. I would like to render the output as AM/PM (e.g. 1:35 PM) using the DataFormatString property. I have tried assigning several different values but the compiler throws a "Input string was not in a correct format." error in most cases. So far I have tried the following values:
{0:hh:mm tt}
{0:hh:mm:ss tt}
{0:hh:mm t}
{0:hh:mm:ss t}
{0:t} - complies but does not convert the format
{0:tt} - complies but does not convert the format
<asp:GridView SkinID="ResultsGrid" ID="GridViewAlerts" style="margin-top:2%"
runat="server" DataKeyNames="ID" AutoGenerateColumns="False" OnPageIndexChanging="GridViewAlerts_PageIndexChanging"
OnSorting="GridViewAlerts_Sorting" OnRowCommand="GridViewAlerts_RowCommand"
OnDataBound="GridViewAlerts_DataBound">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID"
ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="5%">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="5%" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name"
ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="10%">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="10%" />
</asp:BoundField>
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description"
ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="30%">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="30%" />
</asp:BoundField>
<asp:BoundField DataField="Interval" HeaderText="Interval" SortExpression="Interval" ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="5%">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="5%" />
</asp:BoundField>
<asp:BoundField DataField="Run_At" HeaderText="At" SortExpression="Run_At" ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left" DataFormatString="{0:t}" ItemStyle-Width="5%">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="5%" />
</asp:BoundField>
<asp:BoundField DataField="Last_Run_Dt" HeaderText="Last Run" SortExpression="Last_Run_Dt" ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left" DataFormatString="{0: MM/dd/yyyy}" ItemStyle-Width="5%">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="5%" />
</asp:BoundField>
<asp:BoundField DataField="Next_Run_Dt" HeaderText="Next Run" SortExpression="Next_Run_Dt" ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left" DataFormatString="{0: MM/dd/yyyy}" ItemStyle-Width="5%">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="5%" />
</asp:BoundField>
<asp:BoundField DataField="Last_Result" HeaderText="Result" SortExpression="Last_Result" ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="5%" >
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="5%" />
</asp:BoundField>
<asp:BoundField DataField="Active" HeaderText="Status" SortExpression="Active"
ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="5%">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="5%" />
</asp:BoundField>
<asp:BoundField DataField="Owner" HeaderText="Owner" SortExpression="Owner"
ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="5%">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="5%" />
</asp:BoundField>
<asp:CommandField ButtonType="Image" SelectImageUrl="~/Images/gear.png" HeaderText="Settings" ShowSelectButton="true" ShowHeader="True" ItemStyle-Width="5%" />
<asp:TemplateField HeaderText="Start/Stop" ItemStyle-Width="5%">
<ItemTemplate>
<asp:ImageButton runat="server" ID="ImageButtonStartStop" ToolTip="Start or stop this alert" ImageUrl="~/Images/start.png"
OnClientClick="GridViewAlerts_RowCommand" CommandName="StartStop" CausesValidation="false"
CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Run" ItemStyle-Width="5%">
<ItemTemplate>
<asp:ImageButton runat="server" ID="ImageButtonRun" ToolTip="Manually run this alert" ImageUrl="~/Images/play.png"
OnClientClick="GridViewAlerts_RowCommand" CommandName="Run" CausesValidation="false"
CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
![screenshot][1]

As #JozefBenikovský pointed out in the comments, you have to use the TimeSpan format strings. This requires you to escape the : field in the format string (or whatever character you use as the separator).
Note that the TimeSpan DOES NOT have an AM/PM designator format field string. To have the AM/PM designator, you will need to cast your SQL Server Time type to a DateTime and then apply the standard DateTime format strings.
The sample below illustrates both concepts:
<div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT ProductId, StoreTime, cast(StoreTime as DateTime) as StoreTimeAsDateTime FROM junk.dbo.[Product]">
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="ProductID"
HeaderText="ProductID"
InsertVisible="False" ReadOnly="True"
SortExpression="ProductID"
DataFormatString="{0:D6}" />
<asp:BoundField DataField="StoreTime"
HeaderText="StoreTime"
SortExpression="StoreTime"
DataFormatString="{0:hh\:mm\:ss}" />
<asp:BoundField DataField="StoreTimeAsDateTime"
HeaderText="StoreTimeAsDateTime"
SortExpression="StoreTime"
DataFormatString="{0:hh:mm:ss tt}" />
</Columns>
</asp:GridView>
</div>

Make sure the field in the database is also in the datetime format. For example, the DataFormatString property does not work if the table field is in varchar format.

Add Image Column to a GridView After Binding

This is May Sample Code in ASP.NET How Can I Add A similar Image Column To All Rows After Binding
gridview1.DataSource = MB.GetTest();
gridview1.DataBind();
And My ASPX Page:
<asp:GridView ID="gridview1" runat="server">
</asp:GridView>
I really need irt, thanks.
Update
<asp:GridView ID="gridview1" runat="server">
<Columns>
<asp:ImageField>
</asp:ImageField>
</Columns>
</asp:GridView>

hi i would like to explain you a little there is a property called AutoGenerateColumns="false" you need to set this as false
and generate columns in your aspx and bind them Refer this Site
<asp:GridView ID="GridView1" Runat="server"
DataSource='<%# GetData() %>' AutoGenerateColumns="False"
BorderWidth="1px" BackColor="White" CellPadding="3" BorderStyle="None"
BorderColor="#CCCCCC" Font-Names="Arial">
<FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
<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:BoundField HeaderText="Date Added" DataField="DateAdded"
DataFormatString="{0:d}">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:ImageField DataImageUrlField="PictureURL"></asp:ImageField>
</Columns>
<SelectedRowStyle ForeColor="White" Font-Bold="True"
BackColor="#669999"></SelectedRowStyle>
<RowStyle ForeColor="#000066"></RowStyle>
</asp:GridView>
There you go with Image column above
<asp:ImageField DataImageUrlField="PictureURL"></asp:ImageField>
MSDN is another best site to refer...
above code is taken from MSDN website.