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
Related
Simple problem.
I have an ASP.net GridView (VS2005) and it has page numbers, but when there is less than the maximum rows per page (< 10), the Pager row disappears. This makes my gridview look ugly, like as if there's a missing row at the bottom.
I can force display the Pager row, but I need to hide the page number 1, because it's obvious we're on PAGE ONE !
<asp:GridView ID="gvFTUNSENT" runat="server"
AutoGenerateColumns="False" CellPadding="4" ForeColor="Black" AllowSorting="True" CssClass="gvCSS" Width="100%"
DataKeyNames="StudentID,StudentUnitID" DataSourceID="sdsFTUNSENT"
GridLines="Vertical" AllowPaging="True" PageSize="10" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
OnPreRender="GridView_PreRender"
OnLoad="GridView_Load"
OnRowDataBound="GridView_RowDataBound" >
<RowStyle Wrap="True" Height="48px" />
<Columns>
...blahblah
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle CssClass="cssPager" BackColor="#6B696B" ForeColor="White" HorizontalAlign="Left" Height="100%" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<EmptyDataTemplate>
<asp:Label ID="lblNDF1" runat="server" Text="NO DATA FOUND" Font-Size="X-Large" Width="500px" style="text-align:center" />
</EmptyDataTemplate>
<EmptyDataRowStyle HorizontalAlign="Center" />
</asp:GridView>
Here I force show the Pager row...
protected void GridView_PreRender(object sender, EventArgs e)
{
GridView gv = (GridView)sender;
//keep showing pager line even if there is only one row of data
GridViewRow gvr = (GridViewRow)gv.BottomPagerRow;
if (gvr != null)
gvr.Visible = true;
}
But I don't want to see Page 1 in there, so I tried this ...
if (e.Row.RowType == DataControlRowType.Pager)
{
//keep showing pager line even if there is only one row of data
GridViewRow gvr = (GridViewRow)e.Row;
if (gvr != null)
{
gvr.Visible = true;
//...but hide page number if there is only one page
if (gv.PageCount == 1)
{
gv.ShowFooter = true;
gv.PagerSettings.Visible = false;
}
}
}
But it actually hides the entire Pager row! No! I want to hide only the page numbers.
The ShowFooter, is so it looks like the gridview is a box, closed off. But it's still ugly. I'd rather not use it if I can just keep the Pager row showing and being able to hide anything in it. ie.. keep background color intact.
Any other ideas? Thanks
Try something like
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Pager && GridView1.PageCount==1 )
{ e.Row.Style.Add("color", "white"); }
}
Or, if you don't want to deal with colors you can try this (but I think it's less robust)
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Pager && GridView1.PageCount==1 )
{
var a = e.Row.Controls;
if (a.Count>0 && a[0] is TableCell)
{
var b = a[0].Controls[0].Controls[0] as TableRow;
if (b != null)
{
//This is actually your page 1 text
b.Cells[0].Text = "";
}
}
}
}
try
e.Row.Controls.Clear();
insted
e.Row.Style.Add("color", "white");
its work better..
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")".
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.
I have a gridview, with some columns. I want to hide one column, but still access its value when I select a record.
Could someone help me to achieve this?
Any Help is appreciated.
This is my gridview: OutlookID is the column to hide!
<asp:GridView ID="gvOutlookMeldingen" runat="server"
AllowSorting="True" AutoGenerateColumns="False"
AutoGenerateSelectButton="True" onselectedindexchanged="GridView_SelectedIndexChanged">
<Columns>
<asp:BoundField DataField="Melder" HeaderText="Melder" />
<asp:BoundField DataField="Onderwerp" HeaderText="Onderwerp" />
<asp:TemplateField HeaderText="Omschrijving">
<ItemTemplate>
<div style="overflow:auto; width: 500px; height: 150px;">
<asp:Label ID="lblOmschrijving" runat="server" Text='<%# Bind("Omschrijving")%>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Meldingsdatum" HeaderText="Meldingsdatum" />
<asp:BoundField DataField="OutlookID" HeaderText="OutlookID" Visible="false" />
</Columns>
</asp:GridView>
This is the code when I select a record:
Label lblOmschrijving = (Label)gvOutlookMeldingen.SelectedRow.FindControl("lblOmschrijving");
//Label lblOutlookID = (Label)gvOutlookMeldingen.SelectedRow.FindControl("lblOutlookID");
Response.Redirect("Detailscherm.aspx?"
+ "melder=" + Server.UrlEncode(gvOutlookMeldingen.SelectedRow.Cells[1].Text)
+ "&meldingsdatum=" + gvOutlookMeldingen.SelectedRow.Cells[4].Text
+ "&onderwerp=" + Server.UrlEncode(gvOutlookMeldingen.SelectedRow.Cells[2].Text)
+ "&outlookid=" + Server.UrlEncode(gvOutlookMeldingen.SelectedRow.Cells[5].Text)
+ "&omschrijving=" + Server.UrlEncode(lblOmschrijving.Text)
+ "&niv1=" + ""
+ "&niv2=" + "");
Set this code after you've binded the data. To get this functionality I do this:
MyGridView.Columns[0].visible = true;
MyGridView.DataBind();
MyGridView.Columns[0].visible = false;
With this the first column is hidden, but you should be able to acces it's value.
If you don't want the data to be available on the client side, you'll have to set the server-side Visible = "False" property of whatever DataControlField you're using (preferably in the markup). You'll still be able to access the column from the server side.
You might want to consider using the GridView's DataKeys property - it might be more suited to your needs.
Create Template column instead of your SELECT button. Set
PostbackUrl='<%#
Eval("somepage.aspx?id={0}","wanted
column") %>'
. Remove column via designer.
You can also set it invisible at the client side. With Javascript.
document.getElementById(myObject).visible = "false";
when we set visiblity of control false in Design time that will be not render .Try to
set visiblity =false in gridView rowCreated Event .in below code i am setting
second column visibility= false
protected void grid_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[2].Visible = false;
}
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[2].Visible = false;
}
if (e.Row.RowType == DataControlRowType.Footer)
{
e.Row.Cells[2].Visible = false;
}
}
and now try to Get Value .Surely you will get the value.
I had the same issue.
You can't hide the column and keep value in code behind.
You have to hide it directly on client side with a javascript.
I did that :
On my css or page :
<style type="text/css">
.hiddencol
{
display: none;
}
.viscol
{
display: block;
}
</style>
Then add style into the BoundField of the gridViewer.
For example :
<asp:BoundField DataField="AgentGUID" HeaderText="AgentGUID" ReadOnly="True" SortExpression="AgentGUID"
meta:resourcekey="BoundFieldResource1">
<HeaderStyle CssClass="hiddencol" />
<ItemStyle CssClass="hiddencol" />
<FooterStyle CssClass="hiddencol" />
</asp:BoundField>
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