Error javascript if RadGrid binds data with Ajaxified and filtering is ON (SharePoint 2010)

Problem:


I have an UI to allow user to select a list and bind the data into grdiview. The button create will run under Ajax.

If you are using RadGrid with ajaxified in the package Telerik.Web.UI.Dll (2010.1.415.35), but did not bind the data into grid until the configuration finished, you will get the error like this: (this error just happens with filtering function is ON).

Note: Just happen on SharePoint 2010 (both of SharePoint Foundation and Office SharePoint Server)

In fact, you still see the data on gridview but some functions on grid did not work correctl such as the filtering menu is stopped working.

Symptom:

After binding data, RadGrid added a lot of javascript resources in page need to run all functions. However, these resources will not be added after binding data under ajaxified.

Solutions:

When the setting page is showing, we bind the empty data (because the grid view does not show on the page, so we can bind with any data), here I am using a simple data with one column)

//This code should be put in OnLoad() method
//and just run for the first time
//when we click on Create button, the radGrid will bind from table after collecting data
//and these code will bypassed.

if (!Page.IsPostBack)
{
   DataTable tb = new DataTable();
   tb.Columns.Add("col1");
   GridDataBound col = new GridDataBound()
   col.HeaderText = "Col1";
   col.DataField = "Col1";
   col.UniqueCol = "Col1";

   radGrid.Columns.Clear();
   radGrid.MasterTableView.Columns.Add(col);
   radGrid.DataSource = tb;
   radGrid.DataBind();
}


//Events for create button
 protected void Create_Click(object sender, EventArgs e)
{
   //Collecting data
   radGrid.DataSource = tb;
   radGrid.DataBind();
}

The purpose to bind data at the first time is to generate the JavaScript resources by RadGrid. The next step is running under Ajax, so these resource will not update after that. But we can use the filtering function correctly.