Develop Reference

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>

Change the back ground color of the text box inside the gridview in asp.net?

I am working on a asp.net application where i am able to load the data from the SQL to the gridview in aspx page.User has the ability to edit and save the values in the gridview.
My grid view has the itemtemplates where i have two colums with textboxes.I want to highlight all the cells with a different color which user edits in the gridview.
I am able to do the same thing for the textboxes in another aspx page with out gridview with java script with the code below:
<script type="text/javascript">
$(document).ready(function() {
$(':input').change(function() {
$(this).addClass("textchanged");
});
});
</script>
<asp:GridView runat="server" ID="gvnames" AutoGenerateColumns="False" CellPadding="4"
Font-Names="Georgia" ForeColor="Black" GridLines="Vertical" BackColor="White"
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" DataKeyNames="Name"
DataSourceID="SqlDataSource1"
>
<RowStyle BackColor="#F7F7DE" />
<colums>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" Visible='<%# !(bool) IsInEditMode %>' runat="server"
Text='<%# Eval("Name") %>' />
<asp:TextBox ID="txtName" Width="250px" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Eval("Name") %>' />
</ItemTemplate>
</asp:TemplateField>
</colums>
<FooterStyle BackColor="#CCCC99" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
When i try to implement the same code for the text box inside a grid view its doesn't work.
Is is the right approach or is there any other way to achieve ?
I would appreciate if some one can guide me in right path.

I think that you should remove the : that is in front of the word input in your jquery. Additionally if this is only supposed to happen to textboxes then you should be more specific in your jquery selector and change it to this:
$('input[type=text]')

In your markup, please change the
<colums><colums>
-tag to
<Columns></Columns>
This should help, if jQuery runs properly

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 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!

How do I make the gridview headers to links?

I want the headers of my gridview to be hyperlinks, without the "SortExpression"...
I searched the net, but I've been not very succesful.
Anyone has the solution?
For example: when clicking on the header of a simple gridview, the site navigates to a webpage. Is it possible?
Thanks in advance!

Have you tried Gridview Header template like...
<asp:GridView runat="server" ID="grd">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:HyperLink runat="server" NavigateUrl="YourURL"> </asp:HyperLink>
</HeaderTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

I think a HeaderTemplate is needed here...
Ref.: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.templatefield.headertemplate.aspx
HTH.

Now I got this gridview, And I need the headers to be clickable, whereafter an event starts (something like OnClickHeader="header_ClickEvent"?) Ofcourse there is a SortExpression element, which enables to sort the grid, but I want to be able to start any event, like when clicking a button.
I could not find any solution within the asp:BoundField nor asp:TemplateField...
I thought a hyperlink could solve the problem, but that was a bit premature.
The Gridview:
<asp:GridView CssClass="gridview" ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="Student_key" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" PagerSettings-Visible="false" PageSize="14">
<HeaderStyle CssClass="headerstyle" />
<RowStyle CssClass="rowstyle"/>
<AlternatingRowStyle CssClass="altrowstyle" />
<Columns>
<asp:BoundField DataField="Studentnumber" HeaderText="Studentnummer" >
<HeaderStyle CssClass="header100" />
</asp:BoundField>
<asp:BoundField DataField="Prefix" HeaderText="Voorletters" >
<HeaderStyle CssClass="header75" />
</asp:BoundField>
<asp:BoundField DataField="prename" HeaderText="Voornaam" SortExpression="Voornaam">
<HeaderStyle CssClass="header75" />
</asp:BoundField>
<asp:BoundField DataField="nickname" HeaderText="Roepnaam" >
<HeaderStyle CssClass="header100" />
</asp:BoundField>
<asp:BoundField DataField="insertion" HeaderText="Tussenvoegsel" >
<HeaderStyle CssClass="header100" />
</asp:BoundField>
<asp:BoundField DataField="surname" HeaderText="Achternaam">
<HeaderStyle CssClass="header100" />
</asp:BoundField>
<asp:CommandField SelectText="show results" ShowSelectButton="True" >
<HeaderStyle CssClass="header100" />
</asp:CommandField>
</Columns>
<EmptyDataTemplate >There are no results shown, please try again.</EmptyDataTemplate>
</asp:GridView>

I used a method that might be a little unconventional but it works. In my case I wanted to use the standard BoundField controls in my gridview as opposed to using a template field with both a HeaderTemplate and ItemTemplate. I used a simple gridview based on a SQL datasource that looks like this.
<asp:GridView
ID="gvTopXByContest"
runat="server"
AutoGenerateColumns="False"
DataSourceID="dsTopXByContest"
AllowSorting="true"
OnSorting="gvTopXByContest_OnSorting" >
<Columns>
<asp:BoundField DataField="txtOnlineUserName" HeaderText="Fan Name & Rank" SortExpression="txtOnlineUserName" ItemStyle-Width="155px"></asp:BoundField>
<asp:BoundField DataField="fltTotalPoints" HeaderText="Points" SortExpression="fltTotalPoints" ItemStyle-Width="40px"></asp:BoundField>
<asp:BoundField DataField="curWon" HeaderText="Won" SortExpression="curWon" ItemStyle-Width="40px"></asp:BoundField>
</Columns>
</asp:GridView>
I then used code that fires on the OnSorting event of the gridview to do my redirects
Protected Sub gvTopXByContest_OnSorting(sender As Object, e As GridViewSortEventArgs)
If e.SortExpression <> DirectCast(sender, GridView).SortExpression Then
If e.SortExpression = "txtOnlineUserName" Then
Response.Redirect(URL to redirect to goes here)
ElseIf e.SortExpression = "fltTotalPoints" Then
Response.Redirect(URL to redirect to goes here)
Else
'I could have used another ElseIf here but since there are only 3 columns Else works
Response.Redirect(URL to redirect to goes here)
End If
End Sub