GridView automatically re-sizing itself - asp.net

I have a GridView in asp that keeps re-sizing itself. Can i in some way fix the size of the GridView so it doesn't do that ? The GridView keeps shrinking itself although the data in it has the same length or is smaller
my asp code:
<asp:GridView ID="Grid" runat="server" AllowPaging="True" PageSize="18" OnPageIndexChanging="Grid_PageIndexChanging"
ForeColor="Black" GridLines="Both" Width="991px" Height="600px" RowStyle-HorizontalAlign="Center"
BackColor="White" BorderColor="#999999" BorderWidth="1px"
AutoGenerateColumns="False" style="margin-left: 9px">
<Columns>
<asp:TemplateField HeaderText="RequestID">
<ItemTemplate>
<a target = "_blank" href="www.danx/default?request=<%# Eval("request")%>"><%# Eval("request")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Barcode">
<ItemTemplate>
<a target = "_blank" href="www.danx/default?barcode=<%# Eval("barcode")%>"><%# Eval("barcode")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="adrid" HeaderText="AdrID" SortExpression="AdrID" />
<asp:BoundField DataField="name" HeaderText="Navn" SortExpression="Name" />
<asp:BoundField DataField="street" HeaderText="Vej" SortExpression="Street" />
<asp:BoundField DataField="houseno" HeaderText="Husnr"
SortExpression="HouseNo" />
<asp:BoundField DataField="postal" HeaderText="Postnr"
SortExpression="Postal" />
<asp:BoundField DataField="city" HeaderText="By" SortExpression="City" />
<asp:BoundField DataField="country" HeaderText="Land"
SortExpression="Country" />
<asp:TemplateField HeaderText="Lokation">
<ItemTemplate>
<a target = "_blank" href="https://maps.google.dk/maps?q=<%# Eval("latitude")%>,<%# Eval("longitude")%>"><%# Eval("latitudetxt")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="date" HeaderText="ReceivedDate"
SortExpression="ReceivedDate" />
</Columns>
<FooterStyle BackColor="#CCCCCC" />
<RowStyle HorizontalAlign="Center"></RowStyle>
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Blue" HorizontalAlign="Center" />
<HeaderStyle BackColor="DarkGray" Font-Bold="True" ForeColor="Black" />
<AlternatingRowStyle BackColor="LightGray" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
Can you help me please?

Since you are using a fixed width (991px) for the gridview, the columns would shrink/adjust as their content grow larger. One thing you could do is give fixed width to those columns you don't want resized (in % or fixed). e.g.
<ItemTemplate>
<a target = "_blank" href="www.danx/default?request=<%# Eval("request")%>"><%# Eval("request")%></a>
</ItemTemplate>
You can also increase the size of the GridView to easily accomodate the columns e.g. Setting it to 100% if the container is greater 991px

is this maybe to do with the data in the cells being too long without spaces.. you can always use
td{word-wrap:break-word;}
or make sure you have spaces.
or even use styles for the columns, which set the widths explicitly
<asp:TemplateField HeaderText="RequestID" HeaderStyle-CssClass="setWidthClass">
<ItemTemplate>...
or even
<asp:TemplateField HeaderText="RequestID" ItemStyle-Width="100">
of course it may be nothing to do with this.

Related

EmptyDataTemplate Does not show when Empty

I have a gridview that has a EmptyDataTemplate, but it does not show when there is no data.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"
BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" DataKeyNames="TransID"
Font-Size="Small" GridLines="Vertical" HorizontalAlign="Center" PageSize="50"
AutoGenerateDeleteButton="True" AllowSorting="True" >
<PagerSettings FirstPageText="First" LastPageText="Last" Mode="NextPreviousFirstLast"
NextPageText="Next" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="TransID" HeaderText="Transaction ID" InsertVisible="False"
ReadOnly="True" SortExpression="TransID">
<HeaderStyle Font-Underline="False" />
</asp:BoundField>
<asp:BoundField DataField="LicNumFrom" HeaderText="License Number From" SortExpression="LicNumFrom" />
<asp:BoundField DataField="LicNameFrom" HeaderText="Name From" SortExpression="LicNameFrom" />
<asp:BoundField DataField="LicNumTo" HeaderText="License Number To" SortExpression="LicNumTo" />
<asp:BoundField DataField="LicNameTo" HeaderText="Name To" SortExpression="LicNameTo" />
<asp:BoundField DataField="DateOfDelivery" HeaderText="Date Of Delivery" SortExpression="DateOfDelivery"
DataFormatString="{0:MM/dd/yyyy}" />
<asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#2D5278" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#DCDCDC" />
<EmptyDataTemplate>
<div>
No Data Available
</div>
</EmptyDataTemplate>
</asp:GridView>
All it shows is a little square. I've tried putting a Label in the EmptyDataTemplate, but it doesn't work either.
You should check the CSS style of EmptyDataTemplate. It looks like you are getting it in a square box but texts are same as your background color and so they are lost in the background. You are getting that square box because you are applying 1px black border to your GridView which also gets applied to EmptyDataTemplate by default.
Try to apply EmptyDataRowStyle-ForeColor="#000" attribute to your GridView with any color which is not same as GridView background color and check the result.

How to adjust footer template horizontal align?

I would like to adjust footer template horizontal align as left in grid but, it's not working any one can explain please. this is my code
<asp:GridView ID="Grd_View" ShowFooter="True" runat="server" OnRowEditing="Grd_View_RowEditing" AutoGenerateColumns="False"
DataKeyNames="CustomerCode" CellPadding="4" OnRowCommand="Grd_View_RowCommand" GridLines="None" ShowHeader="True"
AllowPaging="True" AllowSorting="True" CssClass="style2" ForeColor="#333333" OnRowDataBound="Grd_View_RowDataBound"
OnRowDeleting="Grd_View_RowDeleting" >
<FooterStyle BackColor="#555555" ForeColor="White" HorizontalAlign="Center" Font-Bold="True" />
<Columns>
<asp:BoundField DataField="CustomerCode" HeaderText="Customer Code" InsertVisible="False"
ReadOnly="True" SortExpression="CustomerCode" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="CustomerName" HeaderText="Customer Name" SortExpression="CustomerName" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="TellNo" HeaderText="Tell No" SortExpression="TellNo" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="FaxNo" HeaderText="Fax No" SortExpression="FaxNo" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="PIC" HeaderText="Person in Contact" SortExpression="PIC" ItemStyle-HorizontalAlign="Center" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="btnEdit" runat="server" CommandArgument='<%#Eval("CustomerCode")%>' CommandName="Edit" Text="Edit">
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="btnDelete" runat="server" CommandArgument='<%#Eval("CustomerCode")%>' CommandName="Delete" Text="Delete">
</asp:LinkButton>
</ItemTemplate>
<FooterTemplate> <asp:LinkButton ForeColor="white" ID="btnNew" runat="server" CommandArgument='<%#Eval("CustomerCode")%>' CommandName="New" Text="New">
</asp:LinkButton>
</FooterTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#777777" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#555555" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
Try using the below:
<FooterTemplate>
<asp:LinkButton ForeColor="white" ID="btnNew" runat="server" CommandName="New" Text="New">
</asp:LinkButton>
</FooterTemplate>
<FooterStyle HorizontalAlign="Left" />
The Reason your footer template will always be in right is because you are creating it as the last column in the GridView along with the Delete column.
To solve this you need to create the footer template in the first column or I'll recommend just putting the footer template inside with edit template field in the first column and the delete template field in the second column.

filter gridview using checkbox

I have a gridView and two checkboxes that will be used for filtering..
the first checkbox(Accepted), when checked, the gridview will only show data from the database that have the status Accepted.
Here's my gridview and checkbox:
<div style="height: 250px; overflow-x: hidden; overflow-y: scroll;" >
<asp:CheckBox ID="Accepted" runat="server" />
<asp:CheckBox ID="Pending" runat="server" />
<asp:CheckBox ID="Rejected" runat="server" />
<asp:GridView ID="gvtransaction" runat="server" Width="30%" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="5px" DataKeyNames="id" GridLines="Horizontal" OnRowDataBound="gvtransaction_RowDataBound" OnRowCommand="TransactionStatus">
<Columns>
<asp:BoundField DataField="MerchantID" HeaderText="ID" SortExpression="" />
<asp:BoundField DataField="FirstName" HeaderText="Consumer" SortExpression="" />
<asp:BoundField DataField="LastName" HeaderText="Name" SortExpression="" />
<asp:BoundField DataField="Amount" HeaderText="Amount" SortExpression="" />
<asp:BoundField DataField="CurrencyName" HeaderText="Account Name" SortExpression="" />
<asp:BoundField DataField="Status" HeaderText="Status" SortExpression="" />
<asp:ButtonField ButtonType="Button" CommandName="Accept" HeaderText="Action" ShowHeader="True" Text="Accept" />
<asp:ButtonField ButtonType="Button" CommandName="Reject" HeaderText="Action" ShowHeader="True" Text="Reject" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
How can i do this using javascript.?
thank you...
You can use following properties of gridview 'onrowdatabound and DataKeyNames'.
In DataKeyNames you can give the name of your class variables or properties where you are reading from database through a datareader.
Fire the rowDatabound event of your gridview so that you can check the status
protected void gvtransaction_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
int Status = (int)this.gvtransaction.DataKeys[e.Row.RowIndex].Values[0];
if (Status)
{
.
check status values for Accepted, pending and rejected through if else.
.
.
}
}
You can create 2 Grid views and when one of the check boxes selected bind the associated grid view.

how to make a column width size fixed in datagridview asp?

i have this column in a datagridview on aspx page
<asp:TemplateField HeaderText="Observacion">
<ItemTemplate>
<asp:Label ID="lblOrderID" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="200px" Wrap="False" />
</asp:TemplateField>
I have set up the itemstyle with and wrap to false, but anyways the width columns grows the the data is too long.
i just want to change the height of the column not the width. Here us the complete code of the datagridview
<asp:GridView ID="GridView1" runat="server" AutoGenerateDeleteButton="True" CellPadding="4" EnableModelValidation="True" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False">
<columns>
<asp:boundfield datafield="ID_OBSERVACION" visible="False" />
<asp:boundfield datafield="AUTOR" headertext="Autor" />
<asp:boundfield datafield="FECHA" headertext="Fecha" />
<asp:TemplateField HeaderText="Observacion">
<ItemTemplate>
<asp:Label ID="lblOrderID" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="200px" Wrap="False" />
</asp:TemplateField>
</columns>
<AlternatingRowStyle BackColor="White" ForeColor="#284775" Wrap="False" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" Wrap="False" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>
Apparently, the Width parameter is not compatible with the Wrap
parameter. Without Width, the Wrap=False part is accepted.
Wrap should be set to true so that the browser can wrap the cell contents. However if a single word within the cell is wider than the cell width, the browser would not break it. If that is the case, you may have to use the table-layout: fixed along with column width.

ASP.NET 3.5 Gridview control

If you click on the 'search' button in the following link
link text
A gridview shows up. I am trying to do something similar within a table whose width is set to auto. My current way is to create the gridview in design view, but however, my gridview does not resize to the table width. I understand that I posed 2 different questions in one.
My current gridview is as such. Defined in 'source' view
<asp:GridView ID="gridView" runat="server"
AutoGenerateColumns="False"
EnableSortingAndPagingCallbacks="True"
AllowPaging="True" DataSourceID="FilesByJobObjectDataSource"
PageSize="5" OnRowCommand="gridView_RowCommand" DataKeyNames="FileID"
HorizontalAlign="Left" >
<Columns>
<asp:BoundField DataField="RID" HeaderText="RID"
ReadOnly="True" ItemStyle-Width="50px" >
<ItemStyle Width="50px" />
</asp:BoundField>
<asp:BoundField DataField="Category" HeaderText="Category"
ReadOnly="True" ItemStyle-Width="100 px" >
<ItemStyle Width="100px" />
</asp:BoundField>
<asp:BoundField DataField="FileName" HeaderText="Type"
ReadOnly="True" ItemStyle-Width="575 px" >
<ItemStyle Width="575px" />
</asp:BoundField>
<asp:BoundField DataField="FileID" Visible="false" />
<asp:ButtonField Text="X" ButtonType="Button" ItemStyle-Width="20px" >
<ItemStyle Width="20px" />
</asp:ButtonField>
</Columns>
<RowStyle CssClass="RowStyle" />
<EmptyDataRowStyle CssClass="EmptyRowStyle" />
<PagerStyle CssClass="PagerStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EditRowStyle CssClass="EditRowStyle" />
<AlternatingRowStyle CssClass="AltRowStyle" />
</asp:GridView>
</ContentTemplate>
Don't set the column widths....

Resources