Change Gridpanel's row background , CodeBehind ?

[Mohammad]

My Gridpanel id the following :

<style type="text/css">
    .GridPanelUsersRowYellow
    {
        background: #FEE9E9;
    }
    .GridPanelUsersRowWhite
    {
        background: white;
    }
</style>
<script type="text/javascript">
    function getRowClass(record) {
        if (record.data.IsLock) {
            return "GridPanelUsersRowYellow";
        }
        else {
               
        }
    }
</script>

<ext:Store ID="Store1" runat="server" OnRefreshData="Store1_RefreshData">
    <Reader>
        <ext:JsonReader IDProperty="Id">
            <Fields>
                <ext:RecordField Name="Id" Type="Int" />
                <ext:RecordField Name="FirstName" />
                <ext:RecordField Name="LastName" />
                <ext:RecordField Name="JobTitle" />
                <ext:RecordField Name="SSN" />
                <ext:RecordField Name="UserName" />
                <ext:RecordField Name="MemberStatusFarsiName" />
                <ext:RecordField Name="MemberRoleName" />
                <ext:RecordField Name="RegisterDate" />
                <ext:RecordField Name="IsLock" />
            </Fields>
        </ext:JsonReader>
    </Reader>
</ext:Store>

<ext:GridPanel ID="GridPanelUsers" runat="server" StripeRows="true" Height="330"
    StoreID="Store1" AutoExpandColumn="FirstName" Header="true" Title=" Members List "
    Icon="User">
    <TopBar>
        <ext:Toolbar ID="Toolbar1" runat="server">
            <Items>
                <ext:Button ID="ButtonLockUser" runat="server" Text=" DeActive " Icon="UserRed">
                    <DirectEvents>
                        <Click OnEvent="ButtonLockUser_Click">
                            <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{GridPanelUsers}.body}" />
                            <ExtraParams>
                                <ext:Parameter Name="id" Value="#{GridPanelUsers}.getSelectionModel().getSelected().data.Id"
                                    Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </TopBar>
    <View>
        <ext:GridView ID="GridView1" runat="server">
            <GetRowClass Fn="getRowClass" />
        </ext:GridView>
    </View>
    <ColumnModel runat="server">
        <Columns>
            <ext:RowNumbererColumn />
            <ext:Column ColumnID="FirstName" Header="Name" DataIndex="FirstName" Align="Right"
                Width="50" />
            <ext:Column ColumnID="LastName" Header="LName" DataIndex="LastName" Align="Right"
                Width="100" />
            <ext:Column ColumnID="UserName" Header="user name" DataIndex="UserName" Align="Right"
                Width="100" />
            <ext:Column ColumnID="MemberRoleName" Header="RoleName" DataIndex="MemberRoleName" Align="Right"
                Width="100" />
            <ext:Column ColumnID="MemberStatusFarsiName" Header="Date" DataIndex="RegisterDate"
                Align="Center" Width="80" Locked="true" />
            <ext:Column ColumnID="IsLock" DataIndex="IsLock" Hidden="true">
            </ext:Column>
        </Columns>
    </ColumnModel>
    <SelectionModel>
        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
    </SelectionModel>
    <BottomBar>
        <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="50" StoreID="Store1"
            StyleSpec="direction:ltr;" EmptyMsg="&nbsp;" DisplayMsg="&nbsp;" BeforePageText="Page" />
    </BottomBar>
</ext:GridPanel>

I wanna change the row background color in C#, whenever I change IsLock property value in C#.

below is DeActive event method :

protected void ButtonLockUser_Click(object sender, DirectEventArgs e)
{
    KMSServiceClient service = new KMSServiceClient();
    int memberId = int.Parse(e.ExtraParams["id"]);
    ServiceWrapper.KMSService.Member member = service.GetMemberById(memberId);
    member.IsLocked = true;
    service.LockMember(memberId);

    //RowSelectionModel sm = GridPanelUsers.SelectionModel.Primary as RowSelectionModel;
    //sm.Render(true);

    //How can I change the row background color from here

    BindGridPanel();
}

[Daniil]

Hi,

Here is the one of possible solutions:

Server side

X.Call("lock", new JRawValue(GridPanel1.ClientID), "recordId");

Client side

<script type="text/javascript">
    var lock = function (grid, id) {
        var record = grid.getStore().getById(id);
        record.set("IsLock", true);
    };
</script>

[sumesh]

is it possible to change the colour of a row based on a field value in c#

[Daniil]

Well, the GetRowClass should be executed client side, calling DirectMethods or DirectEvents is not supported.

So, that value should be already on client to use it with a GetRowClass function. The simplest way would be binding that value to a Store.

[mercede75]

Well, the GetRowClass should be executed client side, calling DirectMethods or DirectEvents is not supported.

So, that value should be already on client to use it with a GetRowClass function. The simplest way would be binding that value to a Store.

Hello, I'm looking to change the color of the row in Grid, similar to the question asked. However the store does not contain all the fields and only on server side we can tell what color of row should be.

What is your recommendation?
I don't understand the GetRowClass...binding the value to store? do you mean I need to add a color code value or similar thing a part of data store

[Daniil]

Hi,

binding the value to store? do you mean I need to add a color code value or similar thing a part of data store

Yes, I meant that.

Please look at the example.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3", "green" },
                new object[] { "test4", "test5", "test6", "red" },
                new object[] { "test7", "test8", "test9", "yellow" },
            };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var getRowClass = function (record, index) {
            if (record.data.color) {
                return "row-" + record.data.color;
            }
        };
    </script>

    <style type="text/css">
        .row-green {
            background-color: green;
        }
        
        .row-red {
            background-color: red;
        }
        
        .row-yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                            <ext:RecordField Name="color" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
        <View>
            <ext:GridView runat="server">
                <GetRowClass Fn="getRowClass" />
            </ext:GridView>
        </View>
    </ext:GridPanel>
</body>
</html>

[mercede75]

Yes it is working!!!

Thanks a lot. The forum people are excellent.

However I have a similiar question about row coloring for TreeGrid component.

I have a requirement to show Accounts which in turn may contain accounts to three level depth. i.e. Parent->Child->Child. Now based on the amount i want to show the accounts (in deficient) rows in red color. I have looked through it but it does not allow any GridView.

Someone (a guy on another project) mentioned that technically the TreeGrid is a Tree not a grid and thats the reason it cant be bound to the data store. Would version 2 solve this issue because he mentioned that ExtJs newer version has solved this issue. is there any shortcut or workaround?

[Daniil]

Your guy is totally right.

is there any shortcut or workaround?

Maybe, there is a possible solution for you.
http://forums.ext.net/showthread.php...ll=1#post43326

[mercede75]

yes it is working correctly

made a minor change to use spans as div's were causing a new line and the height of the rows were increased. Code is below:

     <ext:TreeGrid ID="TreeGrid1" runat="server" Width="310"  >
            <Columns>
                <ext:TreeGridColumn Header="task" DataIndex="test" Width="200" SortType="None">
                    <XTemplate ID="XTemplate2" runat="server">
                        <Html>
                        <span style="color: {color}">{test}</span>
                        </Html>
                    </XTemplate>
                    </ext:TreeGridColumn>
                <ext:TreeGridColumn Header="color" DataIndex="color" Width="100" SortType="None" Hidden="true">
                    <XTemplate ID="XTemplate1" runat="server">
                        <Html>
                        <span style="color: {color}">{color}</span>
                        </Html>
                    </XTemplate>
                </ext:TreeGridColumn>
            </Columns>
            <Root>
                <ext:TreeNode Text="Tasks">
                    <Nodes>
                        <ext:TreeNode Leaf="true">
                            <CustomAttributes>
                                <ext:ConfigItem Name="test" Value="test1" Mode="Value" />
                                <ext:ConfigItem Name="color" Value="yellow" Mode="Value" />
                            </CustomAttributes>
                        </ext:TreeNode>
                        <ext:TreeNode Leaf="true">
                            <CustomAttributes>
                                <ext:ConfigItem Name="test" Value="test1" Mode="Value" />
                                <ext:ConfigItem Name="color" Value="red" Mode="Value" />
                            </CustomAttributes>
                        </ext:TreeNode>
                        <ext:TreeNode Leaf="true">
                            <CustomAttributes>
                                <ext:ConfigItem Name="test" Value="test2" Mode="Value" />
                                <ext:ConfigItem Name="color" Value="green" Mode="Value" />
                            </CustomAttributes>
                        </ext:TreeNode>
                        <ext:TreeNode Leaf="true">
                            <CustomAttributes>
                                <ext:ConfigItem Name="test" Value="test3" Mode="Value" />
                                <ext:ConfigItem Name="color" Value="blue" Mode="Value" />
                            </CustomAttributes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
        </ext:TreeGrid>

[miguelvelarde]

I try Daniil solution in my code, but the row does not show de color selected because it takes the cell color.

When I check de css properties in Firebug, the row have the correct value of the css class, but the cell have a different color and I can only see the cell color on my grid.