[CLOSED] GetRowClass rows Coloring

  1. #1

    [CLOSED] GetRowClass rows Coloring

    Dear
    Im trying to Use getRowClass for Row Coloring depend on column value, But that not apply on grid
    same this code i was using with Ext.Net 1.x and was working correctly

    ASP code
     <style>
            .NotAvilabil {
                background-color:red !important;
            }
            .Avilabil {
                background-color:green !important;
            }
        </style>
     <ext:Store ID="stCouncilMember" runat="server" IDMode="Static">
    
            <Model>
                <ext:Model ID="Model2" runat="server">
                    <Fields>
                        <ext:ModelField Name="Members_ID" />
                        <ext:ModelField Name="GeneralNumber" />
                        <ext:ModelField Name="MemberName" />
                        <ext:ModelField Name="MilitaryRankName" />
                        <ext:ModelField Name="JobName" />
                        <ext:ModelField Name="MobileNumber" />
                        <ext:ModelField Name="FormationCouncilDetails_ID" />
                        <ext:ModelField Name="Email" />
                        <ext:ModelField Name="IsInvited" DefaultValue="false" />
                        <ext:ModelField Name="IsAvilabile" DefaultValue="false" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    
          <ext:GridPanel ID="gpCouncilMember"
                            runat="server"
                            StoreID="stCouncilMember"
                            Title="الأعضاء"
                            Width="700"
                            ColSpan="2">
                            <ColumnModel ID="ColumnModel2" runat="server">
                                <Columns>
                                    <ext:Column ID="Col1" runat="server" Text="الرقم العام" DataIndex="GeneralNumber" />
                                    <ext:Column ID="Col2" runat="server" Text="الأسم" DataIndex="MemberName" Flex="1" />
    
                                    <ext:Column ID="col4" runat="server" Text="الجوال" DataIndex="MobileNumber" />
                                    <ext:Column ID="col5" runat="server" Text="البريد الألكتروني" DataIndex="Email" />
                                    <ext:CheckColumn ID="CheckColumn1" Editable="true" runat="server" DataIndex="IsInvited" Text="الدعوة" />
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                            </SelectionModel>
                            <BottomBar>
                                <ext:StatusBar ID="StatusBar1" runat="server" Width="20"
                                    Text="<Table border='2' width='300px'><tr><td>اللون</td><td style='background-color:#008000;width:60px;';></td><td>متاح</td></tr><tr><td>اللون</td><td style='background-color:#FF0000;width:60px;'></td><td>مشغول بجلسة أخرى</td></tr></Table>"
                                    meta:resourcekey="StatusBarResource1">
                                </ext:StatusBar>
                            </BottomBar>
                            <View>
                                <ext:GridView runat="server" IDMode="Static">
                                    <GetRowClass Fn="getRowClass" />
                                </ext:GridView>
                                
                            </View>
                        </ext:GridPanel>
    JS Code
    var getRowClass = function (record, rowIndex, rowParams, store) {
        //x-grid-cell-inner {"background-color: bisque;"};
        //document.getElementById('x-grid-cell-inner').style.color = 'red';
        if (record.raw.IsAvilabile == false) {
            return 'NotAvilabil';
            
        }
        else {
            return 'Avilabil';
        }
    };
    Please Any Idea about that
    Last edited by Baidaly; Nov 24, 2013 at 3:06 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Take a look at the following example: https://examples2.ext.net/#/GridPane...rking_Records/

    So you need to change your CSS:

    .NotAvilabil .x-grid-cell, .NotAvilabil .x-grid-rowwrap-div {
    	background-color:red !important;
    }
            
    .Avilabil .x-grid-cell, .Avilabil .x-grid-rowwrap-div {
    	background-color:green !important;
    }
    Also, I'd prefer to use record's get method to read its values:

    var getRowClass = function (record, rowIndex, rowParams, store) {
        if (record.get('IsAvilabile') == false) {
            return 'NotAvilabil';
             
        }
        else {
            return 'Avilabil';
        }
    };
  3. #3
    Thank you for your Advice, it's Ok

Similar Threads

  1. getRowClass - documentation
    By matthew in forum 2.x Help
    Replies: 4
    Last Post: Jul 15, 2013, 12:55 PM
  2. Set GetRowClass in code behind
    By Rupesh in forum 1.x Help
    Replies: 1
    Last Post: Apr 17, 2012, 4:38 PM
  3. Replies: 2
    Last Post: Nov 25, 2011, 4:47 PM
  4. rowIndex in GetRowClass - possible?
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Sep 23, 2009, 10:25 PM
  5. GridPanel GetRowClass
    By louis in forum 1.x Help
    Replies: 4
    Last Post: Mar 04, 2009, 11:15 AM

Posting Permissions