We Keep Coding

Use DataKeyNames and CheckBox in GridTemplateColumn to see what rows have been selected?

We have a webform with a radgrid and a button. The radgrid has two columns and a checkbox column.
On Page_load, the data will be displayed and the user will be able to select (via the checkbox) which rows will go through with the update of the EmpId; if the row is selected, NewEmpId will replace OldEmpId. The Update button is clicked and the changes are made.
The problem I'm having is that I prefer to use the datakeynames to retrieve the data from each row. But I'm having trouble implementing it without using GridCheckBoxColumn, which I don't want to use because the radgrid needs to be in Edit mode for the checkbox to be selected, and that brings other issues.
<telerik:RadGrid ID="RadGridEmp" runat="server" AutoGenerateColumns="False" Width="100%" AllowPaging="True" PageSize="22">
<ClientSettings>
<Selecting AllowRowSelect="True" />
</ClientSettings>
<mastertableview commanditemdisplay="TopAndBottom" datakeynames="OldEmpId, NewEmpId, EmpName">
<commanditemsettings showaddnewrecordbutton="false" />
<Columns>
<telerik:GridBoundColumn DataField="OldEmpId" HeaderText="OldEmpId">
<HeaderStyle Width="110px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="NewEmpId" HeaderText="NewEmpId">
<HeaderStyle Width="110px"></HeaderStyle>
</telerik:GridBoundColumn>
<ItemTemplate>
<asp:CheckBox ID="ChkChange" runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</mastertableview>
</telerik:RadGrid>
The following code is just the code I prefer to use with this issue. It uses datakeynames. But it doesn't build:
protected void RadButtonUpdateSectors_Click(object sender, EventArgs e)
{
foreach (GridItem item in RadGridEmp.MasterTableView.Items)
{
GridDataItem dataitem = (GridDataItem)item;
TableCell cell = dataitem["GridCheckBoxColumn"];
CheckBox checkBox = (CheckBox)cell.Controls[0];
if (checkBox.Checked)
{
oldEmpId = dataitem.GetDataKeyValue("OldEmpId").ToString();
newEmpId = dataitem.GetDataKeyValue("NewEmpId").ToString();
UpdateEmpId(oldEmpId, newEmpId, connString);
}
}
}

Please try with the below code snippet.
datakeynames="OldEmpId,NewEmpId,EmpName"
...............
...............
protected void RadButtonUpdateSectors_Click(object sender, EventArgs e)
{
foreach (GridDataItem item in RadGridEmp.MasterTableView.Items)
{
CheckBox ChkChange = item.FindControl("ChkChange") as CheckBox;
if (ChkChange.Checked)
{
string oldEmpId = item.GetDataKeyValue("OldEmpId").ToString();
string newEmpId = item.GetDataKeyValue("NewEmpId").ToString();
UpdateEmpId(oldEmpId, newEmpId, connString);
}
}
}
Let me know if any concern.
Note:- Remove extra space from datakeynames.

How do I avoid a GridView's Gridlines changing color when applying a class to a cell on the RowDataBound event?

In my website, I have a page with a Gridview that I use to display some data. I capture the RowDataBound event, to find out if certain text is present in a cell. If it is, I color it green, else I color it red.
Here's the problem: the Gridview has horizontal gridlines only. When I change the color of the cell in RowDataBound (I'm actually changing the class), the gridlines take on the color applied. I cannot revert it back, no matter what I try (looping through all cells and setting border-color). Please help.
protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
for (int i = 2; i <= 3; i++)
{
if (e.Row.Cells[i].Text.Contains("monkey"))
{
e.Row.Cells[i].Attributes.Add("class", "monkey bold");
}
else
{
e.Row.Cells[i].Attributes.Add("class", "nomonkey bold");
}
}
}
}
The style is as follows:
.monkey
{
color: #009900;
border-color: black;
}
.nomonkey
{
color: red;
border-color: black;
}
The border-color property seems to have no effect.
The GridView is defined as:
<asp:GridView ID="GridView2" runat="server" AllowSorting="False" GridLines="Horizontal" AutoGenerateColumns="false" CellPadding="4" OnRowDataBound="GridView2_RowDataBound" OnDataBound="GridView2_DataBound" CssClass="reportGrid">
<FooterStyle BackColor="#2F76B8" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#2F76B8" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFFFF" ForeColor="#222222" HorizontalAlign="Center" />

I couldn't find the answer to this anywhere, and couldn't tempt anyone into answering it either, so I worked around it by adding a span inside the cell, and setting its style like so:
if (e.Row.Cells[i].Text.Contains("monkey"))
{
e.Row.Cells[i].Text = e.Row.Cells[i].Text.Replace("monkey", "<span class=\"monkey\">monkey</span> ");
}

I experienced the same thing. An alternative would be to add a Label control and set the properties on that instead.
Rather than using a BoundField, use a TemplateField. Assuming that your data is returning an indexable item:
<asp:GridViewControl runat="server" ID="GridView2" AutoGenerateColumns="false">
<asp:BoundField HeaderText="Field0" DataField="[0]" />
<asp:BoundField HeaderText="Field1" DataField="[1]" />
<asp:TemplateField HeaderText="Monkey1" />
<asp:TemplateField HeaderText="Monkey2" />
</asp:GridViewControl>
Then in the code-behind:
protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
var data_item = e.Row.DataItem; // Can use "as <type>;" if you know the type.
if (data_item != null)
{
for (int i = 2; i <= 3; i++)
{
var cell_content = new Label();
e.Row.Cells[i].Controls.Add(cell_content);
cell_content.Text = data_item[i];
if (data_item[i].Contains("monkey"))
{
cell_content.Attributes.Add("class", "monkey bold");
}
else
{
cell_content.Attributes.Add("class", "nomonkey bold");
}
}
}
Of course an alternative would be to add the Label in the TemplateField -> ItemTemplate declaration with an ID and use "Cells[i].FindControl("label_id")".

mouseover hover in Gridview ASP.net using CSS

This is probably a really simple thing but I am completely new to CSS. I just want to be able to have mouseover hover effect on my rows in gridview, changing the color of the row if it is being hovered over. I'm curious as to whether or not my CSS file is in the right place? Should my Gridview.CSS be in the same folder as my gridview.aspx (I assume so?).
Here is my CSS file:
.Gridview tr.normal
{
background-color:white;
}
.Gridview tr.highlight
{
background-color:yellow;
}
And here is how I am trying to implement it:
In the .aspx file:
<asp:GridView ID="MsgInbox" runat="server" ....OnRowCreated="Gridview_RowCreated" CssClass = "Gridview">
And in the C# code behind:
protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.CssClass = "highlight";
}
}
I know I must be missing something really simple in my C#. Any help would be appreciated! Thanks!

I stole part of my solution to this from another answer so my styling affects ALL gridviews in one shot.
Add this CssClass="GridView" to your asp:GridView tag.
<asp:GridView ID="grdLongID" runat="server" CssClass="GridView" CellPadding="4" ForeColor="#333333" GridLines="None" AllowSorting="true" OnSorting="grdLongID_Sorting" RowStyle-HorizontalAlign="center" AutoGenerateColumns="False" Width="100%">
Then in your style.css you can do things like the following:
table.GridView th {
border-bottom: 1px solid #ED7A0A;
text-decoration: none;
}
table.GridView tr:hover {
background-color: #fabf85;
}
The key is the :hover pseudo-class.

First you set the Row style using this code, inside the GridView, I call it .row
<RowStyle CssClass="row" />
then you use this css to make it change the background color, or what ever you like when the mouse is move over.
tr.row
{
background-color:#fff;
}
tr.row td
{
}
tr.row:hover td,
tr.row.over td
{
background-color: #eee;
}
The trick here is that because GridView is rendered as table, I add the td and the tr in the style to access the mouse over the table lines.
Because there is also the alternative row style AlternatingRowStyle if you like to use it, you can simple make one more style the same way.

Here is how I accomplished this:
Follow this tutorial to change the highlighted row on mouseover:
http://msmvps.com/blogs/deborahk/archive/2010/01/25/asp-net-selecting-a-row-in-a-gridview.aspx
This also explains the code to process a row selection. My gridview has alternating row colors. In order to restore the original color of the row you just hovered, create a custom attribute in mouseover for the original backgroundColor and restore it on mouseOut like so:
row.Attributes["onmouseover"] = "this.originalstyle=this.style.backgroundColor;this.style.cursor='hand';this.style.backgroundColor='#ffccff';";
row.Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor=this.originalstyle;";

You can create hover effect using RowCreated because this will need postback for this. You should use hover pseudo-class within you css. Something like this
.Gridview tr:hover
{
background-color:blue;
color:white;
}
where Gridview css class applied to your Gridview

This is how i done in my project
CSS:
.tdonhover
{
background-color:#d9d9d9 !important;
}
<script type="text/javascript">
$(document).ready(function () {
$('td').hover(function () {
$('tr').each(function () {
$(this).removeClass('tdonhover');
});
$(this).parent().addClass('tdonhover');
});
});
</script>
Default.aspx page : This page contains gridview control.
` <asp:GridView ID="GridView1" runat="server" CellPadding="4" Width="940px" CssClass="gvClass gvalign" BorderColor="#E0DCD0" BorderStyle="Solid" BorderWidth="1px"
ForeColor="#333333" GridLines="None" >
<Columns>
<asp:TemplateField HeaderText="Srno" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="40">
<ItemTemplate>
<%# Container.DataItemIndex+1 %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
<RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#A86E07" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />
</asp:GridView>`
Using
<RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
<AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />
you can set Alternate row Background color and fontcolor

This is so simple thing.
add the CSS in head part
#MainContent_gvDevice tr:Hover
{
background-color:#F6F6F6;
}
here instead of gvDevice put your gridview id.

Better way yo can handle this mouseover using OnRowCreated
protected void RowCreated_report(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='yellow'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle;");
e.Row.Attributes.Add("style", "cursor:pointer;");
}
}

I think I have the shortest and easiest solution to implement so far. There is no need to edit code behind or id/class names. The only edit you need to make is adding this CSS:
tr[class^='dxgvDataRow']:hover td{
background-color: #272727 !important;
}

protected void grdDis_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
#region to highlight the grid view row
e.Row.Attributes.Add("onmouseover", "this.originalcolor=this.style.backgroundColor;" + " this.style.backgroundColor='#FDCB0A';");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalcolor;");
#endregion
}
}

This is for column cell hover color in the Gridview with ToolTip and ForeColor
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[2].Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';this.style.backgroundColor='aqua'";
e.Row.Cells[2].Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor='white'";
e.Row.Cells[2].ToolTip = "You can click this cell";
e.Row.Cells[2].ForeColor = System.Drawing.Color.Blue;
}
}
Thank you

How to put a line after each grouping rows in a GridView?

I am using a GridView that has many rows with the same values, so I grouped these rows using GridViewHelper class. Now I want to put a separate line between each grouping values. How to do that?
The following snapshot shows you the current situation:

I wasn't sure if you wanted to style them when rendered or when you click the row. So here is both. You can decide what styles you want. :-)
Set the appropriate attributes in your ASP.NET GridView control for controlling CSS:
<asp:GridView ID="gridviewid"
runat="server"
CssClass="gridview"
AutoGenerateSelectButton="True"
GridLines="None"
AllowPaging="true"
PageSize="10">
<HeaderStyle CssClass="gridViewHeader" />
<RowStyle CssClass="gridViewRow" />
<AlternatingRowStyle CssClass="gridViewAltRow" />
<SelectedRowStyle CssClass="gridViewSelectedRow" />
<PagerStyle CssClass="gridViewPager" />
</asp:GridView>
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.CssClass = "cssClass";
}
}

You can try something like...
protected void Page_Load(object sender, EventArgs e)
{
GridViewHelper helper = new GridViewHelper(this.GridView1);
helper.RegisterGroup("yourGroupName", true, true);
helper.GroupHeader += new GroupEvent(helper_GroupHeader);
}
private void helper_GroupHeader(string groupName, object[] values, GridViewRow row)
{
if (groupName == "yourGroupName" )
{
row.Cells[0].Text = "<br />" + row.Cells[0].Text;
}
}
You should also be able to insert a new one before row instead of just adding a break line to the cell if that's what you want.

How do I edit data being bound to a datagrid?

In reference to Link loaded into my gridview try to navigate to my local server. The columns I have in the datagrid are Customer #, Description, Link.
I've got a function set up that's called on rowDataBound, but how do I retrieve what link is in the row so that I can edit it, and then rebind it to the datagrid?
protected void grdLinks_RowDataBound( object sender, GridViewRowEventArgs e )
{
if ( e.Row.RowIndex == 2 )
{
}
}
And here is my gridview code
<asp:GridView ID="grdLinks" runat="server" AutoGenerateColumns="False" DataSourceID="ldsCustomerLinks"
OnRowDataBound="grdLinks_RowDataBound" EmptyDataText="No data was returned."
DataKeyNames="ID" OnRowDeleted="grdLinks_RowDeleted" Width="80%" BackColor="White"
HorizontalAlign="Center" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"
CellPadding="3" GridLines="Vertical">
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="CustomerNumber" HeaderText="Customer Number" SortExpression="CustomerNumber" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
<asp:HyperLinkField DataTextField="Link" HeaderText="Link" SortExpression="Link" DataNavigateUrlFields="Link" Target="_blank" />
</Columns>
</asp:GridView>
<asp:LinqDataSource ID="ldsCustomerLinks" runat="server" ContextTypeName="ComplianceDataContext"
TableName="CustomerLinks" EnableDelete="true">
</asp:LinqDataSource>

If I'm understanding you correctly, you want to get the value of a data item called Link. If so, then something like this should work:
EDIT: I think what you're saying is that you want to grab the value Link from the database, manipulate it and then set the Url of the HyperLink to the new, manipulated value, if so then it would look like this:
ASPX Page (Updated to reflect posted code)
<Columns>
<asp:BoundField DataField="CustomerNumber" HeaderText="Customer Number" SortExpression="CustomerNumber" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
<asp:TemplateField HeaderText="Link">
<ItemTemplate>
<asp:HyperLink ID="hlParent" runat="server" Text='<% #(Eval("Link")) %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
I modified the ASP from your original question by adding an ID and removing the reference to the NavigateUrl attribute from the HyperLink control.
Code
protected void grdLinks_RowDataBound( object sender, GridViewRowEventArgs e )
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string link = DataBinder.Eval(e.Row.DataItem, "Link") as string;
if (link != null && link.Length > 0)
{
// "FindControl" borrowed directly from DOK
HyperLink hlParent = (HyperLink)e.Row.FindControl("hlParent");
if (hlParent != null)
{
// Do some manipulation of the link value
string newLink = "https://" + link
// Set the Url of the HyperLink
hlParent.NavigateUrl = newLink;
}
}
}
}

RowDataBound is called for every row in the GridView, including headers, footers, etc. Therefore, you should start by examining only the rows containing data.
Once you're on a row, there are several ways to examine the cells. One is just to use the cell index (2 here). That seems simple in your situation, but will lead to frustration if you ever rearrange the columns.
Here's an example of that from MSDN:
void CustomersGridView_RowDataBound(Object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
// Display the company name in italics.
e.Row.Cells[1].Text = "<i>" + e.Row.Cells[1].Text + "</i>";
}
A better way is to use FindControl with the item's ID.
protected void gvBarcode_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HyperLink hlParent = (HyperLink)e.Row.FindControl("hlParent");
}
}

You may also want to look into letting the gridview do it for you.
You can use the datanavigateurlformatstring property to insert querystring parameters if that's what you are trying to do.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.hyperlinkfield.datanavigateurlformatstring.aspx