Removing highlighted row in gridview : The Official Microsoft ASP.NET Forums

Reply

connersz

Member

153 Points

Removing highlighted row in gridview

Feb 24, 2012 10:06 AM|LINK

Hi i have a gridview with buttons down the left, when i click the button i want to highlight the row, when i click another button on another row i want to remove the highlight from the old row and highlight the new one.

At the moment when i click another row it just highlights that additionally.

Can anyone suggest how to get around this?

Just so you know i have tried to re-apply the grids own style before to reset it but it didnt work.

Private Sub gvResult_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles gvResult.RowEditing

        'Get row number
        rowidx = e.NewEditIndex
        'Get the customer ship to number for the selected row
        Dim lblCustCode As Label = gvResult.Rows(e.NewEditIndex).Cells(0).FindControl("lblShipToReference")
        CustShipTo = lblCustCode.Text

        'set the row colour to indicate its selection
        gvResult.Rows(rowidx).CssClass = "gvBackHighlightGreen"

        fsShipTo.Visible = True
        gvResult.Visible = True
        gvAuditTrail.Visible = True
        fsAuditTrail.Visible = True
        fsAuditTrail.Title = "Audit Trail(Ship To Ref:" & CustShipTo & ")"
        'Fill the audi trail grid with info.
        FillTrailGrid()

        If Not dtEventLog.Rows.Count = 0 Then
            gvAuditTrail.Rows(0).CssClass = "gvBackHighlightGreen"
        End If


    End Sub

Reply

basheerkal

Star

10672 Points

2426 Posts

Re: Removing highlighted row in gridview

Feb 24, 2012 10:12 AM|LINK

This Will Help You I hope ( Declare I as Integer)

Protected Sub GridView1_SelectedIndexChanged(sender As Object, e As System.EventArgs)
        For I = 0 To GridView1.Rows.Count - 1
            GridView1.Rows(I).BackColor = Color.White
        Next
        GridView1.Rows(GridView1.SelectedIndex).BackColor = Color.Bisque
    End Sub

Kindly mark this post as "Answer", if it helped you.

(Talk less..Work more)

Edited by basheerkal on Feb 24, 2012 10:13 AM

Reply

connersz

Member

153 Points

175 Posts

Re: Removing highlighted row in gridview

Feb 24, 2012 10:19 AM|LINK

The thing is its not using selectedindexchanged and also the main grid style uses an alternating row style so one row is white then the next is light grey.

Reply

paindaasp

Star

12050 Points

2034 Posts

Re: Removing highlighted row in gridview

Feb 24, 2012 10:43 AM|LINK

This isn't exactly what you are asking for, but maybe you can use it in some way. This will highlight a row on a click, and unhighlight on another click. Multiple rows can be highlighter. It uses mostly JavaScript. In the GridView's RowDataBound event for a DataRow add this:

tr.Attributes.Add("onclick", "togglecolor(this)")
tr.Attributes.Add("title", "Click to Highlight row.")

Add this Javascript to your ASPX page:

  <script type="text/javascript">
    function togglecolor(tr) {
      if (tr.style.backgroundColor == "#c9c299") {
        // alert("Was tan." + tr.style.backgroundColor);
        tb = tr.parentNode.parentNode
        tr.style.backgroundColor = tb.style.backgroundColor;
        tr.setAttribute("title", "Click to Highlight row.");
      }
      else {
        // alert("Was White." + tr.style.backgroundColor);
        tr.style.backgroundColor = "#c9c299";
        tr.setAttribute("title", "Click to Un-Highlight row.");
        //  tbl.setAttribute("border", "2");
      }
    }       
  </script>

Reply

hans_v

All-Star

35986 Points

6550 Posts

Re: Removing highlighted row in gridview

Feb 24, 2012 11:16 AM|LINK

connersz
The thing is its not using selectedindexchanged

You better should. Create a CSS class for the SelectedRow, and then in your code behind add the code below, to select a row by cliccking anywhere in the row:

Protected Sub gvResult_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvResult.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            e.Row.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(sender, "Select$" + e.Row.RowIndex.ToString))
        End If
    End Sub

Reply

connersz

Member

153 Points

175 Posts

Re: Removing highlighted row in gridview

Feb 24, 2012 02:01 PM|LINK

Ok well i have done it this way and am now using selectedindexchanged.

However i have a couple of problems now, the first is i get an error:

An error occurred while communicating with the remote host. The error code is 0x80070057.

When i click on a row, its not a big one because i can step through it without issue.

The second problem is that if i selected a row, say the 6th one down and highlight it, then click another page on the pager, that row on the new page will lose all its data.

Whats going on here?

Reply

connersz

Member

153 Points

175 Posts

Re: Removing highlighted row in gridview

Feb 24, 2012 04:19 PM|LINK

Any ideas?

Reply

Zhongqing Ta...

Star

10513 Points

1354 Posts

Re: Removing highlighted row in gridview

Feb 27, 2012 07:18 AM|LINK

Hi,

Please post your page code to troubleshoot the issue.

connersz

when i click the button i want to highlight the row, when i click another button on another row i want to remove the highlight from the old row and highlight the new one.

If you don't need to know which row is highlight on server side, I suggest you try this jquery solution

<asp:GridView ID="GridViewID" runat="server" ......>
            <Columns>
                ......
                ......
                <asp:TemplateField HeaderText="HighLight">
                    <ItemTemplate>
                        <input class="highlight" type="button" value="Highlight" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <script type="text/javascript">
            $(".highlight").click(function () {
                $(this).parent().parent().siblings('tr').css('background-color', 'white');
                $(this).parent().parent().css('background-color', 'gray');
            });
        </script>

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Reply

connersz

Member

153 Points

175 Posts

Re: Removing highlighted row in gridview

Feb 27, 2012 08:56 AM|LINK

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ShipToRefHistory.ascx.vb"
	Inherits="JAZZWeb.ShipToRefHistory" %>
<%@ Register Assembly="EISSCodeLibrary" Namespace="EISSCodeLibrary.EISSGridView"
    TagPrefix="cc4" %>
<%@ Register Assembly="EISSCodeLibrary" Namespace="EISSCodeLibrary.EISSButton" TagPrefix="cc2" %>
<%@ Register Assembly="EISSCodeLibrary" Namespace="EISSCodeLibrary.EISSControls"
	TagPrefix="cc3" %>
<%@ Register Assembly="EISSCodeLibrary" Namespace="EISSCodeLibrary.EISSFieldset"
	TagPrefix="cc1" %>
<%@ Register Assembly="EISSCodeLibrary" Namespace="EISSCodeLibrary.dynacombo" TagPrefix="cc5" %>

<cc1:EISSFieldset ID="fsFilters" runat="server" Width="100%" Title="Select your Filters">
	<table style="width: 100%;">
		<col style="width: 10%" />
		<col style="width: 23%" />
		<col style="width: 3%" />
		<col style="width: 10%" />
		<col style="width: 23%" />
		<col style="width: 8%" />
		<col style="width: 23%" />
		<tr>
			<td style="padding-left: 10px">
				<cc3:EISSLabel ID="lblERP" runat="server" Text="ERP" IsMandatory="true">
				</cc3:EISSLabel>
			</td>
			<td>
				<asp:DropDownList ID="ddlERP" runat="server" Width="100%" DataTextField="ERPDesc"
					DataValueField="ERPID">
				</asp:DropDownList>
			</td>
			<td>
				<asp:RequiredFieldValidator ID="rfvERP" runat="server" Text="*" ErrorMessage="Please select an ERP."
					CssClass="lblErr" ValidationGroup="GetData" ControlToValidate="ddlERP" />
			</td>
			<td style="padding-left: 10px">
				<cc3:EISSLabel ID="lblShipToResponsibleBU" runat="server" Text="Ship To Resp. BU"
					IsMandatory="false">
				</cc3:EISSLabel>
			</td>
			<td>
				<cc5:EISSDynaCombo ID="dynaShipToResponsibleBU" Typable="Normal" runat="server" Width="100%"
					AutoLoad="true" AutoPostBack="false" TopN="50">
				</cc5:EISSDynaCombo>
			</td>
			<td style="padding-left: 10px">
				<cc3:EISSLabel ID="lblERPPlant" runat="server" Text="ERP Plant" IsMandatory="false">
				</cc3:EISSLabel>
			</td>
			<td>
				<cc5:EISSDynaCombo ID="dynaERPPlant" Typable="Normal" runat="server" Width="100%"
					AutoLoad="true" AutoPostBack="false" TopN="50">
				</cc5:EISSDynaCombo>
			</td>
		</tr>
		<tr>
			<td style="padding-left: 10px">
				<cc3:EISSLabel ID="lblShipToCountry" runat="server" Text="Ship to country" IsMandatory="false">
				</cc3:EISSLabel>
			</td>
			<td>
				<cc5:EISSDynaCombo ID="dynaShipToCountry" Typable="Normal" runat="server" Width="100%"
					AutoLoad="true" AutoPostBack="false" TopN="50">
				</cc5:EISSDynaCombo>
			</td>
			<td>
			</td>
			<td style="padding-left: 10px">
				<cc3:EISSLabel ID="lblShipToCustomerCode" runat="server" Text="Ship to code" IsMandatory="false">
				</cc3:EISSLabel>
			</td>
			<td>
				<cc5:EISSDynaCombo ID="dynaShipToCustomer" Typable="Normal" runat="server" Width="100%"
					AutoLoad="true" AutoPostBack="false" TopN="50">
				</cc5:EISSDynaCombo>
			</td>
			<td>
			</td>
			<td>
			</td>
		</tr>
		<tr>
			<td colspan="7" style="text-align: right">
				<cc2:EISSButton ID="btnViewLog" runat="server" AutoPostBack="True" CausesValidation="true"
					Text="View event log">
				</cc2:EISSButton>
			</td>
		</tr>
		<tr>
			<td colspan="7" style="text-align: center">
				<asp:ValidationSummary ID="ValidationSummary1" runat="server" HeaderText="The following information is mandatory:" />
			</td>
		</tr>
	</table>
</cc1:EISSFieldset>

<cc1:EISSFieldset ID="fsShipTo" runat="server" Title="Ship To Ref."
    Width="100%" Visible="true">
        <asp:GridView ID="gvResult" runat="server" AllowPaging="true"
            AllowSorting="true" AutoGenerateColumns="false" CssClass="dtg" PageSize="10"
            Width="100%" Visible="False">
            <AlternatingRowStyle CssClass="dtgAlt" />
            <HeaderStyle CssClass="dtgHeader" />
            <Columns>
                <asp:TemplateField ItemStyle-Width="50px" HeaderText="View Trail">
                    <ItemTemplate>
                        <cc2:EISSButton ID="btnView" runat="server"
                            ButtonMode="ImageOnly" ButtonAction="View" Text="" CommandName="Edit"></cc2:EISSButton>
                    </ItemTemplate>
                    <ItemStyle Width="50px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="ERP" SortExpression="ERP" AccessibleHeaderText="ERP">
                    <ItemTemplate>
                        <asp:Label ID="lblERP" runat="server" Text=""></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Ship To Reference" ItemStyle-Width="50px"
                    SortExpression="Ship To Customer Code">
                    <ItemTemplate>
                        <asp:Label ID="lblShipToReference" runat="server" Text=""></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:Label ID="lblShipToReference" runat="server" Text=""></asp:Label>
                    </EditItemTemplate>
                    <ItemStyle Width="50px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Ship To Name"
                    SortExpression="Ship To Customer Name">
                    <ItemTemplate>
                        <asp:Label ID="lblShipToName" runat="server" Text=""></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="SP JDE Add. Book Ref." ItemStyle-Width="230px"
                    SortExpression="SP ERP Address Book Reference">
                    <ItemTemplate>
                        <asp:Label ID="lblSPJDEAddressBookRef" runat="server" Text=""></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="230px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="LRD JDE Add. Book Ref." ItemStyle-Width="230px"
                    SortExpression="LRD ERP Address Book Reference">
                    <ItemTemplate>
                        <asp:Label ID="lblLRDJDEAddressBookRef" runat="server" Text=""></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="230px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="SP Purch. VAT Code" ItemStyle-Width="90px"
                    SortExpression="SP Purchasing VAT Code">
                    <ItemTemplate>
                        <asp:Label ID="lblSPPurchasingVATCode" runat="server" Text=""></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="90px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="SP Sales VAT Code" ItemStyle-Width="90px"
                    SortExpression="SP Sales VAT Code">
                    <ItemTemplate>
                        <asp:Label ID="lblSPSalesVATCode" runat="server" Text=""></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="90px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Cust. VAT Code" ItemStyle-Width="90px"
                    SortExpression="Customer VAT Code">
                    <ItemTemplate>
                        <asp:Label ID="lblCustVATCode" runat="server" Text=""></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="90px" />
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
</cc1:EISSFieldset>

<br />
<cc1:EISSFieldset ID="fsAuditTrail" runat="server" Title=""
    Width="100%" Visible="False">
    <asp:Label ID="lblNoData" CssClass="lblErr" runat="server" Text="No history available" Visible="false"></asp:Label>
            <cc4:EISSGridView ID="gvAuditTrail" runat="server" Width="100%"
                AllowPaging="true" AllowSorting="False" AutoGenerateColumns="False" CssClass=""
                EmptyDataText="" Height="68px" PageSize="20">
                <PagerSettings Mode="NumericFirstLast" />
                <HeaderStyle CssClass="dtgHeader" />
                <AlternatingRowStyle CssClass="dtgAlt" />
                <Columns>
                    <asp:TemplateField HeaderText="Event">
                        <ItemTemplate>
                            <asp:Label ID="lblEvent" runat="server" Text=""></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="SP JDE Add. Book Ref.">
                        <ItemTemplate>
                            <asp:Label ID="lblSPAddBook" runat="server" Text=""></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="LRD JDE Add. Book Ref.">
                        <ItemTemplate>
                            <asp:Label ID="lblLRDAddBook" runat="server" Text=""></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="SP Purch. VAT Code">
                        <ItemTemplate>
                            <asp:Label ID="lblSPPurch" runat="server" Text=""></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="SP Sales VAT Code">
                        <ItemTemplate>
                            <asp:Label ID="lblSPSalesVAT" runat="server" Text=""></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Cust. VAT Code">
                        <ItemTemplate>
                            <asp:Label ID="lblCustVAT" runat="server" Text=""></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Modified By">
                        <ItemTemplate>
                            <asp:Label ID="lblModifiedBy" runat="server" Text=""></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Date/Time">
                        <ItemTemplate>
                            <asp:Label ID="lblDateTime" runat="server" Text=""></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Document">
                        <ItemTemplate>
                            <asp:HyperLink ID="btnDocument" runat="server" Visible="false">Download</asp:HyperLink>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </cc4:EISSGridView>
</cc1:EISSFieldset>

    Private Sub gvResult_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles gvResult.SelectedIndexChanged
        Dim row As GridViewRow = gvResult.SelectedRow
        Dim intRow As Integer = row.RowIndex

        Dim lblCustCode As Label = gvResult.Rows(intRow).Cells(0).FindControl("lblShipToReference")
        CustShipTo = lblCustCode.Text

        For I = 0 To gvResult.Rows.Count - 1
            gvResult.Rows(I).BackColor = Drawing.Color.White
        Next
        gvResult.Rows(gvResult.SelectedIndex).BackColor = System.Drawing.ColorTranslator.FromHtml("#66CC99")

        fsShipTo.Visible = True
        gvResult.Visible = True
        gvAuditTrail.Visible = True
        fsAuditTrail.Visible = True
        fsAuditTrail.Title = "Audit Trail(Ship To Ref:" & CustShipTo & ")"
        FillTrailGrid()

        If Not dtEventLog.Rows.Count = 0 Then
            gvAuditTrail.Rows(0).CssClass = "gvBackHighlightGreen"
            lblNoData.Visible = False
        Else : lblNoData.Visible = True
        End If

    Private Sub gvResult_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvResult.RowDataBound
        Select Case e.Row.RowType
            Case DataControlRowType.Footer, _
              DataControlRowType.Header, _
              DataControlRowType.Pager, _
              DataControlRowType.Separator
                Exit Sub
        End Select
        Select Case e.Row.RowState
            Case DataControlRowState.Alternate, DataControlRowState.Normal
                SetupRowCommon(e)
                SetupRowView(e)
            Case DataControlRowState.Edit, DataControlRowState.Insert, 5

                SetupRowCommon(e)

        End Select

        If e.Row.RowType = DataControlRowType.DataRow Then
            e.Row.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(sender, "Select$" + e.Row.RowIndex.ToString))
        End If

Reply

subbu.tpt

Member

265 Points

80 Posts

Re: Removing highlighted row in gridview

Feb 27, 2012 09:32 AM|LINK

Add Row Command event to your GridView as   onrowcommand="Grid_RowCommand"
 
 
<Columns>
<%--Add your columns--%>
 
  <asp:ButtonField CommandName="Highlight" ButtonType="Button" Text="Highlight">
        </asp:ButtonField>

        <asp:ButtonField CommandName="Remove" ButtonType="Button" Text="Remove">
        </asp:ButtonField>
 
</Columns>
 
//store your Grid view data as Session["DataTableAdd"]
 
 
 
protected void Grid_RowCommand(object sender, GridViewCommandEventArgs e)
{
        DataTable dtAdd=new DataTable();

       if(e.CommandName=="Highlight")
       {
            int rowindex = ((System.Web.UI.WebControls.GridView)  (e.CommandSource)).PageIndex * 10 + Convert.ToInt32(e.CommandArgument);
            highlight(rowindex); 

        } 
 
         if (e.CommandName == "Remove") 
            { 
                int rowindex = ((System.Web.UI.WebControls.GridView)(e.CommandSource)).PageIndex * 10 + Convert.ToInt32(e.CommandArgument); 
                dtAdd = (DataTable)Session["DataTableAdd"]; 
 
                dtAdd .Rows.RemoveAt(rowindex); 
                dtAdd .AcceptChanges(); 
                GridBrandDetails.DataSource = dtAdd ; 
                GridBrandDetails.DataBind(); 
                Session["DataTableAdd"] = dtAdd ; 
                //highlight the current row with background  color
        } 
 
} 
 
protected void Highlight(int rowindex) 
{ 
     //hightlight the row with the help of row index                
 }

Removing highlighted row in gridview RSS

12 replies

connersz

Removing highlighted row in gridview

basheerkal

Re: Removing highlighted row in gridview

connersz

Re: Removing highlighted row in gridview

paindaasp

Re: Removing highlighted row in gridview

hans_v

Re: Removing highlighted row in gridview

connersz

connersz

Re: Removing highlighted row in gridview

connersz

Re: Removing highlighted row in gridview

Zhongqing Ta...

Re: Removing highlighted row in gridview

connersz

connersz

Re: Removing highlighted row in gridview

subbu.tpt

Re: Removing highlighted row in gridview

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft