[CLOSED] RowExpander background-color IE7

**cwolcott** · Apr 01, 2015, 12:19 AM

Using you example GridPanel -> RowExpander -> Local_Mode I added wrap="true" to the Company column. When using IE7 the expander column does not fully populate the color in the background, but IE8+ does just fine. Any thoughts?

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store1.DataSource = new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am", "Manufacturing" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am", "Manufacturing" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am", "Manufacturing" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am", "Finance" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am", "Services" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am", "Services" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am", "Manufacturing" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am", "Services" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am", "Finance" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am", "Manufacturing" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am", "Manufacturing" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am", "Manufacturing" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am", "Automotive" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am", "Computer" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am", "Manufacturing" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am", "Computer" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am", "Computer" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am", "Medical" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am", "Finance" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am", "Food" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am", "Medical" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am", "Computer" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am", "Medical" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am", "Food" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am", "Retail" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am", "Manufacturing" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am", "Computer" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am", "Services" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am", "Retail" }
            };

        this.Store1.DataBind();

        const string desc = "this.desc_data = \"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, " +
                            "vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, " +
                            "iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, " +
                            "sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, " +
                            "pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. " +
                            "Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, " +
                            "nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. " +
                            "Vivamus tincidunt diam nec urna. Curabitur velit.\";";

        string dataID = string.Concat(this.Store1.ClientID, ".proxy.data");
        string push = string.Format(@"for (var i = 0; i < {0}.length; i++) {{{0}[i].push(desc_data);}}", dataID);

        this.ResourceManager1.RegisterClientScriptBlock("desc_data", desc);
        this.ResourceManager1.RegisterOnReadyScript(push);
    }
</script>

<html>
<head runat="server">
    <title>GridPanel with RowExpander Plugin - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        }

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <h1>GridPanel with RowExpander Plugin</h1>        
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server"             
            Title="RowExpander" 
            Collapsible="true" 
            AnimCollapse="true"
            Icon="Table" 
            Width="600" 
            Height="600">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                <ext:ModelField Name="industry" />
                                <ext:ModelField Name="desc" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" Wrap="true" />
                    <ext:Column runat="server" Text="Price" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" TrackOver="true" />
            </View>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Multi" />
            </SelectionModel>
            <Plugins>
                <ext:RowExpander ID="RowExpander1" runat="server">
                    <Listeners>
                        <Collapse Handler="Ext.Msg.notify('Row collapsed', 'Row # ' + rowIndex);" Delay="1" />
                        <Expand Handler="Ext.Msg.notify('Row expanded', 'Row # ' + rowIndex);" Delay="1" />
                    </Listeners>
                    <Template ID="Template1" runat="server">
                        <Html>
                            <p><b>Company:</b> {company}</p><br/>
                            <p><b>Summary:</b> {desc}</p>
                        </Html>
                    </Template>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>

**Daniil** · Apr 01, 2015, 10:23 AM

Hi Chris,

It appears to be an IE7 with a td's rowspan attribute. If a td has rowspan="2", but the second row is hidden, it doesn't calculate the td's height correctly.

I tried to workaround the problem by managing the rowspan dynamically via JavaScript.

This is to have rowspan="1" initially to avoid an issue.

Ext.ux.RowExpander.override({
    getHeaderConfig: function () {
        var me = this,
            config = me.callParent(arguments);

        config.renderer = function (value, metadata, record) {
            if (!me.grid.ownerLockable) {
                if (!Ext.isIE7) { // added
                    metadata.tdAttr += ' rowspan="2"';
                } else {
                    metadata.tdAttr += ' rowspan="1"';
                }
            }

            var res = me.renderer.apply(this, arguments);

            if (res === false) {
                res = "*";
                me.preventsExpanding[record.internalId] = true;
            } else if (res === true) {
                res = null;
            }

            return res ? res : ('<div class="' + Ext.baseCSSPrefix + 'grid-row-expander"></div>');
        }

        return config;
    }
});

This is to manage rowspan on expand and collapse.

<ext:RowExpander runat="server">
    <Listeners>
        <Collapse Handler="if (Ext.isIE7) {
                               Ext.get(this.grid.view.getNode(record)).child('td').set({ rowspan: 1 });
                           }" />

        <BeforeExpand Handler="if (Ext.isIE7) {
                                   Ext.get(this.grid.view.getNode(record)).child('td').set({ rowspan: 2 });
                               }" />
    </Listeners>
</ext:RowExpander>

Unfortunately, it doesn't work in IE7. It appears that managing rowspan on the fly does not work in IE7. Though it works in other browsers. I tried removing the Ext.isIE7 condition.

Interesting that changing the rowspan attribute via Developer Tools appears to be working. It updates the table layout. Though, again setting it via JavaScript doesn't update the actual table layout.

I was quite unable to find some tips on the Internet on that problem. If you have any ideas, please share.

**cwolcott** · Apr 01, 2015, 11:17 AM

That is to bad that there is not an obvious fix. I will try to dig a little deeper during lunch today, but I doubt I will see anything that you haven't already tried.

The curious issue that I see is that the background color and right border in the first column ('+') does not fill the entire height, but when I pass my mouse over each row the background color for the first column ('+') does fill it completely.

**Daniil** · Apr 01, 2015, 8:04 PM

That is to bad that there is not an obvious fix.

Agree... Maybe, we can look at the problem from a different angle. For example... what about to remove the background color at all?

Ext.ux.RowExpander.override({
    getHeaderConfig: function () {
        var config = this.callParent(arguments);

        delete config.tdCls;
        return config;
    }
});

The curious issue that I see is that the background color and right border in the first column ('+') does not fill the entire height, but when I pass my mouse over each row the background color for the first column ('+') does fill it completely.

Well, it highlights the row on mouse over. It applies the CSS rules on the entire row and it fills that row with background color without any problem.

**cwolcott** · Apr 01, 2015, 8:54 PM

Great. Thank you for coming back to this with a different approach. I decided to only delete the tdCls if IE7 is being used.

Ext.ux.RowExpander.override({
    getHeaderConfig: function () {
        var config = this.callParent(arguments);

        if (Ext.isIE7)
            delete config.tdCls;
        return config;
    }
});

Please close the thread.

Thread: [CLOSED] RowExpander background-color IE7

Thread Tools

Search Thread

Display

[CLOSED] RowExpander background-color IE7

Similar Threads

[CLOSED] Change Color Window's Header Background Color

[CLOSED] ButtonGroup background-color IE7/IE8

[CLOSED] Change TreePanel background color and toolbar color

Background color in codebehind

Change Tab background color or background image

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] RowExpander background-color IE7

[CLOSED] RowExpander background-color IE7

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us