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

RadGrid Declarative Client Side Binding and Loading Panel Spinner

2 Answers 306 Views

Grid

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

2 Answers, 1 is accepted

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />");

$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" />

<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 />

Events:

<asp:Panel ID="Panel1" Style="height: 200px; overflow: auto; padding: 15px;" CssClass="module"

runat="server">

</asp:Panel>

</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;
                    }
                }
            }
        }
 
    }
}

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadGrid Declarative Client Side Binding and Loading Panel Spinner

2 Answers, 1 is accepted