RadAjaxLoadingPanel with Google-like filtering

[Fred]

Hi,

I'd like to know how can I show a RadAjaxLoadingPanel when I'm using Google-like filtering in a RadGrid.  Every other filtering scenario shows the panel when the user executes a filter. 

I have noticed that for the Google-like filtering demo (http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandcombo/defaultcs.aspx?product=grid), you are not using a RadAjaxLoadingPanel.

Thank you.

[Iana Tsolova]

Hi Fred,

You can find more information on how to use the RadAjaxLoadingPanel in this article.
For instance to modify the mentioned demo so loading panel is displayed over the grid when it is filtered, the following ajax settings are needed and you a declaration of a RadAjaxLoadingPanel:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1"
                    LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="clrFilters">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1"
                    LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="clrFilters" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxloadingPanel ID="RadAjaxLoadingPanel1" runat="server"
    Skin="Vista" />

Greetings,
Iana
the Telerik team

[Fred]

Hi Iana,

If I run your example, it works fine.  But I have a scenario (coded differently than your example) for a google-like filtering where the panel doesn't show.  For every other column in the grid (simple filtering), the panel appears.  Maybe I'm missing something.

ASPX

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="clrFilters">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="clrFilters" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxloadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista"/>
        <telerik:RadGrid ID="RadGrid1" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false"
            AllowFilteringByColumn="true" Width="560px" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="Country" UniqueName="Country" DataField="Country" HeaderText="Country">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="txtCountryFilter" EnableLoadOnDemand="true" AutoPostBack="true" MarkFirstMatch="false"
                                AppendDataBoundItems="true" runat="server" OnItemsRequested="txtCountryFilter_ItemsRequested" OnClientDropDownClosed="txtCountryFilterClose"
                                Text='<%# ((GridItem)Container).OwnerTableView.GetColumn("Country").CurrentFilterValue %>' Width="90px">
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                <script type="text/javascript">
                                    function txtCountryFilterClose(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("Country", sender.get_text(), "StartsWith");
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn ReadOnly="true" SortExpression="City" HeaderText="City" DataField="City" UniqueName="City"  />
                </Columns>
            </MasterTableView>
            <PagerStyle Mode="NumericPages" />
        </telerik:RadGrid>
        <br />
        <asp:Button ID="clrFilters" runat="server" Text="Clear filters" CssClass="button"
            OnClick="clrFilters_Click"></asp:Button>

C#

public partial class Grid : System.Web.UI.Page
    {
        DataTable dt;

        private void Page_Load(object sender, System.EventArgs e)
        {
            dt = GetDataTable("SELECT Country, City, PostalCode FROM Customers");
        }

        protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            this.RadGrid1.DataSource = dt;
        }

        protected void txtCountryFilter_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
        {
            ((RadComboBox)o).DataTextField = "Name";
            ((RadComboBox)o).DataValueField = "Name";

            string[] value = (from c in dt.AsEnumerable() orderby c.Field<string>("Country") select c.Field<string>("Country")).Distinct().ToArray();
            StringBuilder list = new StringBuilder();

            foreach (string s in value)
            {
                if (s.ToLower().StartsWith(e.Text.ToLower()))
                {
                    list.Append("<Data");
                    list.Append(" Name=\"" + s + "\"");
                    list.Append(" />");
                }
            }

            if (list.Length > 0)
            {
                string data = "<FilteringData>" + list + "</FilteringData>";

                DataSet dsXml = new DataSet();
                StringReader stringReader = new StringReader(data);
                dsXml.ReadXml(stringReader);
                ((RadComboBox)o).DataSource = dsXml.Tables[0].DefaultView;
            }
            else
            {
                ((RadComboBox)o).DataSource = null;
            }

            ((RadComboBox)o).DataBind();
        }


        protected void clrFilters_Click(object sender, EventArgs e)
        {
            foreach (GridColumn column in RadGrid1.MasterTableView.Columns)
            {
                column.CurrentFilterFunction = GridKnownFunction.NoFilter;
                column.CurrentFilterValue = string.Empty;
            }
            RadGrid1.MasterTableView.FilterExpression = string.Empty;
            RadGrid1.MasterTableView.Rebind();
        }

        public static DataTable GetDataTable(string query)
        {
            string ConnString = ConfigurationSettings.AppSettings["NorthwindConnectionString"];
            SqlConnection conn = new SqlConnection(ConnString);
            SqlDataAdapter adapter = new SqlDataAdapter();
            adapter.SelectCommand = new SqlCommand(query, conn);

            DataTable myDataTable = new DataTable();

            conn.Open();
            try
            {
                adapter.Fill(myDataTable);
            }
            finally
            {
                conn.Close();
            }
            return myDataTable;
        }
    }

Thank you!

[Iana Tsolova]

Hi Fred,

Can you ry setting the AutoPostBack property of the RadComboBox back to false and see if it makes any difference?

Greetings,
Iana
the Telerik team

[Fred]

It works great with AutoPostBack set to false.  Problem solved!

Thank you!