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....
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
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">
<
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
/>");
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
Hello Warren,
The loading panel is shown by the following code:
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:
I recommend that you examine the following link:
Show/Hide RadAjaxLoadingPanel explicitly
Kind regards,
Daniel
the Telerik team
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.