[OPEN] [#1528] [4.3.0] RowExpander Component and BufferedRenderer Issue

**tylert** · Aug 15, 2017, 3:09 PM

I am having an issue using the RowExpander plugin with a component. To recreate the issue, expand the first row, scroll to the bottom of the grid and then back up -- the row will still be marked as expanded but the component is now missing. Toggling the row does nothing to bring the component back. This was tested in Chrome. If you disable the BufferedRenderer for the grid, the issue goes away, but that is not a good option for me.

Below is the sample code -- Thanks!

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

<!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" },
                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" },
                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 = "var 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 push = string.Format(@"
for (var i in {0}.proxy.data) {{
    {0}.proxy.data[i].push(desc_data);
}};
{0}.setData({0}.proxy.data);
", this.Store1.ClientID);

        // "minify" code if resource manager's SourceFormatting is not set.
        if (!this.ResourceManager1.SourceFormatting)
        {
            push = Regex.Replace(push, "(\n|\r)", "");
            push = Regex.Replace(push, "(  *)", " ");
        }

        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" />
                    <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>
                    <Component>
                        <ext:FormPanel Height="100" Width="100">
                            <Items>
                                <ext:TextField DataIndex="company"></ext:TextField>
                                <ext:TextField DataIndex="desc"></ext:TextField>
                            </Items>
                             <Listeners>
                                <AfterRender Handler="this.getForm().loadRecord(this.record);" />
                            </Listeners>
                        </ext:FormPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>

**fabricio.murta** · Aug 15, 2017, 11:36 PM

Hello @tylert!

Thanks for the straightforward test case, I can clearly reproduce your issue.

The problem is that the RowExpander plug in does not fully support buffered rendering, where the rows are discarded when scrolled away and rebuilt when scrolling back.

I am afraid if your constraint is to have a grid with lots of entries, and you require RowExpander, you should switch to a grid paging approach which displays, per page, an affordable amount of entries and not require buffered rendering of rows.

This is an issue very similar to #353 which no longer happens in current versions of Ext.NET, but the test cases uses a template as the expanded rows' contents, not component like in your case, which is not supported.

We've logged this issue as #1528 but unfortunately we don't have any quick solution/workaround for this other than either using paging or disabling buffered rendering on the grid. As soon as we fix this we'll be posting back here a feedback.

**tylert** · Aug 16, 2017, 1:36 PM

Thank you for that information. An acceptable workaround for our use would be to have the expanded row collapse as it scrolls out of view. Or it would even be OK if it was possible to recover the disappeared row by collapsing and re-expanding.

**fabricio.murta** · Aug 16, 2017, 7:51 PM

Hello @tylert!

In my tests here, running your code I noticed that collapsing and re-expanding the row worked, the content was updated again. You seem to have mentioned it won't rebuild once it breaks?

Another problem would probably if you scroll it outside the buffer zone while one is expanded, and then expand another it may not find the former expanded row and have no means to "collapse" it, so it seems the "collapse on remove from buffer - expand on load to buffer" should be the approach taken here.

As for the suggested workarounds mentioned in your last post, that would require us some time to investigate and will probably come as a definitive fix to the code of Ext.NET instead of quick workaround override code. Did this work on previous Ext.NET releases for you? Notice buffered renderer grids are enabled by default, if memory serves well, since Ext.NET 4.0.0 (ExtJS 6.0), so if this "worked" for you in Ext.NET 3, chances are you didn't use the buffered renderer feature at all.

The available options you have right away are the ones already mentined in the previous posts:
- disable buffered renderer
- use grid pager (to limit number of rows displayed at once)

If and only if you can have the inner components read-only, you could instead of using a <Component /> block in the row expander, use the <Template /> one. Refer to the forum thread associated to issue #353 for a test case involving this. I checked and the "template" approach works fine with buffered renderer grid panels.

I hope this helps! Anyway, we have your issue logged and will fix it as soon as we can, posting a follow-up here by then.

**tylert** · Aug 17, 2017, 12:46 AM

It turns out that behavior I was describing where it is impossible to collapse and re-expand a row once it disappears wasn't happening in this example I provided. In my real code, I had SingleExpand set to false for the RowExpander, which does cause this issue. Setting SingleExpand to true looks like it will provide much better usability for our use case.

This isn't a new issue for us, but I haven't reported this bug in the past.

I have considered using a template, but it seems it may not work for our use. The expanded content is not directly editable by the user, but the content is the result of a formula that does update based on edits the user makes in the grid. I am using data binding to bind the record to the FormPanel component inside the row expander, so that edits to the rest of the grid cause the data inside the component to update. So far I haven't found any way to use data binding with the Template. Perhaps I can use event listeners to force the Template to update. Do you know of any way to get the Template to update after it is already rendered?

**fabricio.murta** · Aug 17, 2017, 2:09 AM

Hello @tylert!

Setting SingleExpand="false" implies in a "cache" of the rows, as it "duplicates" the component(s) to each expanded row. When you are using SingleExpand="true", you also have the CacheSingleExpandRows="false" to ensure it will reload the data every expand.

But interesting, if it sounds feasible for you to use the template... Using data binding is something inherent from templates, I'm a little curious on why it didn't work well for you.

Check this out. In your example:

1. completely remove/comment the <Component /> block.
2. add this block instead

<Template runat="server">
    <Html>
        {price} . {change}
    </Html>
</Template>

3. once you open the example with the new code, expand the first row (row index 0). Note the values displayed on the expanded content
4. open console from the web browser developer tools (F12, usually) and:

var rec = App.GridPanel1.store.getAt(0);
rec.set('change', 2);
rec.set('price', 50);

Here, the new value gets instantly (no refresh nor flicker) updated on the expanded row's contents. I could scroll all way down and back up and it was there.

So, from this point, how far would we be from the actual issue? I believe you can use full data binding references and formulas here, but I may be missing the point of how you need to use data binding. If you can expand this test case for a similar scenario with the changes users may make in the grid, maybe we can help you come up with the needed code for it to work with the template. I believe the end result will be even faster for using less complex components within the row expander. And data binding is real fast comparing to full event handling, cells and rows referencing.

Do you want to try and explore the Template approach?

**tylert** · Aug 17, 2017, 4:08 AM

I'm trying your example, and using F12 to update the first row. I'm not seeing the expanded row content update. Please see the screenshot here -- the regular row doesn't match the expanded part. Does your testing show something different?

Click image for larger version.

Name: Capture.PNG
Views: 69
Size: 38.5 KB
ID: 25034

**fabricio.murta** · Aug 17, 2017, 5:42 AM

Hello @tylert!

Intriguing indeed! It has not only worked before I posted, but still works for me after rebooting the system (well, unexpected reboot let's say), and even in the Edge browser. Needless to say, I have yes, tried on chrome as well.

The only possible reason I may think of for it not to work would be you using Ext.NET 4.2.2. But even if so, I don't think any change could have happened between the versions to "fix" this issue. At the same time, it makes sense that you mentioned using template didn't work for you due to the lack of data binding support (as it is not working for you per your screenshot). Also, the other issue you reported today was addressed between 4.2.2 to 4.3.0 so, a chance may lie within that for also this binding feature to work, which I don't really expect.

Would you be as kind as to confirm whether you are using Ext.NET 4.3.0? Or maybe I forgot or overlooked a bit in the example. Here is the full code of the revised page using the template with the row expander:

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

<!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" },
                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" },
                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 = "var 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 push = string.Format(@"
for (var i in {0}.proxy.data) {{
    {0}.proxy.data[i].push(desc_data);
}};
{0}.setData({0}.proxy.data);
", this.Store1.ClientID);

        // "minify" code if resource manager's SourceFormatting is not set.
        if (!this.ResourceManager1.SourceFormatting)
        {
            push = Regex.Replace(push, "(\n|\r)", "");
            push = Regex.Replace(push, "(  *)", " ");
        }

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

<html>
<head runat="server">
    <title>GridPanel with RowExpander Plugin - Ext.NET Examples</title>

    <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 + "%");
        }

        Ext.grid.plugin.BufferedRenderer.override({
            init: function (grid) {
                this.callParent(arguments);


                Ext.Function.interceptAfter(grid.view.all, "scroll", this.afterScroll, this);
                Ext.Function.interceptAfter(grid.view, "doAdd", Ext.Function.createBuffered(this.afterScroll, 50, this));
            },


            afterScroll: function (newRecords, direction, removeCount) {
                if (newRecords.length > 0) {
                    this.view.refreshSize();
                }
            }
        });
    </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" />
                    <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">
                    <Listeners>
                    </Listeners>
                </ext:GridView>
            </View>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Multi" />
            </SelectionModel>
            <Plugins>
                <ext:RowExpander ID="RowExpander1" runat="server" SingleExpand="true" CacheSingleExpandRows="false">
                    <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 runat="server">
                        <Html>
                            {price} . {change}
                        </Html>
                    </Template>
                    <%--<Component>
                        <ext:FormPanel runat="server" Height="100" Width="100">
                            <Items>
                                <ext:TextField runat="server" DataIndex="company"></ext:TextField>
                                <ext:TextField runat="server" DataIndex="desc"></ext:TextField>
                            </Items>
                             <Listeners>
                                <AfterRender Handler="this.getForm().loadRecord(this.record);" />
                            </Listeners>
                        </ext:FormPanel>
                    </Component>--%>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>

You'll see some extras like SingeExpand="true" and CacheSingleExpandRows="false" but before coming up with the steps I confirmed they weren't definitive in the test case for it to work or not... So I'm still unsure what could be happening.

I don't recall any "global disable data binding" for client-side but if this code does not work for you, then do try that same code on a fresh project. New project, add the NuGet package for Ext.NET or Ext.NET.MVC (it should install dependencies), and that must work then. I also don't see how a .NET framework version would interfere with that.

Well, I hope some of the directions here helps you. Looking forward to your feedback on this issue!

EDIT: the Ext.grid.plugin.BufferedRenderer.override block is also a left over from a check I did against the issue #353 I mentioned in previous posts in this thread, I removed it here, it does not relate in any way, sample works the same without it. :)

**fabricio.murta** · Aug 17, 2017, 5:46 AM

Oh yeah, and here's what I see on my Chrome (or Edge).

Click image for larger version.

Name: 62059-crhomeWorkingSample.png
Views: 41
Size: 63.5 KB
ID: 25035

**tylert** · Aug 17, 2017, 1:48 PM

I switched in the Ext.NET 4.3 library and that fixed having the template update when the data changes! I left the code exactly the same, I believe the only difference is using the new Ext.NET library (was using 4.2.0 before in this test project). It's great that I don't explicitly have to wire up data binding beyond referencing the fields in the template with the {} syntax. I think this will work well for our needs.

I still hope that the original bug is fixed at some point but it is not urgent for us to find any other workaround. Thanks for your help.

Thread: [OPEN] [#1528] [4.3.0] RowExpander Component and BufferedRenderer Issue

Thread Tools

Search Thread

Display

[OPEN] [#1528] [4.3.0] RowExpander Component and BufferedRenderer Issue

Similar Threads

[OPEN] [#1424] [4.2.0] Selection issue on Childgrid in rowExpander

[CLOSED] RowExpander: Cannot set property 'component' of null

[OPEN] [#352] Grid + BufferedRenderer: inconsistent selection after insertion of record

[CLOSED] [1.0] RowExpander Component

[CLOSED] RowExpander Component with ChecboxSelectionModel

Posting Permissions

Sitemap

Downloads

Resources

Thread: [OPEN] [#1528] [4.3.0] RowExpander Component and BufferedRenderer Issue

[OPEN] [#1528] [4.3.0] RowExpander Component and BufferedRenderer Issue

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us