[CLOSED] Removing BufferView HeaderRow's columns in code behind

[deejayns]

Hello,

I am receiving a javascript error when I try to remove HeaderRow's columns in code behind (columns are defined in markup).

This is a code fragment:

....

 <View>
                            <ext:BufferView ID="viewCandidate" ScrollOffset="0" ForceFit="true" runat="server" RowHeight="25">
                                <HeaderRows>
                                    <ext:HeaderRow>
                                        <Columns>
                                            <ext:HeaderColumn />
                                            <ext:HeaderColumn />
                                            <ext:HeaderColumn />
                                            <ext:HeaderColumn />
                                            <ext:HeaderColumn>
                                                <Component>
                                                    <tbm:VMSCompareComboBox ID="opCandidateName" runat="server" SelectedIndex="0" CompareMode="StringCompare">
                                                        <Listeners>
                                                            <Select Handler="changeFilterType(#{gridCandidate}, #{fltrCandidateName}.getValue());" />
                                                        </Listeners>
                                                    </tbm:VMSCompareComboBox>
                                                </Component>
                                            </ext:HeaderColumn>

.....



   <ext:HeaderRow>
                                        <Columns>
                                            <ext:HeaderColumn />
                                            <ext:HeaderColumn AutoWidthElement="false">
                                                <Component>
                                                    <ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
                                                        <ToolTips>
                                                            <ext:ToolTip ID="tipClear" runat="server" />
                                                        </ToolTips>
                                                        <Listeners>
                                                            <Click Handler="clearFilter2(#{gridCandidate});" />
                                                        </Listeners>
                                                    </ext:Button>
                                                </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn />
                                            <ext:HeaderColumn />
                                            <ext:HeaderColumn>
                                                <Component>
                                                    <ext:TextField ID="fltrCandidateName" runat="server" EnableKeyEvents="true">
                                                        <Listeners>
                                                            <KeyUp Handler="applyFilter2Focus(this, #{gridCandidate});" Buffer="1000" />
                                                        </Listeners>
                                                    </ext:TextField>
                                                </Component>
                                            </ext:HeaderColumn>

....

Code behind:

....

            viewCandidate.HeaderRows(1).Columns.RemoveAt(5)

....

Javascript error:

invalid label
[Break On This Error]

xtype: "combo",

8000.aspx (line 1617, col 2)



Columns which do not have component defined can be removed without an error.


Any suggestion how these columns can be removed?


Thanks.

[Daniil]

Hi,

Please clarify do you need to remove a HeaderColumn during a DirectEvent/DirectMethod?

[Daniil]

If yes, a Component must be removed from GridPanel's Controls and LazyItems collections.

Example

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            store.DataBind();
        }
    }

    protected void Remove(object sender, DirectEventArgs e)
    {
        HeaderColumn column = this.GridPanel1.GetView().HeaderRows[0].Columns[2];
        if (column.Component.Count > 0)
        {
            Component c = column.Component[0];
            if (c != null)
            {
                this.GridPanel1.Controls.Remove(c);
                this.GridPanel1.LazyItems.Remove(c);
            }
        }
        this.GridPanel1.GetView().HeaderRows[0].Columns.Remove(column);
        this.GridPanel1.Render();
    }
</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 runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Button 
            runat="server" 
            Text="Remove the last HeaderColumn" 
            OnDirectClick="Remove" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server">
                    <HeaderRows>
                        <ext:HeaderRow>
                            <Columns>
                                <ext:HeaderColumn />
                                <ext:HeaderColumn />
                                <ext:HeaderColumn>
                                    <Component>
                                        <ext:TextField runat="server" />
                                    </Component>
                                </ext:HeaderColumn>
                            </Columns>
                        </ext:HeaderRow>
                    </HeaderRows>
                </ext:GridView>
            </View>
        </ext:GridPanel>
    </form>
</body>
</html>

[deejayns]

Daniil, thx for your reply...

It is not a DirectMethod, niether the DirectEvent it is a first page load (Ext.Net.X.IsAjaxRequest = False), anyway it acts strange.


However your code DO WORK, but I am still not sure why the current code DO NOT WORK anymore...


The funny thing I've noticed also is when I am removing grid columns (have 19 of them), can't say:

...
gridCandidate.ColumnModel.Columns.RemoveAt(2)
gridCandidate.ColumnModel.Columns.RemoveAt(17)
gridCandidate.ColumnModel.Columns.RemoveAt(18)
....

Need to use the following code instead:

...
gridCandidate.ColumnModel.Columns.RemoveAt(2)
gridCandidate.ColumnModel.Columns.RemoveAt(16)
gridCandidate.ColumnModel.Columns.RemoveAt(16)
...

It seems that the indexes are recalculated at column removal...

[Daniil]

Well, the Columns is the ColumnCollection class which implements the System.Collections.Generic.IList interface.

Respectively, it functions as a common generic list.

You can remove items from the end.

Example

grid.ColumnModel.Columns.RemoveAt(18);
grid.ColumnModel.Columns.RemoveAt(17);
grid.ColumnModel.Columns.RemoveAt(2);

[deejayns]

Daniil,

just before closing this one, can you explain what is the main difference between your code an my starting code for a headerrow columns removal?

Can you explain this?

this.GridPanel1.LazyItems.Remove(c);

Also it works for me (probably because it is not a DirectMethod) without:

this.GridPanel1.Render();

What exactly LazyItems collection is?

Thanks

[Daniil]

Yes, Render calling is required only during a DirectEvent or DirectMethod.

The control's LazyItems is a collection of lazy components which must be rendered with that control.

The difference between a lazy item and non-lazy item is the fact that a lazy item is rendered as a config like:

{
    xtype : "textfield",
    id : "TextField1",
    // the rest config properties
}

and must be placed to a respective client side collection, but a non-lazy item is rendered with a constructor.

new Ext.form.TextField({
    id : "TextField1",
    // the rest config properties
});

A HeaderColumn is a lazy item and it's added to GridPanel's LazyItems collection.