PDA

View Full Version : [CLOSED] GetRowClass rows Coloring



imaa
Nov 23, 2013, 4:02 PM
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

Baidaly
Nov 24, 2013, 3:40 AM
Hello!

Take a look at the following example: http://examples2.ext.net/#/GridPanel/Miscellaneous/Marking_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';
}
};

imaa
Nov 24, 2013, 3:53 AM
Thank you for your Advice, it's Ok