What's New?

[CLOSED] RowExpander plugin, set expanded row color; add icon to column header

  1. #1
    Jan 29, 2014, 2:27 PM

    [CLOSED] RowExpander plugin, set expanded row color; add icon to column header

    I have a simple grid with alternating row colows. I am using the row expander plugin, and I would like to set the expander color, or the display field it contains, background color to match the row it is associated with.
    I am calling a function when the row is expanded:
    <Listeners>
    <Expand Fn="getOverrideRsn"></Expand>
</Listeners>
    and that function has access to the "item" object
                     
        function getOverrideRsn(item,record){
            item.component.setValue(record.data.override_reason);
            item.component.ctCls = getRowClass(record);
        }
 
        var getRowClass = function(record){
            if (record.index % 2 == 0){
                return "even-row";
            }
            return "odd-row";
        };
    Is there a way to get to what I need through the "item" object. I cannot find the property I need in fireburg
    Last edited by Daniil; Feb 07, 2014 at 6:59 AM. Reason: [CLOSED]
  2. #2
    Jan 30, 2014, 4:03 AM
    Hi @betamax,

    I suggest to add CSS classes to a RowExpander's body in its Expand listener.

    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[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var getRowClass = function(record){
            if (record.index % 2 == 0){
                return "even-row";
            }

            return "odd-row";
        };
    </script>

    <style>
        .odd-row td.x-grid-cell, .odd-row div.x-grid-rowbody {
            background-color: green;
        }

        .even-row td.x-grid-cell, .even-row div.x-grid-rowbody {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server">
                    <GetRowClass Fn="getRowClass" />
                </ext:GridView>
            </View>
            <Plugins>
                <ext:RowExpander runat="server">
                    <Component>
                        <ext:DisplayField runat="server" Text="Test" />
                    </Component>
                    <Listeners>
                        <Expand Handler="body.addCls(rowIndex % 2 == 0 ? 'even-row' : 'odd-row');" />
                    </Listeners>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Jan 30, 2014, 5:18 PM
    I appreciate you putting together that example Daniil.
    I am not seeing it work as expected though (in IE & FF); I've attached a screen shot of what I am seeing.
    In words, the row turns to Ext blue when selected, when the expander is clicked, the expansion is Ext blue as well.

    I am setting the text of the display field, and trying to set a Class name in a function called on the RowExdpander "Expand" event.
    function getOverrideRsn(item,record){
    item.component.setValue(record.data.override_reason);
    var classNm = getRowClass(record).toString();
    item.component.ctCls = classNm;
}
    And heres my RowExpander:
    <ext2:RowExpander ID="RowExpander1" ClientIDMode="Static" runat="server" ExpandOnEnter="True" ExpandOnDblClick="False" SelectRowOnExpand="True"   >
   <Listeners>
       <Expand Handler="getOverrideRsn" />
   </Listeners>
   <Component>
         <vms:VmsDisplayField ID="dfOverrideText" ClientIDMode="Static" runat="server" LabelCls="gridrowComponent" Label="Reason for Override" LabelWidth="130"/>
   </Component>
   <Renderer Handler="if(record.data.override_reason == ''){ return false;}" />
</ext2:RowExpander>
    I can see my class name in the container table of the rowexpander, but it is not apparently inherited by it's children.
    I tried modifying your example to mimic this behavior, but get the same results.
    Attached Thumbnails Click image for larger version.  Name: RowExpanderExample.jpg  Views: 12  Size: 40.8 KB  ID: 7545  
  4. #4
    Jan 31, 2014, 5:33 AM
    I tested with the latest Ext.NET and could not reproduce the behavior that you described.

    Please clarify what Ext.NET version are you using?
  5. #5
    Feb 03, 2014, 1:26 PM
    We are stuck at 2.2 for the moment. We will not be able to move forward until after the next release's regression testing is complete.
  6. #6
    Feb 03, 2014, 4:07 PM
    "!important" helps.

    .odd-row td.x-grid-td, .odd-row div.x-grid-rowbody {
    background-color: green !important;
}
 
.even-row td.x-grid-td, .even-row div.x-grid-rowbody {
    background-color: yellow !important;;
}

Similar Threads

  1. [CLOSED] Changing the background color of an entire grid column when column header is clicked.
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 24, 2011, 6:48 AM
  2. RowExpander generate width column not matched header column
    By doanhdn in forum 1.x Help
    Replies: 0
    Last Post: Oct 02, 2011, 4:41 PM
  3. [CLOSED] [1.0] Possible to Add Icon to Grid Column Header?
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 14, 2010, 2:34 PM
  4. icon in the header column
    By maxdiable in forum 1.x Help
    Replies: 1
    Last Post: Jul 09, 2009, 10:30 AM

Tags for this Thread

Posting Permissions