AJAX + Column Filtering problem

[Golem]

I'm having a problem with RadGrid column filtering.  I have a grid that I have set AutoGenerateColumns = False, and I am dynamically building the bound columns in the code-behind... an example of one of the columns follows:

                    case "Numeric":
                        GridNumericColumn numericCol = new GridNumericColumn();
                        RadGrid1.MasterTableView.Columns.Add(numericCol);
                        numericCol.HeaderText = GridSchema.ColumnHeadersSplit[i].ToString();
                        numericCol.DataField = GridSchema.ColumnNamesSplit[i].ToString();
                        numericCol.UniqueName = GridSchema.ColumnNamesSplit[i].ToString();
                        numericCol.Reorderable = true;
                        numericCol.ConvertEmptyStringToNull = true;
                        numericCol.DataFormatString = GridSchema.ColumnFormatsSplit[i].ToString();
                        numericCol.FooterAggregateFormatString = GridSchema.ColumnFormatsSplit[i].ToString();
                        if (GridSchema.ColumnAggregateFormatSplit[i].ToString() == string.Empty)
                        { numericCol.Aggregate = (GridAggregateFunction)Enum.Parse(typeof(GridAggregateFunction), "None"); }
                        else
                        { numericCol.Aggregate = (GridAggregateFunction)Enum.Parse(typeof(GridAggregateFunction), GridSchema.ColumnAggregateFormatSplit[i].ToString()); }
                        numericCol.AllowFiltering = (Boolean)Convert.ToBoolean(Convert.ToInt32(GridSchema.ColumnAllowFilteringSplit[i].ToString()));
                        numericCol.Groupable = (Boolean)Convert.ToBoolean(Convert.ToInt32(GridSchema.ColumnAllowGroupingSplit[i].ToString()));
                        numericCol.AllowSorting = (Boolean)Convert.ToBoolean(Convert.ToInt32(GridSchema.ColumnAllowSortingSplit[i].ToString()));
                        numericCol.Visible = (Boolean)Convert.ToBoolean(Convert.ToInt32(GridSchema.ColumnVisibleSplit[i].ToString()));
                        break;

My RadGrid is bound to an ObjectDataSource which exposes a DataTable as follows:

        <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="ObjectDataSource1" GridLines="None"
            AllowFilteringByColumn="True" AutoGenerateColumns="False">
            <MasterTableView DataSourceID="ObjectDataSource1">
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
            </MasterTableView>
            <ClientSettings AllowColumnsReorder="True" ColumnsReorderMethod="Reorder">
            </ClientSettings>
            <FilterMenu EnableTheming="True">
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
            </FilterMenu>
        </telerik:RadGrid>

The problem occurs when I try to do client-side drag-and-drop reordering of the columns, with AJAX and filtering enabled.  I end up getting a Javascript error: "Error: Sys.ArgumentException: Value must not be null for Controls and Behaviors. Parameter name: element"

However, if I set AutoGenerateColumns = True and bypass my dynamic column generation code, everything works OK.

My question is... what am I missing when I create my own columns dynamically?  What properties are being set when AutoGenerateColumns = True that I need to reproduce dynamically in order to allow this to work?

Thanks in advance.

[Veli]

Hi Golem,

When you declare your RadGrid in the aspx page, and need to set its properties programmatically in the code-behind, please observe that this code goes in the Page_Load event. Otherwise, your code seems correct, columns are properly first added to the column collection, and then have their properties set.

If you get stuck on the project, please consider opening a regular support ticket where you can provide us a sample runnable project we can examine to be able to advise you further.

Regards,
Veli
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Golem]

Thank you for the reply, Veli.  I have been able to pinpoint the source of the problem... I do not know if this would be considered a bug or not.  I suppose that's for Team Telerik to decide!

The problem occurs when I have a RadGrid using AJAX and filtering AND the grid contains a GridNumericColumn object with its "Visible" property set to "false".

If I turn off AJAX or filtering, the GridNumericColumn works fine.  I have tested with a GridBoundColumn and a GridDateTimeColumn and DO NOT have the problem, which is why when I let the RadGrid auto-generate its own columns, everything works fine.  The RadGrid automatically creates GridBoundColumns for everything.

I created a simple ASPX and code-behind example using the Northwind database to demonstrate this.

ASPX:

    <form id="form1" runat="server">
    <div>

        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
        </telerik:RadScriptManager>
        <br />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
            AllowPaging="True" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
            GridLines="None" PageSize="5">
<MasterTableView DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
    <Columns>
        <telerik:GridBoundColumn DataField="EmployeeID" DataType="System.Int32"
            HeaderText="EmployeeID" ReadOnly="True" SortExpression="EmployeeID"
            UniqueName="EmployeeID">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName"
            SortExpression="LastName" UniqueName="LastName">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName"
            SortExpression="FirstName" UniqueName="FirstName">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Title" HeaderText="Title"
            SortExpression="Title" UniqueName="Title">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="HireDate" DataType="System.DateTime"
            HeaderText="HireDate" SortExpression="HireDate" UniqueName="HireDate">
        </telerik:GridBoundColumn>
    </Columns>
</MasterTableView>

            <ClientSettings AllowColumnsReorder="True" ColumnsReorderMethod="Reorder">
            </ClientSettings>

<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
        </telerik:RadGrid>
        <br />
        <telerik:RadGrid ID="RadGrid2" runat="server" AllowFilteringByColumn="True"
            AllowPaging="True" AutoGenerateColumns="False" GridLines="None" PageSize="5">
<MasterTableView>
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
</MasterTableView>

            <ClientSettings AllowColumnsReorder="True" ColumnsReorderMethod="Reorder">
            </ClientSettings>

<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
        </telerik:RadGrid>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>"
            SelectCommand="SELECT * FROM [Employees]"></asp:SqlDataSource>

    </div>
    </form>

Code-Behind:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                GridNumericColumn col1 = new GridNumericColumn();
                RadGrid2.MasterTableView.Columns.Add(col1);
                col1.HeaderText = "Employee ID";
                col1.UniqueName = "EmployeeId";
                col1.DataField = "EmployeeId";
                col1.Reorderable = true;
                col1.ConvertEmptyStringToNull = true;
                col1.DataFormatString = "";
                col1.FooterAggregateFormatString = "";
                col1.Aggregate = (GridAggregateFunction)Enum.Parse(typeof(GridAggregateFunction), "None");
                col1.AllowFiltering = true;
                col1.Groupable = true;
                col1.AllowSorting = true;
                col1.Visible = false;

                GridBoundColumn col2 = new GridBoundColumn();
                RadGrid2.MasterTableView.Columns.Add(col2);
                col2.HeaderText = "First Name";
                col2.UniqueName = "FirstName";
                col2.DataField = "FirstName";
                col2.Reorderable = true;
                col2.ConvertEmptyStringToNull = true;
                col2.DataFormatString = "";
                col2.FooterAggregateFormatString = "";
                col2.Aggregate = (GridAggregateFunction)Enum.Parse(typeof(GridAggregateFunction), "None");
                col2.AllowFiltering = true;
                col2.Groupable = true;
                col2.AllowSorting = true;
                col2.Visible = true;

                GridBoundColumn col3 = new GridBoundColumn();
                RadGrid2.MasterTableView.Columns.Add(col3);
                col3.HeaderText = "Last Name";
                col3.UniqueName = "LastName";
                col3.DataField = "LastName";
                col3.Reorderable = true;
                col3.ConvertEmptyStringToNull = true;
                col3.DataFormatString = "";
                col3.FooterAggregateFormatString = "";
                col3.Aggregate = (GridAggregateFunction)Enum.Parse(typeof(GridAggregateFunction), "None");
                col3.AllowFiltering = true;
                col3.Groupable = true;
                col3.AllowSorting = true;
                col3.Visible = true;

                GridBoundColumn col4 = new GridBoundColumn();
                RadGrid2.MasterTableView.Columns.Add(col4);
                col4.HeaderText = "Title";
                col4.UniqueName = "Title";
                col4.DataField = "Title";
                col4.Reorderable = true;
                col4.ConvertEmptyStringToNull = true;
                col4.DataFormatString = "";
                col4.FooterAggregateFormatString = "";
                col4.Aggregate = (GridAggregateFunction)Enum.Parse(typeof(GridAggregateFunction), "None");
                col4.AllowFiltering = true;
                col4.Groupable = true;
                col4.AllowSorting = true;
                col4.Visible = true;

                GridDateTimeColumn col5 = new GridDateTimeColumn();
                RadGrid2.MasterTableView.Columns.Add(col5);
                col5.HeaderText = "Hire Date";
                col5.UniqueName = "HireDate";
                col5.DataField = "HireDate";
                col5.Reorderable = true;
                col5.ConvertEmptyStringToNull = true;
                col5.DataFormatString = "{0:mm/dd/yy}";
                col5.FooterAggregateFormatString = "";
                col5.Aggregate = (GridAggregateFunction)Enum.Parse(typeof(GridAggregateFunction), "None");
                col5.AllowFiltering = true;
                col5.Groupable = true;
                col5.AllowSorting = true;
                col5.Visible = true;
            }

            RadGrid2.DataSourceID = "SqlDataSource1";
            RadGrid2.DataBind();

        }

The example creates 2 grids; the first (RadGrid1) is generated via the Designer, the 2nd (RadGrid2) has its schema created in the code-behind.  The first column, EmployeeID, is set to be a GridNumericColumn with its "Visible" property set to "false".  If you try and reorder any of the columns (IE7) you will get the error.  If you set the "visible" property to "true", everything is fine.

Playing with the "visible" property of the GridBoundColumn and GridDateTimeColumn objects will show that it can be set to "false" with no errors.  It's only the GridNumericColumn that gives the error.

I have not checked beyond these three column types.  The error may or may not occur with GridCalculatedColumn, GridCheckboxColumn, etc., I don't know.  I haven't explored those since my immediate need is only the 3 types I have tested so far.

Also note that if you set the "Visible" property to "false" but turn off AJAX, everything is fine.  It's only the combination of AJAX, Filtering, and the GridBoundNumeric column's Visible=false that causes the problem.

So... Bug or no bug?

[Pavel]

Hello Golem,

Thank you for the provided markup and code. It was very helpful to reproduce the problem. Indeed this seems like a bug in the scenario you describe. I will forward your findings to our developers for further investigation. As a workaround you can set the Display property to false instead of using Visible.

As a small token of gratitude for your feedback and efforts I have updated your Telerik points.

Kind regards,
Pavel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.