PDA

View Full Version : [CLOSED] How to change the color of GridView



Oliver
Jun 01, 2012, 1:43 PM
Hello!

I have a grid that is used to show a birthday list of the company and I want to change the color of the line of the grid if the actual day and month are equals to the birthday day and month of the employee.

My grid:



<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPagePKO.master" AutoEventWireup="true"
CodeFile="ConsultaAniversariantes.aspx.cs" Inherits="Views_ConsultaAniversariantes" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
// this "setGroupStyle" function is called when the GroupingView is refreshed.
var setGroupStyle = function (view) {
// get an instance of the Groups
var groups = view.getGroups();

for (var i = 0; i < groups.length; i++) {
var spans = Ext.query("span", groups[i]);

if (spans && spans.length > 0) {
// Loop through the Groups, the do a query to find the <span> with our ColorCode
// Get the "id" from the <span> and split on the "-", the second array item should be our ColorCode
var color = "#" + spans[0].id.split("-")[1];

// Set the "background-color" of the original Group node.
Ext.get(groups[i]).setStyle("background-color", color);
}
}
};
</script>
<script type="text/javascript">
var handler = function (buttonId, text) {
Ext.net.DirectMethods.EnviarMensagem(buttonId, text);
};
</script>
<ext:Panel ID="Panel1" runat="server" Title="Consulta de Aniversariantes" Height="440"
Layout="fit">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Label ID="label1" runat="server" Text="Month: ">
</ext:Label>
<ext:TextField ID="txtMes" DataIndex="txtMes" runat="server" Width="40px">
</ext:TextField>
<ext:Button ID="Button2" runat="server" Text="Consultar" OnDirectClick="Button1_Click"
Flat="false" Width="90px" Icon="Find" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" TrackMouseOver="true"
Hidden="true" Border="false">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="true" GroupField="Estabelecimento">
<Reader>
<ext:JsonReader IDProperty="IdEmployee">
<Fields>
<ext:RecordField Name="Estabelecimento" Type="String" />
<ext:RecordField Name="NameEmployee" Type="String" />
<ext:RecordField Name="Day" Type="String" />
<ext:RecordField Name="Month" Type="String" />
<ext:RecordField Name="Department" Type="String" />
<ext:RecordField Name="MonthDay" Type="Int" />
<ext:RecordField Name="IdEmployee" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="MonthDay" Direction="ASC" />
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:CommandColumn Width="10" Header="" Align="Center" Sortable="false">
<Commands>
<ext:GridCommand CommandName="Mensagem" Icon="Email" ToolTip-Text="Send Message to employee" />
</Commands>
</ext:CommandColumn>
<ext:Column DataIndex="Estabelecimento" Header="Estabelecimento" Width="100px">
</ext:Column>
<ext:Column DataIndex="NameEmployee" Header="Colaborador">

</ext:Column>
<ext:Column DataIndex="Day" Header="Dia">
</ext:Column>
<ext:Column DataIndex="Month" Header="MÍs">
</ext:Column>
<ext:Column DataIndex="Department" Header="Departamento">
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:GridFilters runat="server" ID="GridFilters1" Local="true">
<Filters>
<ext:StringFilter DataIndex="Estabelecimento" />
<ext:StringFilter DataIndex="NameEmployee" />
<ext:StringFilter DataIndex="Day" />
<ext:StringFilter DataIndex="Department" />
</Filters>
</ext:GridFilters>
</Plugins>
<BottomBar>
<ext:PagingToolbar ID="PagingToolBar1" runat="server" HideRefresh="true">
</ext:PagingToolbar>
</BottomBar>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GroupingView ID="GroupingView1" HideGroupedColumn="true" runat="server" ForceFit="true"
StartCollapsed="false" GroupTextTpl='<span id="ColorCode-{[values.rs[0].data.ColorCode]}"></span>{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Colaboradores" : "Colaborador"]})'
EnableRowBody="true">
<Listeners>
<Refresh Fn="setGroupStyle" />
</Listeners>
</ext:GroupingView>
</View>
<DirectEvents>
<Command OnEvent="ShowDetails">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="command" Value="command" Mode="Raw" />
<ext:Parameter Name="id" Value="record.id" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
</ext:GridPanel>
</Items>
</ext:Panel>
</asp:Content>



Could you help me to include the apropriate code?

Thanks,

Oliver

Daniil
Jun 01, 2012, 1:47 PM
Hi,

Please use GridView GetRowClass.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.Table-method-getRowClass

Here is some example how to use it.
http://examples2.ext.net/#/GridPanel/Miscellaneous/Marking_Records/

Oliver
Jun 01, 2012, 6:43 PM
Hi,

Please use GridView GetRowClass.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.Table-method-getRowClass

Here is some example how to use it.
http://examples2.ext.net/#/GridPanel/Miscellaneous/Marking_Records/

Thanks Daniil!!!

The example works fine.

Oliver