PDA

View Full Version : [CLOSED] Mouse over a cell in gridPanel with gradient background color don´t highlights the row.



supera
Mar 02, 2012, 12:53 PM
Hi

I set the row backcolor of my gridpanel with a gradient color.
Works very fine. But when the mouse is over a row, the row is don´t highlighted.

I made a example...
In gridPanel1 (without gradient color in row background) the row is highlighted when mouse over this row.
In gridPanel2 (with gradient color in row background) the row DON´T is highlighted when mouse over this row.

I understand this is not a problem with the ext.net suite.
I think that I need change the background color of row when the mouse over this row. I´m trying this. But don´t works.

Thanks for any help!



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test17.aspx.vb" Inherits="WebApplication3.Test17" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server" >

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

BuildSet(gridPanel1, store1)
BuildSet(gridPanel2, store2)

wndServicos.Show()

End Sub

Protected Sub store1_RefreshData(sender As Object, evt As StoreRefreshDataEventArgs)
BuildSet(gridPanel1, store1)
End Sub

Protected Sub store2_RefreshData(sender As Object, evt As StoreRefreshDataEventArgs)
BuildSet(gridPanel2, store2)
End Sub

Private Function getDataTable() As System.Data.DataTable
Dim table As System.Data.DataTable = New System.Data.DataTable

table.Columns.Add(New System.Data.DataColumn("ID"))
table.Columns.Add(New System.Data.DataColumn("NAME"))

table.Rows.Add(1, "a")
table.Rows.Add(2, "b")
table.Rows.Add(3, "c")
table.Rows.Add(4, "d")
table.Rows.Add(5, "e")
table.Rows.Add(6, "f")
table.Rows.Add(7, "g")
table.Rows.Add(8, "h")
table.Rows.Add(9, "i")
table.Rows.Add(10, "j")
table.Rows.Add(11, "l")
table.Rows.Add(12, "m")
table.Rows.Add(13, "n")
table.Rows.Add(14, "o")
table.Rows.Add(15, "p")

Return table

End Function

Protected Sub BuildSet(gridPanel As Ext.Net.GridPanel, store As Ext.Net.Store)
Dim colConf As Ext.Net.Column.Config

If (ExtNet.IsAjaxRequest) Then
store.RemoveFields()
End If

'refaz os campos do modelo
Me.AddField(store, New ModelField("ID", Ext.Net.ModelFieldType.Int))
Me.AddField(store, New ModelField("NAME", Ext.Net.ModelFieldType.String))
store.RebuildMeta()

Me.BindSet(store)

colConf = New Ext.Net.Column.Config
colConf.DataIndex = "ID"
colConf.Text = "ID"
gridPanel.ColumnModel.Columns.Add(New Column(colConf))

colConf = New Ext.Net.Column.Config
colConf.DataIndex = "NAME"
colConf.Text = "NAME"
gridPanel.ColumnModel.Columns.Add(New Column(colConf))

If (ExtNet.IsAjaxRequest) Then
gridPanel.Reconfigure()
End If

End Sub

Private Sub BindSet(store As Ext.Net.Store)

store.DataSource = Me.getDataTable()
store.DataBind()

End Sub

Private Sub AddField(store As Ext.Net.Store, field As ModelField)
If (ExtNet.IsAjaxRequest) Then
store.AddField(field)
Else
store.Model(0).Fields.Add(field)
End If
End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">

/*TURNO DA MANHĂ*/
.turno-manha-explorer .x-grid-cell {
/*background: #F5F5DC !important;*/
/* fallback (Opera) */
background: #E0FFFF;
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#E0FFFF', EndColorStr='#96CDCD', GradientType=1);
}

.turno-manha-firefox .x-grid-cell {
/*background: #F5F5DC !important;*/
/* Firefox: */
background: -moz-linear-gradient(left, #E0FFFF, #96CDCD);
}

.turno-manha-chrome .x-grid-cell {
/*background: #F5F5DC !important;*/
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, right top, from(#E0FFFF), to(#96CDCD));
}

.turno-manha .x-grid-cell {
/*background: #F5F5DC !important;*/
/* fallback (Opera) */
background: #E0FFFF;
}

/*TURNO DA TARDE*/
.turno-tarde-explorer .x-grid-cell {
/*background: #F5F5DC !important;*/
/* fallback (Opera) */
background: #FFFAF0;
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFAF0', EndColorStr='#EED5B7', GradientType=1);
}

.turno-tarde-firefox .x-grid-cell {
/*background: #F5F5DC !important;*/
/* Firefox: */
background: -moz-linear-gradient(left, #FFFAF0, #EED5B7);
}

.turno-tarde-chrome .x-grid-cell {
/*background: #F5F5DC !important;*/
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, right top, from(#FFFAF0), to(#EED5B7));
}

.turno-tarde .x-grid-cell{
background: #FFFAF0 !important;
}

/*TURNO DA NOITE*/
.turno-noite-explorer .x-grid-cell {
/*background: #F5F5DC !important;*/
/* fallback (Opera) */
background: #CAE1FF;
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#F0FFFF', EndColorStr='#A2B5CD', GradientType=1);
}

.turno-noite-firefox .x-grid-cell {
/*background: #F5F5DC !important;*/
/* Firefox: */
background: -moz-linear-gradient(left, #F0FFFF, #A2B5CD);
}

.turno-noite-chrome .x-grid-cell {
/*background: #F5F5DC !important;*/
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, right top, from(#F0FFFF), to(#A2B5CD));
}

.turno-noite .x-grid-cell{
background: #CAE1FF !important;
}

.turno-manha-explorer .x-grid-row-over .x-grid-cell,
.turno-manha-firefox .x-grid-row-over .x-grid-cell,
.turno-manha-chrome .x-grid-row-over .x-grid-cell,
.turno-manha .x-grid-row-over .x-grid-cell,
.turno-tarde-explorer .x-grid-row-over .x-grid-cell,
.turno-tarde-firefox .x-grid-row-over .x-grid-cell,
.turno-tarde-chrome .x-grid-row-over .x-grid-cell,
.turno-tarde .x-grid-row-over .x-grid-cell,
.turno-noite-explorer .x-grid-row-over .x-grid-cell,
.turno-noite-firefox .x-grid-row-over .x-grid-cell,
.turno-noite-chrome .x-grid-row-over .x-grid-cell,
.turno-noite .x-grid-row-over .x-grid-cell
{
background: #999;
border-bottom-width:2px;
border-bottom-color: #999;
border-bottom-style: dashed;
border-top-color: #999;
border-top-style: dashed;
} /* Grid cells in the selected row */

</style>

<script type="text/javascript" language="javascript" >
var getRowClass = function (record) {
var browser = "";

switch (navigator.appName) {
case "Microsoft Internet Explorer":
browser = "-explorer";
break;
case "Netscape":
if (navigator.userAgent.indexOf("Chrome") != -1) {
browser = "-chrome";
} else {
browser = "-firefox";
}
break;
case "Chrome":
browser = "-chrome";
break;
default:
browser = "";
break;
}

if (record.data['ID'] <= 5) {
return "turno-manha" + browser;
} else {
if (record.data['ID'] <= 10) {
return "turno-tarde" + browser;
} else {
return "turno-noite" + browser;
}
}
};
</script>

</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR" />
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>
<ext:Window
ID="wndServicos"
runat="server"
Icon="BookEdit"
Title="Agendamento"
Width="520"
Height="440"
AutoShow="false"
Modal="true"
Resizable="false"
Hidden="true"
ButtonAlign="Right"
Layout="AbsoluteLayout"
DefaultButton="button[text=Ok]">
<Items>
<ext:GridPanel runat="server" ID="gridPanel1" Title="GridPanel 1" ColumnLines="true" X="0" Y="0" Width="240" Height="400">
<Store>
<ext:Store runat="server" ID="store1" OnReadData="store1_RefreshData">
<Model>
<ext:Model runat="server" ID="Model1">
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel2" runat="server">
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel ID="CellSelectionModel1" runat="server" Mode="Single" />
</SelectionModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
<ext:GridPanel runat="server" ID="gridPanel2" Title="GridPanel 2" ColumnLines="true" X="250" Y="0" Width="240" Height="400">
<Store>
<ext:Store runat="server" ID="store2" OnReadData="store2_RefreshData">
<Model>
<ext:Model runat="server" ID="Model2">
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel ID="CellSelectionModel2" runat="server" Mode="Single" />
</SelectionModel>
<View>
<ext:GridView ID="GridView2" runat="server" StripeRows="true">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
<Plugins>
<ext:CellEditing ID="CellEditing2" runat="server">
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</Items>
</ext:Window>

Daniil
Mar 02, 2012, 1:34 PM
Hi,

Lets consider the following CSS select:

.turno-manha-explorer .x-grid-row-over .x-grid-cell

It selects nothing, because both "turno-manha-explorer" and "x-grid-row-over" are the CSS classes of the same DIV element.

Please remove the space character:

.turno-manha-explorer.x-grid-row-over .x-grid-cell

Also, I think, it might require to strengthen the "background" rule using the "!important" statement and set up

filter: none;

Example

.turno-manha-explorer.x-grid-row-over .x-grid-cell, ... {
background: red !important;
filter: none;
}

supera
Mar 02, 2012, 2:07 PM
Hi Daniil!

Thank a lot for your help! Works very fine!