[CLOSED] How to disable caching with RowExpander (MVC5/Razor/C#)

[ceihk]

Dear Ext.net Team.
I just made a gridpanel with rowexpander,
inside the rowexpander, I include a component and formpanel,
Now, The expanded component still keeps the already rendered state after I update the row's record .

How can I setup the rowexpander so that It can initialize or render the components inside as new, instead of keeping the cached items?
Best Regards.

[fabricio.murta]

Hello, ceihk!

RowExpander support is somewhat limited and has some issues on Ext.NET 2.5, as you can see in this example: Row Expander Plugin with GridPanel

In the other hand, the example RowExpander Plugin with FormPanel Detail shows that contents of a rowExpander are updated -- although they are updated inside the expander panel.

Maybe what you want to do is a panel with a loader, which reloads on show. Maybe this works. Look at this example with illustrates this in several approaches: Panel's Deferred Loading

If these directions do not guide you in solving your problem, we will only be able to help you if you provide us with a working, minimalistic and simple code example that reproduces your issue, following the guidelines here: More information required. It should be needed to read the post that link points to as well (Forum Guidelines For Posting New Topics).

I hope this helps!

[RCN]

RowExpander has some issues on Ext.NET 2.5.

Since we use RowExpander extensively, it would be nice to check whether these issues have been resolved on version 3.1. Are you able to list those issues? I would appreciate to help to check whether those issues have been resolved.

RowExpander support is somewhat limited.

Can you expand on that?

[RCN]

[RCN]

The following example shows that it's possible, although some modifications may be required to reach a state-of-the-art approach. It's a good starting point.

Please expand first row and then click on Update Company Name - First Record button.





Note: it was based on: https://examples2.ext.net/#/GridPane...red_Component/

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (X.IsAjaxRequest)
        {
            //We do not need to DataBind on an DirectEvent
            return;
        }

        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();
    }
</script>

<!DOCTYPE html>

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

    <ext:ResourcePlaceHolder runat="server" Mode="Script" />

    <style>
        .white-footer .x-toolbar-footer {
            background-color: white !important;
        }
    </style>

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

        var UpdateCompanyName = function () {

            var recordFromStore = App.Store1.data.items[0];

            recordFromStore.beginEdit();

            recordFromStore.data.company = Ext.String.format("{0} - Updated", recordFromStore.data.company);

            recordFromStore.endEdit();

            recordFromStore.commit();

            var form = App.GridPanel1.getRowExpander().getComponent(recordFromStore);

            if (form != null) {

                var store = form.bin[0];

                store.loadRawData(recordFromStore.data);

                form.getForm().loadRecord(store.getAt(0))
            }
        }
    </script>

</head>
<body>
    <form runat="server">
        <ext:ResourceManager ScriptMode="Debug" Locale="en" runat="server" />

        <h1>RowExpander Plugin with FormPanel Detail</h1>

        <ext:GridPanel Border="true"
            ID="GridPanel1"
            runat="server"
            Title="Expander Rows with control"
            Collapsible="true"
            AnimCollapse="true"
            Icon="Table"
            Width="600"
            Height="350">
            <Buttons>
                <ext:Button Text="Update Company Name - First Record" runat="server">
                    <Listeners>
                        <Click Handler="UpdateCompanyName();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
            <Store>
                <ext:Store
                    ID="Store1"
                    runat="server"
                    IgnoreExtraFields="false"
                    PageSize="10">
                    <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" />
                            </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"
                        Format="yyyy/MM/dd" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowExpander runat="server" SingleExpand="false">
                    <Component>
                        <ext:FormPanel
                            runat="server"
                            BodyPadding="6"
                            Height="180"
                            Border="false"
                            DefaultAnchor="-5"
                            Cls="white-footer">
                            <Items>
                                <ext:TextField
                                    runat="server"
                                    Name="company"
                                    FieldLabel="Company" />
                                <ext:NumberField
                                    runat="server"
                                    Name="price"
                                    FieldLabel="Price" />
                                <ext:NumberField
                                    runat="server"
                                    Name="change"
                                    FieldLabel="Change" />
                                <ext:NumberField
                                    runat="server"
                                    Name="pctChange"
                                    FieldLabel="% Change" />
                                <ext:DateField
                                    runat="server"
                                    Name="lastChange"
                                    FieldLabel="Last Updated"
                                    Format="yyyy/MM/dd" />
                            </Items>

                            <Buttons>
                                <ext:Button runat="server" Text="Save" Icon="Disk">
                                    <Listeners>
                                        <Click Handler=" var grid = this.up('grid'), form = this.up('form')
                                                        grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));
                                                        form.getForm().updateRecord(form.record);" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button runat="server" Text="Cancel" Icon="Decline">
                                    <Listeners>
                                        <Click Handler="var grid = this.up('grid'), form = this.up('form');
                                                        grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                            <Listeners>
                                <AfterRender Handler="this.getForm().loadRecord(this.record);" />
                            </Listeners>
                            <Bin>
                                <ext:Store
                                    ID="Store2"
                                    runat="server"
                                    IgnoreExtraFields="false"
                                    PageSize="10">
                                    <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" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Bin>
                        </ext:FormPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>
            <BottomBar>
                <ext:PagingToolbar runat="server" />
            </BottomBar>
        </ext:GridPanel>
    </form>
</body>
</html>

[fabricio.murta]

Hello, Raphael,

Thank you very much for your colaboration on this matter, that's much appreciated. I really hope the solution you provided solves @ceihk's problem!

As for your other questions,

It's not performatic, there is no need to reload the form, you just need to rebind the FormPanel Store's record.

The suggestion was based on the limitations of the nested panel might have. You should remember the problem with height we discussed some days ago, regarding viewports inside loaders.

Since we use RowExpander extensively, it would be nice to check whether these issues have been resolved on version 3.1. Are you able to list those issues? I would appreciate to help to check whether theses issues have been resolved.

The issues (or rather, limitations, maybe?) I referred to were the ones listed in the example itself, its the first example I linked in my first response, its Row Expander Plugin with GridPanel. I am sure we all would receive very well your feedback about these limitations being or not still on our latest 3.1 SVN release! Thanks again! That's a double-thanks! :)

[RCN]

It's not performatic, there is no need to reload the form, you just need to rebind the FormPanel Store's record.

The suggestion was based on the limitations of the nested panel might have. You should remember the problem with height we discussed some days ago, regarding viewports inside loaders.

I simply can't relate ViewPort and the issue presented in this thread.

The issues (or rather, limitations, maybe?) I referred to were the ones listed in the example itself, its the first example I linked in my first response, its Row Expander Plugin with GridPanel.

In my opinion, there are not issues / limitations in Row Expander Plugin with GridPanel example. It's simply a feature example.

Thanks again! That's a double-thanks! :)

You're welcome.