[FIXED] [#1572] [4.5.0] filter header disappeared after reconfig with new cols

[susanz]

Hi, The following code can help you reproduce the issue : click on Add Column/Insert Column Filter header is good. Click on reconfig, filter header is gone. The filter works fine if use gridPanle.reconfig() but not gridPanle.reconfig(newcolumns). Not sure if I missed anything?
Thanks
-szhang

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

<%@ Import Namespace="Button=Ext.Net.Button" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.BindData();
        }
    }

    protected void AddColumn(object sender, DirectEventArgs e)
    {
        ((Button)sender).Disabled = true;

        ModelField field = new ModelField("pctChange", ModelFieldType.Float);

        //we need specify index because we use ArrayReader which parse data source by index

        this.Store1.AddField(field, 3);
        this.Store1.Model[0].Fields.Insert(3, field);

        this.BindData();

        Column col = new Column();
        col.Text = "Change %";
        col.Width = 75;
        col.Sortable = true;
        col.DataIndex = "pctChange";
        col.Renderer.Fn = "pctChange";

        ComboBox cb = new ComboBox();
        cb.Items.Add(new Ext.Net.ListItem("1", "1"));
        cb.Items.Add(new Ext.Net.ListItem("2", "2"));
        cb.Items.Add(new Ext.Net.ListItem("3", "3"));
        this.Controls.Add(cb);

        col.Editor.Add(cb);

        this.GridPanel1.AddColumn(col);
    }

    protected void InsertColumn(object sender, DirectEventArgs e)
    {
        ((Button)sender).Disabled = true;

        DateColumn col = new DateColumn
        {
            Text = "Last Updated",
            Width = 85,
            Sortable = true,
            DataIndex = "lastChange",
            Format = "M/d/yyyy"
        };

        this.GridPanel1.InsertColumn(1, col);
    }

    protected void Reconfigure(object sender, DirectEventArgs e)
    {
        ((Button)sender).Disabled = true;

        //this.GridPanel1.ColumnModel.Columns.RemoveAt(1);
        DateColumn col = new DateColumn
        {
            Text = "Last Updated",
            Width = 85,
            Sortable = true,
            DataIndex = "lastChange",
            Format = "M/d/yyyy"
        };
        //this.GridPanel1.InsertColumn(1, col);
        //this.GridPanel1.Reconfigure();
        var newcols = new  List<ColumnBase>();
        newcols.Add(col);
        this.GridPanel1.Reconfigure(newcols);
    }

    private void BindData()
    {
        this.Store1.DataSource = this.Data;
        this.Store1.DataBind();
    }

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Simple Array Grid - 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 + "%");
        };
        var extnetFixScrolling = function (item, e) {
            if (item.grid) {
                var grid = item.grid,
                    header = grid.headerCt;
                if (item.grid.normalGrid) {
                    grid = item.grid.normalGrid,
                    header = grid.headerCt;
                }

                if (grid.getScrollX() != header.getScrollX()) {
                    header.scrollTo(grid.getScrollX());
                }
            }
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <h1>Modify ColumnModel during DirectEvent</h1>

        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Array Grid"
            Width="600"
            Height="350">
            <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="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </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" Width="75" DataIndex="price" SummaryType="Sum">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" Width="75" DataIndex="change" />
                </Columns>
            </ColumnModel>
             <SelectionModel>
                <ext:SpreadsheetSelectionModel
                    ID="SpreadsheetSelectionModel1"
                    runat="server"
                    RowSelect="true"
                    />
            </SelectionModel>
            <View>
                <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
            </View>
             <Plugins>
                 <ext:FilterHeader runat="server"  />
             </Plugins>
            <BottomBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:ToolbarFill runat="server" />
                        <ext:Button runat="server" Text="Add Column">
                             <DirectEvents>
                                <Click OnEvent="AddColumn" Single="true" />
                             </DirectEvents>
                        </ext:Button>
                        <ext:Button runat="server" Text="Insert Column">
                             <DirectEvents>
                                <Click OnEvent="InsertColumn" Single="true" />
                             </DirectEvents>
                        </ext:Button>
                         <ext:Button runat="server" Text="Reconfigure">
                             <DirectEvents>
                                <Click OnEvent="Reconfigure" Single="true" />
                             </DirectEvents>
                        </ext:Button>
                        
                    </Items>
                </ext:Toolbar>
            </BottomBar>
           
        </ext:GridPanel>
    </form>
</body>
</html>

[susanz]

any updates on this ?
Thanks
-szhang

[fabricio.murta]

Hello, Susan!

I'm afraid this is still the same as here: Custom filterHeader + grid reconfig issue. Or am I mistaken?

Anyway this looks like an issue that has been bugging (at least) you for long enough, and we logged it under #1572 in our issue tracker.

I took a look and unfortunately there's no trivial way of patching; the way reconfigure with columns adds the columns is not compatible with the plug in and a more thoughtful work will need to take place there. Well, this issue has been around for so long for a reason, it seems. So I'm afraid the guidance in the linked thread above is still actual.

[susanz]

Hi Fabricio, Glad you found it, I completely forgot I had submitted this issue before. It came up when our user reported this issue recently. I will check what was the work around before. Thanks for your info!
Thanks
-suzy

[susanz]

Hi FabrÃ*cio, It looks like all suggested solutions in my old issue were talking about grid filter not filterheader.(?) Is there any easier way (JS func) to re-init filter header after reconfig ?
Thanks
-susanz

[susanz]

Hi Fabricio, I am totally stuck on this. Use the above webForm example, it looks like the Add/Insert/Remove columns work fine with filterHeader. I tried to use this as workaround for reconfig() issue, but once i converted the code to MVC, it does not behave same as webForm version -- the new column does not have filterheader(see attached screen shot). I am using ext.net4.2 & mvc5
Please help! Any advice is appreciated.
Thanks



index.schtml

@using Ext.Net;
@using Ext.Net.MVC;

@{
    Layout = null;
}
@{
    var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
    <title>Ext.NET MVC Sample</title>    

</head>
<body>
    @(Html.X().ResourceManager())

    <header>
        <a href="http://ext.net/"><img src="http://speed.ext.net/identity/extnet-logo-large.png" class="logo"/></a>
    </header>

   @(
 Html.X().GridPanel().ID("gpanelTest")
     //.Frame(true)
     //.MultiColumnSort(true)
     .Store(
         X.Store().RemotePaging(false)
          .Model(
             X.Model()
                .Fields(
                        new ModelField("company"),
                        new ModelField("price", ModelFieldType.Float),
                        new ModelField("change", ModelFieldType.Float),
                        new ModelField("pctChange", ModelFieldType.Float),
                        new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
                    )
                )
          .PageSize(10)
          .Proxy(
               X.AjaxProxy()
                .Reader(X.JsonReader().RootProperty("data").MessageProperty("message"))
                .Url(Url.Action("LoadGridData"))
            )
        )
        .ColumnModel(
                Html.X().Column().Text("Company").DataIndex("company").Locked(true)
                    .Editor(X.TextField()),
                Html.X().Column().Text("Price").DataIndex("price").Renderer(RendererFormat.UsMoney)
                    .Editor(X.NumberField()),
                Html.X().Column().Text("Change").DataIndex("change").Editor(X.NumberField()),
                Html.X().Column().Text("Change").DataIndex("pctChange").Editor(X.NumberField()),
                Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange").Editor(X.DateField())
            )
        .TopBar(
             X.Toolbar()
                .AutoScroll(false)
                .Items(

                    X.Button()
                        .Text("reconfig")
                     .DirectClickUrl(Url.Action("reconfig"))

                )//end toolbar items

        )
        .BottomBar(X.PagingToolbar())
        .SelectionModel(X.SpreadsheetSelectionModel().RowSelect(true)) //add row number breaks grping,export,cell copy..
        .View(
            X.GridView()
        //.Listeners(ls =>
        //{
        //    ls.Activate.Handler = "$('.x-column-header > .x-box-inner').slideToggle()";
        //})
        )
       .Plugins(
         X.CellEditing().ClicksToEdit(1)
         .Listeners(ls =>
         {
             ls.BeforeEdit.Fn = "fixScrolling";
         })
        , X.FilterHeader().UpdateBuffer(2000) //delay checking input
        )
        .Features(
            X.GroupingSummary()
             .GroupHeaderTplString("{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? \"Items\" : \"Item\"]})")
             .HideGroupedHeader(true)
             .ShowSummaryRow(true)
             .StartCollapsed(true),
            X.Summary()
             .Dock(SummaryDock.Bottom)

        )

)
<script>
    var fixScrolling = function (item, e) {
        if (item.grid) {
            var grid = item.grid,
                header = grid.headerCt;
            if (item.grid.normalGrid) {
                grid = item.grid.normalGrid,
                header = grid.headerCt;
            }

            if (grid.getScrollX() != header.getScrollX()) {
                header.scrollTo(grid.getScrollX());
            }
        }
    }
</script>


</body>
</html>

[susanz]

We have several cases that user needs to dynamically add or drop grid columns, rebuild whole grid is not a good option.