Problem with dynamic column header grouping

**ALobpreis** · Apr 24, 2014, 2:21 PM

Hello everybody,

I have been using Ext.Net 1.0 for more than a year and I have found plenty of help in this forum, but I couldn't find anything about this so here is my thread.
I have been tearing my hair out with dynamic Column Header Grouping for days, until I somewhat narrowed down the problem. Basically, I can successfully create them in Page_Load, but it was impossible for me to do so from any other Ajax request, like a DirectMethod. Here I provide you with a very simple page to reproduce the problem:

<%@ 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)
        {
            PrepareGrid(myGrid, true);
        }
    }

    [DirectMethod]
    public void OnClick(object sender, DirectEventArgs e)
    {
        PrepareGrid(myGrid2, false);
        btnPrepare.Disabled = true;
    }
    
    private void PrepareGrid(GridPanel grid, bool fromPageLoad)
    {
        var columns = new string[] { "Text 1", "Number 1", "Text 2", "Number 2", "End Column" };

        foreach (string col in columns)
        {
            Column newCol = new Column { Header = col };
            grid.ColumnModel.Columns.Add(newCol);

            if (!fromPageLoad)
            {
                // Why is this necessary when not run from Page_Load?
                grid.AddColumn(newCol);
            }
        }

        var headerGroupRow = new HeaderGroupRow();
        var headerGroups = new[] { new { Header = "Date", Span = 2 }, new { Header = "Group 1", Span = 2 },
            new { Header = "Group 2", Span = 2}, new { Header = "", Span = 1}};

        foreach (var header in headerGroups)
        {
            headerGroupRow.Columns.Add(new HeaderGroupColumn
            {
                Header = header.Header,
                Align = Alignment.Center,
                ColSpan = header.Span
            });
        }

        grid.View[0].HeaderGroupRows.Add(headerGroupRow);
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Dynamic Grid Column Header Grouping Problem</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>Dynamic Grid Column Header Grouping Problem</h1>

    <cnet:StoreTable ID="strEmpty" runat="server" />

    <ext:GridPanel ID="myGrid" runat="server" StoreID="strEmpty" Height="200" Title="Built in Page_Load">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Day" />
                <ext:Column Header="Time" />
            </Columns>
        </ColumnModel>
        <View>
            <ext:GroupingView>
                <HeaderGroupRows>
                </HeaderGroupRows>
            </ext:GroupingView>
        </View>
    </ext:GridPanel>

    <ext:Button runat="server" ID="btnPrepare" Text="Prepare Grid">
        <DirectEvents>
            <Click OnEvent="OnClick" />
        </DirectEvents>
    </ext:Button>

    <ext:GridPanel ID="myGrid2" runat="server" StoreID="strEmpty" Height="200" Title="Built in OnClick">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Day" />
                <ext:Column Header="Time" />
            </Columns>
        </ColumnModel>
        <View>
            <ext:GroupingView>
                <HeaderGroupRows>
                </HeaderGroupRows>
            </ext:GroupingView>
        </View>
    </ext:GridPanel>

</body>
</html>

As you can see, the first grid is built perfectly but the second one is not. The PrepareGrid method, when called from Page_Load, works ok but not from the OnClick event. A second issue but less severe is the need to add the column in two places (in ColumnModel and with AddColumn method) when using the OnClick event.

I am using this Ext.Net version in a huge project in my job, so using the latest version is not an option for now (we had to do a lot of effort when we migrated from Coolite to 1.5 and we don't have time to do that kind of work again).

Any help will be greatly appreciated.

Thanks and regards,

Andrew

PS: My Ext.Net.dll is version 1.0.0.34577. Is that the version for 1.5?

**Daniil** · Apr 28, 2014, 8:01 AM

Hi @ALobpreis,

Welcome to the Ext.NET forurms!

I think you need to re-render the GridPanel after configuring HeaderGroupRows. I think it is the only good way to add them on the fly.

Just call a GridPanel's Render method. You will need to wrap the GridPanel in an additional Container to to loose its position on the page.

// Why is this necessary when not run from Page_Load?
grid.AddColumn(newCol);

A ColumnModel's Columns is a config option. Changing it on the fly doesn't produce anything if a GridPanel is already rendered. But it will be rendered if call the Render method.

Originally Posted by ALobpreis

PS: My Ext.Net.dll is version 1.0.0.34577. Is that the version for 1.5?

Ext.NET v1.5 dll's version should start from "1.5".

**ALobpreis** · Apr 28, 2014, 2:52 PM

Thank you very much for your reply, Daniil.

If I run myGrid2.Render() I get a "Scripting error: ';' expected" at eval(result.script) inside one of the WebResource.axd. If I run RefreshView nothing happens. Placing the grid inside an ext:Container, and eventually refreshing/re rendering it, did not help either.

Should I use any specific overload of the Render method? I tried the parameterless one and the second one sending selfRendering = true, both resulting in the same error message.

Thanks again,

Andrew

PS: So it seems I've actually been using version 1.0, heh. :)

**Daniil** · Apr 29, 2014, 3:13 AM

Please provide a test case to reproduce that error. I will investigate.

**ALobpreis** · Apr 29, 2014, 1:38 PM

It's basically the same example of my first post, but only adding the Render() call:

    [DirectMethod]
    public void OnClick(object sender, DirectEventArgs e)
    {
        PrepareGrid(myGrid2, false);
        myGrid2.Render();
        btnPrepare.Disabled = true;
    }

I also placed the grid inside a container as suggested but that didn't seem to have any kind of effect.

    <ext:Container ID="Container1" runat="server">
        <Content>
            <ext:Button runat="server" ID="btnPrepare" Text="Prepare Grid">
                <DirectEvents>
                    <Click OnEvent="OnClick" />
                </DirectEvents>
            </ext:Button>

            <ext:GridPanel ID="myGrid2" runat="server" StoreID="strEmpty" Height="200" Title="Built in OnClick">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Day" />
                        <ext:Column Header="Time" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GroupingView>
                        <HeaderGroupRows>
                        </HeaderGroupRows>
                    </ext:GroupingView>
                </View>
            </ext:GridPanel>
        </Content>
    </ext:Container>

Thanks and regards,

Andrew

**Daniil** · Apr 29, 2014, 1:44 PM

A full sample (as in the original post) is better.

You should not call the AddColumn along with the Render call.

**ALobpreis** · Apr 29, 2014, 2:13 PM

Yes, sorry. I also removed the AddColumn call.

<%@ 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)
        {
            PrepareGrid(myGrid);
        }
    }

    [DirectMethod]
    public void OnClick(object sender, DirectEventArgs e)
    {
        PrepareGrid(myGrid2);
        myGrid2.Render();
        btnPrepare.Disabled = true;
    }
    
    private void PrepareGrid(GridPanel grid)
    {
        var columns = new string[] { "Text 1", "Number 1", "Text 2", "Number 2", "End Column" };

        foreach (string col in columns)
        {
            Column newCol = new Column { Header = col };
            grid.ColumnModel.Columns.Add(newCol);
        }

        var headerGroupRow = new HeaderGroupRow();
        var headerGroups = new[] { new { Header = "Date", Span = 2 }, new { Header = "Group 1", Span = 2 },
            new { Header = "Group 2", Span = 2}, new { Header = "", Span = 1}};

        foreach (var header in headerGroups)
        {
            headerGroupRow.Columns.Add(new HeaderGroupColumn
            {
                Header = header.Header,
                Align = Alignment.Center,
                ColSpan = header.Span
            });
        }

        grid.View[0].HeaderGroupRows.Add(headerGroupRow);
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Dynamic Grid Column Header Grouping Problem</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>Dynamic Grid Column Header Grouping Problem</h1>

    <cnet:StoreTable ID="strEmpty" runat="server" />

    <ext:GridPanel ID="myGrid" runat="server" StoreID="strEmpty" Height="200" Title="Built in Page_Load">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Day" />
                <ext:Column Header="Time" />
            </Columns>
        </ColumnModel>
        <View>
            <ext:GroupingView>
                <HeaderGroupRows>
                </HeaderGroupRows>
            </ext:GroupingView>
        </View>
    </ext:GridPanel>

    <ext:Container ID="Container1" runat="server">
        <Content>
            <ext:Button runat="server" ID="btnPrepare" Text="Prepare Grid">
                <DirectEvents>
                    <Click OnEvent="OnClick" />
                </DirectEvents>
            </ext:Button>

            <ext:GridPanel ID="myGrid2" runat="server" StoreID="strEmpty" Height="200" Title="Built in OnClick">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Day" />
                        <ext:Column Header="Time" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GroupingView>
                        <HeaderGroupRows>
                        </HeaderGroupRows>
                    </ext:GroupingView>
                </View>
            </ext:GridPanel>
        </Content>
    </ext:Container>

</body>
</html>

**Daniil** · Apr 30, 2014, 12:03 PM

Could you, please, clarify what is that?

<cnet:StoreTable ID="strEmpty" runat="server" />

**ALobpreis** · Apr 30, 2014, 1:00 PM

Oh, I'm sorry. It's one of our user controls, it inherits from Ext.Net.Store and adds very little functionality. Anyway I replaced it with the original store but the problem remains.

<ext:Store ID="strEmpty" runat="server" />

But now I have news! I have just replaced the dlls with version 1.5.1.0 and now it works after executing Render()!! Then I also tried with 1.2.0 and it worked as well. So, it seems somewhere between 1.0 and 1.2.0 this was fixed (or implemented perhaps?). I checked the changelog but couldn't find any entry related to this.

Do you by chance know if this header grouping can be done with version 1.0? Or is upgrading the only option?

Thanks and regards,

Andrew

**Daniil** · May 05, 2014, 5:29 AM

Originally Posted by ALobpreis

Do you by chance know if this header grouping can be done with version 1.0? Or is upgrading the only option?

It looks upgrading is the only option. Please clarify is that a problem for you?

Thread: Problem with dynamic column header grouping

Thread Tools

Search Thread

Display

Problem with dynamic column header grouping

Similar Threads

[CLOSED] Dynamic header column component direct event Issue

[CLOSED] Problem with TreeGrid Column Header...

[CLOSED] Problem Creating Dynamic Header column for filter

Problem Creating Dynamic Header column for filter

GridPanel - Grouping "Column" Style and Header Text

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: Problem with dynamic column header grouping

Problem with dynamic column header grouping

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us