This is a migrated thread and some comments may be shown as answers.

RadGrid Declarative Client Side Binding and Loading Panel Spinner

2 Answers 218 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Wired_Nerve
Top achievements
Rank 2
Wired_Nerve asked on 26 Jun 2012, 09:37 PM
I watched the following demo (  RadGrid for ASP.NET AJAX - Declarative Client-Side Binding, Pt. 1 )

What I am trying to figure out is the best approach for a loading spinner icon... I found an example: (  Grid / Programmatic Binding   )
But I can't get the Loading panel to show on mine. 

I build the exact same demo (northwind) in the Demo  RadGrid for ASP.NET AJAX - Declarative Client-Side Binding, Pt. 1,   I just not sure how to get the loading Spinner to show up via client side code....


2 Answers, 1 is accepted

Sort by
0
Wired_Nerve
Top achievements
Rank 2
answered on 27 Jun 2012, 01:21 PM
SO I loaded the DEMO project and drilled down to the grid folder / examples / client / databinding / defaultcs.aspx and it of course runs perfectly (the loading spinner shows up)...  So all i can assume is I am missing something in my web config or other such config file...

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DefaultCS.aspx.cs" Inherits="TelerikClientSideApi.DefaultCS" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
        <!--
            function pageLoad(sender, eventArgs) {
                $get("<%= Panel1.ClientID %>").innerHTML = "";
 
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
 
                $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");
 
                PageMethods.GetData(0, tableView.get_pageSize(),
                tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toList(),
                    updateGrid);
 
                PageMethods.GetCount(tableView.get_filterExpressions().toList(), updateVirtualItemCount);
            }
 
            function RadGrid1_Command(sender, args) {
                $get("<%= Panel1.ClientID %>").innerHTML = String.format("<b>RadGrid1_Command</b><br />CommandName : {0}, CommandArgument : {1} <br /><br />", args.get_commandName(), args.get_commandArgument());
 
                args.set_cancel(true);
 
                var pageSize = sender.get_masterTableView().get_pageSize();
 
                var sortExpressions = sender.get_masterTableView().get_sortExpressions();
                var filterExpressions = sender.get_masterTableView().get_filterExpressions();
 
                var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
 
                if (args.get_commandName() == "Filter")
                    currentPageIndex = 0;
 
 
                var sortExpressionsAsSQL = sortExpressions.toString();
                var filterExpressionsAsSQL = filterExpressions.toString();
 
                $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");
 
                PageMethods.GetData(currentPageIndex * pageSize, pageSize, sortExpressionsAsSQL, filterExpressions.toList(), updateGrid);
 
                if (args.get_commandName() == "Filter") {
                    PageMethods.GetCount(filterExpressions.toList(), updateVirtualItemCount);
                }
            }
 
            function updateGrid(result) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_dataSource(result);
                tableView.dataBind();
 
                $find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= RadGrid1.ClientID %>");
            }
 
            function updateVirtualItemCount(result) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_virtualItemCount(result);
            }
 
            function toggleAllowMultiColumnSorting(sender, e) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_allowMultiColumnSorting(sender.checked);
            }
 
            function RadGrid1_RowDataBound(sender, args) {
                var radTextBox1 = args.get_item().findControl("LastName"); // find control
                radTextBox1.set_value(args.get_dataItem()["LastName"]);
 
                // conditional formatting
                args.get_item().get_cell("TitleOfCourtesy").style.fontWeight = (args.get_dataItem()["TitleOfCourtesy"] == "Dr.") ? "bold" : "normal";
 
                var sb = new Sys.StringBuilder();
 
                sb.appendLine("<b>RadGrid1_RowDataBound</b><br />");
 
                for (var item in args.get_dataItem()) {
                    sb.appendLine(String.format("{0} : {1}<br />", item, args.get_dataItem()[item]));
                }
 
                sb.appendLine("<br />");
                sb.appendLine("<br />");
 
                $get("<%= Panel1.ClientID %>").innerHTML += sb.toString();
            }
        -->
        </script>
    </telerik:RadCodeBlock>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />
    <!-- content start -->
    <asp:CheckBox ID="CheckBox1" Text="Allow multi column sorting" Checked="true" runat="server"
        onclick="toggleAllowMultiColumnSorting(this, event);" />
    <br />
    <telerik:RadGrid ID="RadGrid1" EnableViewState="false" runat="server" AllowPaging="true"
        AllowSorting="True" AllowFilteringByColumn="true" GridLines="None">
        <ItemStyle Wrap="false" />
        <MasterTableView AllowMultiColumnSorting="true" TableLayout="Fixed">
            <Columns>
                <telerik:GridNumericColumn DataField="EmployeeID" HeaderText="EmployeeID" HeaderStyle-Width="100px"
                    FilterControlWidth="50px" />
                <telerik:GridTemplateColumn SortExpression="LastName" DataField="LastName" HeaderText="LastName">
                    <ItemTemplate>
                        <telerik:RadTextBox ID="LastName" runat="server" Width="80px" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" />
                <telerik:GridBoundColumn DataField="Title" HeaderText="Title" />
                <telerik:GridBoundColumn DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy" />
                <telerik:GridDateTimeColumn DataField="BirthDate" DataFormatString="{0:MM/dd/yyyy}"
                    HeaderText="BirthDate" />
            </Columns>
        </MasterTableView>
        <PagerStyle AlwaysVisible="true" Mode="NumericPages" />
        <ClientSettings>
            <ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound" />
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <br />
    <br />
    Events:
    <asp:Panel ID="Panel1" Style="height: 200px; overflow: auto; padding: 15px;" CssClass="module"
        runat="server">
    </asp:Panel>
    <!-- content end -->
    </form>
</body>
</html>

CODE FILE:

using System.Data.Common;
using System.Web.UI;
using System.Web.UI.WebControls;
 
using System.Web.Services;
using System.Collections.Generic;
using System.Text;
using System;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using Telerik.Web.UI;
 
namespace TelerikClientSideApi
{
    public partial class DefaultCS : System.Web.UI.Page
    {
        [WebMethod]
        public static int GetCount(List<GridFilterExpression> filterExpressions)
        {
            int count = 0;
 
            using (SqlConnection connection =
                new SqlConnection(
                    ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString))
            {
                int counter = 0;
                List<DbParameter> parameters = new List<DbParameter>();
 
                StringBuilder sqlBuilder = new StringBuilder();
                sqlBuilder.Append("SELECT COUNT(*) FROM LargeEmployees");
 
                if (filterExpressions.Count > 0)
                    sqlBuilder.Append(" WHERE ");
 
                foreach (GridFilterExpression expression in filterExpressions)
                {
                    counter++;
                    Pair parameter = BuildParameter(expression);
                    parameters.Add((DbParameter)parameter.Second);
 
                    sqlBuilder.AppendFormat((string)parameter.First);
                    if (counter < filterExpressions.Count)
                    {
                        sqlBuilder.AppendFormat(" AND ");
                    }
                }
 
                SqlCommand command = new SqlCommand(sqlBuilder.ToString(),
                        connection);
 
                parameters.ForEach(
                    delegate(DbParameter parameter) { if (parameter != null) command.Parameters.Add(parameter); });
 
                connection.Open();
 
                SqlDataReader reader = command.ExecuteReader();
 
                while (reader.Read())
                {
                    count = reader.GetInt32(0);
                }
 
                reader.Close();
 
            }
            return count;
        }
 
        [WebMethod]
        public static List<Employee> GetData(int startIndex, int maximumRows,
            string sortExpressions, List<GridFilterExpression> filterExpressions)
        {
 
            List<Employee> list = new List<Employee>();
 
            StringBuilder sqlBuilder = new StringBuilder();
            sqlBuilder.AppendLine("DECLARE @startRow int    ");
            sqlBuilder.AppendLine("SET ROWCOUNT @maximumRows");
 
            sqlBuilder.AppendLine("WITH OrderedEmployees As");
            sqlBuilder.AppendLine("(");
 
            if (!String.IsNullOrEmpty(sortExpressions))
            {
                string firstExpression = sortExpressions.Split(',')[0];
                sqlBuilder.AppendLine(String.Format("SELECT *, ROW_NUMBER() OVER (Order By {0} ) as RowNum FROM LargeEmployees ", firstExpression));
            }
            else
                sqlBuilder.AppendLine("SELECT *, ROW_NUMBER() OVER (Order By EmployeeID ASC) as RowNum FROM LargeEmployees ");
 
            int counter = 0;
            List<DbParameter> parameters = new List<DbParameter>();
 
            if (filterExpressions.Count > 0)
                sqlBuilder.Append(" WHERE ");
 
            foreach (GridFilterExpression expression in filterExpressions)
            {
                counter++;
                Pair parameter = BuildParameter(expression);
                parameters.Add((DbParameter)parameter.Second);
 
                sqlBuilder.AppendFormat((string)parameter.First);
                if (counter < filterExpressions.Count)
                {
                    sqlBuilder.AppendFormat(" And ");
                }
            }
 
            sqlBuilder.AppendLine(")");
 
            sqlBuilder.AppendLine(" SELECT * FROM OrderedEmployees Where RowNum > @startRowIndex");
 
            if (!String.IsNullOrEmpty(sortExpressions))
            {
                sqlBuilder.AppendLine(String.Format(" Order By {0}", sortExpressions));
            }
            else
                sqlBuilder.AppendLine(" Order By EmployeeID ASC");
 
 
            using (SqlConnection connection =
                new SqlConnection(
                    ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString))
            {
                SqlCommand command = new SqlCommand(sqlBuilder.ToString(), connection);
 
                command.Parameters.AddWithValue("@startRowIndex", startIndex);
                command.Parameters.AddWithValue("@maximumRows", maximumRows);
 
                parameters.ForEach(
 
                    delegate(DbParameter parameter)
                    {
                        if (parameter != null)
                            command.Parameters.Add(parameter);
                    }
                );
 
                connection.Open();
 
                SqlDataReader reader = command.ExecuteReader();
 
                try
                {
                    while (reader.Read())
                    {
                        Employee newEmployee = new Employee();
 
                        for (int i = 0; i < reader.FieldCount; i++)
                        {
                            switch (reader.GetName(i))
                            {
                                case "EmployeeID":
                                    newEmployee.EmployeeID = reader.GetInt32(i);
                                    break;
                                case "LastName":
                                    newEmployee.LastName = reader.GetString(i);
                                    break;
                                case "FirstName":
                                    newEmployee.FirstName = reader.GetString(i);
                                    break;
                                case "Title":
                                    newEmployee.Title = reader.GetString(i);
                                    break;
                                case "TitleOfCourtesy":
                                    newEmployee.TitleOfCourtesy = reader.GetString(i);
                                    break;
                                case "BirthDate":
                                    newEmployee.BirthDate = reader.GetDateTime(i);
                                    break;
                                default:
                                    break;
                            }
                        }
 
                        list.Add(newEmployee);
                    }
                }
                finally
                {
                    reader.Close();
                }
            }
 
            return list;
        }
        private static Pair BuildParameter(GridFilterExpression expression)
        {
            string fieldName = expression.FieldName.Trim().Split(' ')[0];
            GridKnownFunction filterFunction =
                (GridKnownFunction)Enum.Parse(typeof(GridKnownFunction), expression.FilterFunction);
 
            SqlParameter sqlParameter = null;
 
            string filterExpression = string.Empty;
            switch (filterFunction)
            {
                case GridKnownFunction.NoFilter:
                    filterExpression = "1 = 1";
                    break;
                case GridKnownFunction.Contains:
                    filterExpression = string.Format("[{0}] LIKE @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         string.Format("%{0}%"Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName))));
                    break;
                case GridKnownFunction.DoesNotContain:
                    filterExpression = string.Format("[{0}] NOT LIKE @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         string.Format("%{0}%"Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName))));
                    break;
                case GridKnownFunction.StartsWith:
                    filterExpression = string.Format("[{0}] LIKE @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         string.Format("{0}%"Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName))));
                    break;
                case GridKnownFunction.EndsWith:
                    filterExpression = string.Format("[{0}] LIKE @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         string.Format("%{0}"Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName))));
                    break;
                case GridKnownFunction.EqualTo:
                    filterExpression = string.Format("[{0}] = @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName)));
                    break;
                case GridKnownFunction.NotEqualTo:
                    filterExpression = string.Format("[{0}] <> @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName)));
                    break;
                case GridKnownFunction.GreaterThan:
                    filterExpression = string.Format("[{0}] > @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                        Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName)));
                    break;
                case GridKnownFunction.LessThan:
                    filterExpression = string.Format("[{0}] < @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName)));
                    break;
                case GridKnownFunction.GreaterThanOrEqualTo:
                    filterExpression = string.Format("[{0}] >= @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                        Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName)));
                    break;
                case GridKnownFunction.LessThanOrEqualTo:
                    filterExpression = string.Format("[{0}] <= @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName)));
                    break;
                case GridKnownFunction.Between:
                    filterExpression = string.Format(" ([{0}] >= @{0}) AND ([{0}] <= @{0})", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                        Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName)));
                    break;
                case GridKnownFunction.NotBetween:
                    filterExpression = string.Format(" ([{0}] < @{0}) OR ([{0}] > @{0})", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                        Convert.ChangeType(expression.FieldValue, Type.GetType(expression.DataTypeName)));
                    break;
                case GridKnownFunction.IsEmpty:
                    filterExpression = string.Format(" [{0}] = @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         string.Empty);
                    break;
                case GridKnownFunction.NotIsEmpty:
                    filterExpression = string.Format(" [{0}] <> @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                          string.Empty);
                    break;
                case GridKnownFunction.IsNull:
                    filterExpression = string.Format(" [{0}] = @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         DBNull.Value);
                    break;
                case GridKnownFunction.NotIsNull:
                    filterExpression = string.Format(" [{0}] <> @{0}", fieldName);
                    sqlParameter =
                        new SqlParameter(string.Format("@{0}", fieldName),
                                         DBNull.Value);
                    break;
            }
 
            return new Pair(filterExpression,
                            sqlParameter);
        }
 
        public class Employee
        {
            private int _EmployeeID;
            private string _LastName;
            private string _FirstName;
            private string _Title;
            private string _TitleOfCourtesy;
            private System.Nullable<System.DateTime> _BirthDate;
 
            public Employee()
            {
 
            }
 
            public int EmployeeID
            {
                get
                {
                    return this._EmployeeID;
                }
                set
                {
                    if ((this._EmployeeID != value))
                    {
                        this._EmployeeID = value;
                    }
                }
            }
 
            public string LastName
            {
                get
                {
                    return this._LastName;
                }
                set
                {
                    if ((this._LastName != value))
                    {
                        this._LastName = value;
                    }
                }
            }
 
            public string FirstName
            {
                get
                {
                    return this._FirstName;
                }
                set
                {
                    if ((this._FirstName != value))
                    {
                        this._FirstName = value;
                    }
                }
            }
 
            public string Title
            {
                get
                {
                    return this._Title;
                }
                set
                {
                    if ((this._Title != value))
                    {
                        this._Title = value;
                    }
                }
            }
 
            public string TitleOfCourtesy
            {
                get
                {
                    return this._TitleOfCourtesy;
                }
                set
                {
                    if ((this._TitleOfCourtesy != value))
                    {
                        this._TitleOfCourtesy = value;
                    }
                }
            }
 
            public System.Nullable<System.DateTime> BirthDate
            {
                get
                {
                    return this._BirthDate;
                }
                set
                {
                    if ((this._BirthDate != value))
                    {
                        this._BirthDate = value;
                    }
                }
            }
        }
 
    }
}

0
Daniel
Telerik team
answered on 02 Jul 2012, 11:15 AM
Hello Warren,

The loading panel is shown by the following code:
$find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");

Put simply, the first part of this code finds the client object of the RadAjaxLoading panel and the second part instructs the panel to position itself above the RadGrid. Here is the same code broken into pieces:
var loadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
var radGridClientId = "<%= RadGrid1.ClientID %>";
loadingPanel.show(radGridClientId);

I recommend that you examine the following link:
Show/Hide RadAjaxLoadingPanel explicitly

Kind regards,
Daniel
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Wired_Nerve
Top achievements
Rank 2
Answers by
Wired_Nerve
Top achievements
Rank 2
Daniel
Telerik team
Share this question
or