Develop Reference

How to fix the width for each column in GridView?

How can I fix the width for each column in GridView. My GridView keeps extend along with data in the cell. I need it to skip to new line when it reach the right side of the cell. This is my code in .aspx file:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="Emp_ID" DataSourceID="LinqDataSource1"
AllowPaging="True" AllowSorting="True" Width="900px" HorizontalAlign="Center" >
<Columns>
<asp:BoundField DataField="Emp_ID" HeaderText="ID"
InsertVisible="False" ReadOnly="True" SortExpression="Emp_ID"/>
<asp:BoundField DataField="Emp_Username"
HeaderText="Username" SortExpression="Emp_Username" />
<asp:BoundField DataField="Emp_Password"
HeaderText="Password" SortExpression="Emp_Password" />
<asp:BoundField DataField="Emp_Name"
HeaderText="ชื่อพนักงาน" SortExpression="Emp_Name" />
<asp:BoundField DataField="Emp_Address"
HeaderText="ที่อยู่" SortExpression="Emp_Address" />
<asp:BoundField DataField="Emp_Tel"
HeaderText="เบอร์โทรศัพท์" SortExpression="Emp_Tel" />
<asp:TemplateField HeaderText="รูปพนักงาน" SortExpression="Emp_Picture">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Emp_Picture") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image2" runat="server" Height="70px"
ImageUrl='<%# Eval("Emp_Picture", "{0}") %>' Width="50px" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Status" HeaderText="สถานะ"
SortExpression="Status" />
<asp:HyperLinkField DataNavigateUrlFields="Emp_ID"
DataNavigateUrlFormatString="AdminUpdate.aspx?Emp_ID={0}" Text="Edit" />
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="ChkSelectAll" runat="server"
AutoPostBack="True" oncheckedchanged="ChkSelectAll_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="Chk" runat="server" AutoPostBack="True" oncheckedchanged="Chk_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Here's my design view:
As you can see, the first 4 columns has no problem with that until column 5. It keeps extend cause all GridView extend out of the page

Set itemstyle width of every column.For example.
<asp:BoundField DataField="Emp_Address"
HeaderText="ที่อยู่" SortExpression="Emp_Address">
<ItemStyle Width="200px" HorizontalAlign="Left" />
</asp:BoundField>

Wrapping is done based on words so that any single word is not broken in two lines.
So won't work for you if your data has long string without space.
The problem is that you can't insert spaces on your own because that may change the meaning of data.
While showing in grid we show only that long string which can be accommodated in column and then add "..." (only if string is more than what is showing) and then add a tooltip to show the full string.
That way the grid formatting is not compromised and if user wants he can hover his mouse and see the whole string.
hope this helps Example

Try setting the property RowStyle-Wrap of the GridView to True.

You can use ItemStyle-Width to fix the column width ,but in case you enter characters which can not be enclosed in given width (As seen in your image) ,column will expand as per the inputs so you can use RowStyle-Wrap property of gridview
<asp:GridView ID="grdVwtrial" runat="server" RowStyle-Wrap="true">

RowStyle-Wrap==true should work I guess. For more clarifications refer this:
http://forums.asp.net/t/1263769.aspx

gridview CommandField Update & cancel image coming Up down on IE

i am using Gridview.
my code is:
<asp:GridView ID="gvReceivers" runat="server" AutoGenerateColumns="False"
BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px"
CellPadding="2" ForeColor="Black" GridLines="None"
OnRowEditing="RowEditing" Font-Size="Medium"
OnSelectedIndexChanging="gvReceivers_SelectedIndexChanging"
onrowcancelingedit="gvReceivers_RowCancelingEdit"
onrowdeleting="gvReceivers_RowDeleting"
onrowupdating="gvReceivers_RowUpdating">
<FooterStyle BackColor="Tan" />
<Columns>
<asp:CommandField ShowEditButton="True" ButtonType="Image"
CancelImageUrl="~/Images/Cancel.png" UpdateImageUrl="~/Images/save.png"
EditImageUrl="~/images/Edit.png" ItemStyle-Width="25px"
UpdateText="Update" CancelText="Cancel" />
<asp:CommandField ShowDeleteButton="true"
DeleteImageUrl="~/Images/delete.png" ButtonType="Image"
ItemStyle-Width="25px" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgSelect"
CommandName="Select" AlternateText="Select"
ImageUrl="~/Images/allowed.png" />
</ItemTemplate>
</asp:TemplateField>
now, i click on edit image. update & cancel images & Event are coming.but issue is on IE Update & Cancel image coming Up & Down. it's working fine on Mozila & chrome.check below image.

It's simple just add ItemStyle-Wrap="false" in your column.

It seems you have not given any width for ItemTemplate, you can take two separate ItemTemplate or you can also work with single.
<asp:TemplateField HeaderText="ColumnHeader">
<EditItemTemplate>
//You controls
</EditItemTemplate>
<ItemStyle Width="30%" />
*Edit *
You can follow this link and update code accordingly. If get stuck any where then you can ask me. Here we can guide you but the main task you have to do your self.

As Dorel Domocos suggested, I managed to solve the line break using the ItemStyle Wrap in the CommandField.
For example:
<asp:CommandField ButtonType="Image" ShowEditButton="True" EditImageUrl="~/images/edit.png" CancelImageUrl="~/images/cancel.png" UpdateImageUrl="~/images/update.png" ItemStyle-Wrap="false" >
<ItemStyle Wrap="False" Width="48px"></ItemStyle>
</asp:CommandField>
It can be either on the CommandField with the attribute ItemStyle-Wrap="false", or with its ItemStyle element with Wrap="False" attribute.
The generated result has the white-space:nowrap; CSS style, having the following when being in Edit mode:
<td style="width:48px;white-space:nowrap;">
<input type="image" name="GridView1$ctl02$ctl00" src="images/update.png" alt="Update">
<input type="image" src="images/cancel.png" alt="Cancel" onclick="javascript:__doPostBack('GridView1','Cancel$0');return false;">
</td>
Hope it helps.

<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgSelect"
CommandName="Select" AlternateText="Select"
ImageUrl="~/Images/allowed.png" />
</ItemTemplate>
<ItemStyle Width="30%" />
</asp:TemplateField>

GridView Sorting is not working

Merged with GridView sorting works once only.
Please help me, I set Allowsorting="true" but sorting is not working in my GridView. I want automatic sorting i.e. sorting without handling its event.
Here is code of aspx page:
<asp:GridView ID="gdvSignatureLines" runat="server" CssClass="Grid1" AutoGenerateColumns="False"
SkinID="PagedGridView" AllowPaging="True" AllowSorting="True" DataKeyNames="Id"
onrowcommand="gdvSignatureLines_RowCommand"
onrowdeleting="gdvSignatureLines_RowDeleting"
onrowediting="gdvSignatureLines_RowEditing">
<PagerStyle CssClass="gridPager" HorizontalAlign="Right" />
<Columns>
<ucc:commandfieldcontrol headertext="Actions" showdeletebutton="true" buttontype="Image"
deleteimageurl="~/App_Themes/Default/images/delete.png" showeditbutton="true"
editimageurl="~/App_Themes/Default/images/edit.png" deleteconfirmationtext="Are you sure you want to delete?">
<ItemStyle HorizontalAlign="Center" Width="60px" />
</ucc:commandfieldcontrol>
<asp:BoundField DataField="SortOrder" HeaderText="Line" SortExpression="SortOrder" />
<asp:TemplateField HeaderText="Type">
<ItemTemplate>
<asp:Label ID="lblglTypeId" runat="server" Text='<%# Eval("GeneralLookup.LookupItem") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Label">
<ItemTemplate>
<asp:Label ID="lblglLabelId" runat="server" Text='<%# Eval("GeneralLookup1.LookupItem") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Caption" HeaderText="Caption" SortExpression="Caption" />
</Columns>
<EmptyDataTemplate>
<div class="divEmptyListingGrid">
--- No Signature Line Exists ---
</div>
</EmptyDataTemplate>
</asp:GridView>
Here is the code of CS file:
protected void LoadSignatureList(int reportId, string reportName)
{
lblHeading.Text = "Signature Line for " + reportName;
ReportOptionsBO reportOptionsBO = new ReportOptionsBO();
this.gdvSignatureLines.DataSource = reportOptionsBO.GetReportSignatureLineByReportId(reportId);
this.gdvSignatureLines.DataBind();
}
When I click on the Header of column "Line" or "Caption", nothing happens.
I have one more grid that is working fine. The difference between both is, data is bound to this grid on runtime. But the other grid's datasource is preset.
My current grid has not these options of Enable Paging and Enable Sorting.
Please help as soon as possible.

Gridview page index updating only when it feels like it

I have a gridview that receives a data source with 8621 entries with the page size set to 20. The first page is displayed exactly as it should be. I click the link to display page 2, and it also displays as it should. Anything after that however is still page 2. So if I click the link to go to page 3, the paging control updates saying I am on page 3, but the data displayed is the data on page 2. I know the gridview is getting all 8621 entries because if I change the page size to 200 it displays those 200. Why would the gridview work correctly for some pages but not others? Anyways, enough with my rambling, here is the code itself:
<ajax:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<cb:SortedGridView ID="SearchUsersGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="Email"
DefaultSortDirection="Ascending" DefaultSortExpression="Email"
AllowPaging="true" PageSize="20" AllowSorting="true" Width="100%" SkinID="PagedList">
<Columns>
<asp:TemplateField HeaderText="In List">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:CheckBox ID="IsInEmailList2" runat="server" checked='<%#IsInEmailList(Container.DataItem)%>' OnCheckedChanged="IsInEmailList_CheckedChanged" AutoPostBack="true" ></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email" SortExpression="Email">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
<ItemTemplate>
<asp:HyperLink ID="NameLink2" runat="server" Text='<%# Eval("Email") %>' NavigateUrl='<%#GetEditUserUrl(Container.DataItem)%>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name" SortExpression="LastName">
<HeaderStyle horizontalalign="Left" />
<ItemStyle horizontalalign="Left" />
<ItemTemplate>
<asp:Label ID="FullNameLabel2" runat="server" Text='<%#GetFullName(Container.DataItem)%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<div align="center">
<asp:Label runat="server" ID="noUsersFound" enableViewState="false" Text="No matching users found."/>
</div>
</EmptyDataTemplate>
</cb:SortedGridView>
</ajax:UpdatePanel>
and some relevant code behind:
SearchUsersGrid.Visible = true;
SearchUsersGrid.DataSourceID = "SearchUsersDs";
SearchUsersGrid.DataBind();
and the data source itself
<asp:ObjectDataSource ID="SearchUsersDs" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="FindUsersByName" TypeName="Builder.Users.UserDataSource"
SelectCountMethod="CountUsersByName" EnablePaging="True" SortParameterName="sortExpression" DataObjectTypeName="Builder.Users.User" DeleteMethod="Delete">
<SelectParameters>
<asp:ControlParameter ControlID="SearchText" Name="searchPattern" PropertyName="Text" Type="String" />
<asp:ControlParameter ControlID="SearchByDropDown" Name="searchField" PropertyName="SelectedValue" Type="Object" />
</SelectParameters>
</asp:ObjectDataSource>
There is no PageIndexChanged event. Any ideas?

Remove the AJAX update panel and check if it works as expected.. Another problem might be that if you bind the Grid in page_load make sure it is not posted back everytime.. put it in
if(!IsPostBack)
{
SearchUsersGrid.Visible = true;
SearchUsersGrid.DataSourceID = "SearchUsersDs";
SearchUsersGrid.DataBind();
}

I think the issue had to do with our production server. for some reason the code works great on our production box (even with the same data).

Gridview OnRowCreated event gets triggered multiple times - dropdownlist gets populated twice

Attaching the code below - its a simple code that just initializes the dropdown (calling ddl.Clear()) and adds an item with text "select" which has value "-1".
Filldropdowns(ddl) are methods that get specific data and populate it into the dropdown method. The methods individually work fine outside the gridview on normal dropdownlists.
What happens is this eventhandler gets called more than once for each gridview row. As an end result, the dropdowns contain double the values they are supposed to contain (the complete set of values just get repeated).
Anyone knows why this is happening? Turning off appenddatabounditems is not an option because i need the items to be appended below the "select".
Strange thing is, when I debug, even on the second time call for the same row, it shows that the dropdownvalues contain zero items and then contains the required number of items. But by the time I reach grdAccountsMapping_DataBound() handler, it shows twice the number of items.
public void grdAccountsMapping_RowCreated(object sender, GridViewRowEventArgs e)
{
GridViewRow row = e.Row;
if (row.RowType == DataControlRowType.DataRow)
{
DropDownList ddlGrdFeeFormat = (DropDownList)row.FindControl("ddlFeeFormat");
DropDownList ddlGrdTransactionMode = (DropDownList)row.FindControl("ddlTransactionMode");
DropDownList ddlGrdFeeParticular = (DropDownList)row.FindControl("ddlFeeParticular");
DropDownList ddlGrdCompany = (DropDownList)row.FindControl("ddlCompany");
DropDownList ddlGrdAccounts = (DropDownList)row.FindControl("ddlAccounts");
DropDownList ddlGrdFeeBook = (DropDownList)row.FindControl("ddlFeeBook");
InitializeDropdown(ddlGrdFeeBook);
InitializeDropdown(ddlGrdFeeFormat);
InitializeDropdown(ddlGrdTransactionMode);
InitializeDropdown(ddlGrdFeeParticular);
InitializeDropdown(ddlGrdCompany);
getDDLValues.FillFeeBooks(ddlGrdFeeBook);
getDDLValues.FillFeeFormats(ddlGrdFeeFormat);
getDDLValues.FillPaymentModes(ddlGrdTransactionMode);
getDDLValues.FillFeeParticulars(ddlGrdFeeParticular);
getDDLValues.FillAccountingCompanies(ddlGrdCompany);
}
}
The aspx page grid definition looks like this
<asp:GridView CssClass="Grid" ID="grdAccountsMapping" runat="server" Width="98%"
EmptyDataText="No records found in this section" EmptyDataRowStyle-Height="40px"
AutoGenerateColumns="False" AccessKey="2" DataKeyNames="FAM_MAP_ID" OnRowCommand="grdAccountsMapping_RowCommand"
OnRowCreated="grdAccountsMapping_RowCreated" OnDataBound="grdAccountsMapping_DataBound"
Visible="false">
<AlternatingRowStyle CssClass="alternateGridItem" HorizontalAlign="Left" />
<RowStyle CssClass="gridItem" HorizontalAlign="Left" />
<EmptyDataRowStyle CssClass="gridItem" HorizontalAlign="Center" Font-Bold="True"
ForeColor="Red" Height="40px" VerticalAlign="Middle" />
<HeaderStyle CssClass="tabledarklabel" />
<FooterStyle CssClass="Grid_Footer" />
<Columns>
<asp:TemplateField HeaderText="Fee Book">
<ItemTemplate>
<asp:DropDownList ID="ddlGrdFeeBook" CssClass="dropdownwidth3" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="5%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Fee Format">
<ItemTemplate>
<asp:DropDownList ID="ddlGrdFeeFormat" CssClass="dropdownwidth3" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="5%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Transaction Mode">
<ItemTemplate>
<asp:DropDownList ID="ddlGrdTransactionMode" CssClass="dropdownwidth3" runat="server"
AppendDataBoundItems="True" >
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fee Particulars">
<ItemTemplate>
<asp:DropDownList ID="ddlGrdFeeParticular" CssClass="dropdownwidth3" runat="server"
AppendDataBoundItems="True">
</asp:DropDownList>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="5%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Company">
<ItemTemplate>
<asp:DropDownList ID="ddlGrdCompany" CssClass="dropdownwidth3" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="5%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Account">
<ItemTemplate>
<asp:DropDownList ID="ddlGrdAccounts" CssClass="dropdownwidth3" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="5%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Active">
<ItemTemplate>
<asp:CheckBox ID="chkActive" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="5%" />
</asp:TemplateField>
</Columns>
<PagerSettings Visible="False" />
<PagerStyle BorderStyle="None" />
</asp:GridView>
The other methods used just retrieve a dataset for the data needed, assign it to the datasourceo of the dropdown and then bind it to the dropdownlist control. Those methods work fine on dropdowns outside the grid, and I have unit tested them - so I am sure the problem is not there.

How are you binding the grid? Are you calling DataBind() and/or Rebind() multiple times by accident?

We just deleted the file and created it again and it seemed to work. I din't have much time to dig into the details since we were on a deadline, but that wierd issue has not happened again!