[CLOSED] How to change the color of GridView

[Oliver]

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]

Hi,

Please use GridView GetRowClass.
http://docs.sencha.com/ext-js/4-1/#!...od-getRowClass

Here is some example how to use it.
https://examples2.ext.net/#/GridPane...rking_Records/

[Oliver]

Hi,

Please use GridView GetRowClass.
http://docs.sencha.com/ext-js/4-1/#!...od-getRowClass

Here is some example how to use it.
https://examples2.ext.net/#/GridPane...rking_Records/

Thanks Daniil!!!

The example works fine.

Oliver