Mar 02, 2012, 11:53 AM
[CLOSED] Mouse over a cell in gridPanel with gradient background color don´t highlights the row.
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!
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>
Last edited by Daniil; Mar 02, 2012 at 1:12 PM.
Reason: [CLOSED]
