Contents
Licensing
Installation and deployment
RadControls for ASP.NET AJAX Fundamentals
RadControls
RadAjax
RadAsyncUpload
RadBarcode
RadButton
RadCalendar
RadCaptcha
RadChart
RadColorPicker
RadComboBox
RadDataPager
RadDock
RadEditor
RadFileExplorer
RadFilter
RadFormDecorator
RadGrid
Getting Started
Design Time
ASP.NET 3.5 Features
Columns
Rows
Defining Structure
Data Binding
Sorting
Paging
Scrolling
Grouping
Filtering
Selecting
Insert/Update/Delete
Hierarchical Grid Types and Load Modes
Exporting
Layout
Visible/Enabled Conventions
Ajaxified RadGrid
Inheritance
Control Lifecycle
Performance
Appearance and Styling
Accessibility and Internationalization
How To
Server-Side Programming
Client-Side Programming
Application Scenarios
Troubleshooting
RadHtmlChart
RadImageEditor
RadInput
RadListBox
RadListView
RadMenu
RadNotification
RadODataDataSource
RadOrgChart
RadPanelBar
RadRating
RadRibbonBar
RadRotator
RadScheduler
RadScriptManager
RadSitemap
RadSlider
RadSocialShare
RadSpell
RadSplitter
RadStylesheetManager
RadTabStrip
RadTagCloud
RadToolBar
RadToolTip
RadTreeList
RadTreeView
RadUpload
RadWindow
RadXmlHttpPanel
Visual Studio Extensions
Integrating RadControls in ASPNET MVC
Integrating RadControls in DNN
Integrating RadControls in Mono
Integrating RadControls in SharePoint
API Reference
For More Help
|
|
      RadControls for ASP.NET AJAX This demo illustrates how to spell check text input fields in RadGrid's edit form using RadSpell. This is useful when you would like to notify the end user when there are spelling mistakes in the text editor fields he/she uses to update/insert grid records.
The key moments are: Attach a client script to the "Update" button in the grid's edit form (using asp HiddenField to store its id for this purpose). Take advantage of RadSpell.ControlsToCheck property, add the ClientID's of all the textbox editors that should be checked. Call the startSpellCheck() client method of RadSpell to check the specified input controls. Raise a flag when the check is finished to update/insert the data.
Additionally, the grid and spell components are ajaxified using RadAjaxManager instance to perform the data editing operations with asynchronous requests. Here are the relevant code snippets from the online demo:  CopyJavaScript <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
var IsChecked = false;
function StartCheck() {
if (!IsChecked) {
var spell = $find('<%= RadSpell1.ClientID %>');
spell.startSpellCheck(); return false;
} else { return true; }
}
function SpellCheckFinished(sender, args) {
IsChecked = true;
}
function SpellCheckClosed(sender, args) {
if (IsChecked) {
var buttonID = document.getElementById('<%=HiddenField1.ClientID %>').value;
document.getElementById(buttonID).click(); IsChecked = false;
}
}
</telerik:RadCodeBlock>
CopyASPX <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="RadSpell1" />
<telerik:AjaxUpdatedControl ControlID="HiddenField1" />
<telerik:AjaxUpdatedControl ControlID="lblMessage" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<asp:HiddenField ID="HiddenField1" runat="server" />
<telerik:RadSpell ID="RadSpell1" runat="server" ButtonType="None" OnClientDialogClosed="SpellCheckClosed"
OnClientCheckFinished="SpellCheckFinished" />
<telerik:RadGrid ID="RadGrid2" runat="server" Width="100%" DataSourceID="SqlDataSource1"
AllowAutomaticInserts="true" AllowAutomaticUpdates="true" OnItemCreated="RadGrid1_ItemCreated"
OnColumnCreated="RadGrid1_ColumnCreated" OnItemUpdated="RadGrid1_ItemUpdated" OnItemInserted="RadGrid1_ItemInserted">
<MasterTableView AllowSorting="true" PageSize="10" AllowPaging="True" Width="100%"
DataKeyNames="ProductID" DataSourceID="SqlDataSource1" CommandItemDisplay="TopAndBottom">
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" />
</Columns>
<EditFormSettings>
<EditColumn ButtonType="ImageButton" />
</EditFormSettings>
</MasterTableView></telerik:RadGrid><asp:Label ID="lblMessage" runat="server" EnableViewState="false" /><br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT ProductID, ProductName, QuantityPerUnit, UnitPrice, UnitsInStock, Discontinued FROM [Products]"
InsertCommand="INSERT INTO Products(ProductName, QuantityPerUnit, UnitPrice, UnitsInStock, Discontinued) VALUES (@ProductName, @QuantityPerUnit, @UnitPrice, @UnitsInStock, @Discontinued)"
UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [UnitsInStock] = @UnitsInStock, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID">
<UpdateParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="QuantityPerUnit" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Decimal" />
<asp:Parameter Name="UnitsInStock" Type="Int16" />
<asp:Parameter Name="Discontinued" Type="Boolean" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="QuantityPerUnit" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Decimal" />
<asp:Parameter Name="UnitsInStock" Type="Int16" />
<asp:Parameter Name="Discontinued" Type="Boolean" />
</InsertParameters>
</asp:SqlDataSource>CopyC# protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridEditableItem && e.Item.IsInEditMode)
{
GridEditableItem editedItem = e.Item as GridEditableItem;
GridEditManager editMan = editedItem.EditManager;
ImageButton actionButton;
if (editedItem.OwnerTableView.IsItemInserted)
{
actionButton = editedItem.FindControl("PerformInsertButton") as ImageButton;
}
else
{
actionButton = editedItem.FindControl("UpdateButton") as ImageButton;
}
actionButton.OnClientClick = "return StartCheck();";
HiddenField1.Value = actionButton.ClientID;
Stack controlsToCheck = new Stack();
int index = 0;
foreach (GridColumn column in editedItem.OwnerTableView.RenderColumns)
{
if (column is IGridEditableColumn && column.IsEditable)
{
IGridColumnEditor editor = editMan.GetColumnEditor(column as IGridEditableColumn);
if (editor is GridTextBoxColumnEditor)
{
string editorID = (editor as GridTextBoxColumnEditor).TextBoxControl.ClientID;
controlsToCheck.Push(editorID);
index++;
}
}
}
RadSpell1.ControlsToCheck = new string[index];
while (controlsToCheck.Count > 0)
{
RadSpell1.ControlsToCheck.SetValue(controlsToCheck.Pop(), controlsToCheck.Count);
}
RadSpell1.IsClientID = true;
}
}
protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
{
if (e.Column.IsBoundToFieldName("ProductID"))
{
(e.Column as GridBoundColumn).ReadOnly = true;
}
}
protected void RadGrid1_ItemUpdated(object source, Telerik.Web.UI.GridUpdatedEventArgs e)
{
GridEditableItem item = (GridEditableItem)e.Item;
String id = item.GetDataKeyValue("ProductID").ToString();
if (e.Exception != null)
{
e.KeepInEditMode = true;
e.ExceptionHandled = true;
SetMessage("Product with ID " + id + " cannot be updated. Reason: " + e.Exception.Message);
}
else
{
SetMessage("Product with ID " + id + " is updated!");
}
}
protected void RadGrid1_ItemInserted(object source, GridInsertedEventArgs e)
{
if (e.Exception != null)
{
e.ExceptionHandled = true;
SetMessage("Product cannot be inserted. Reason: " + e.Exception.Message);
}
else
{
SetMessage("New product is inserted!");
}
}
private void SetMessage(string message)
{
lblMessage.Text = message;
}CopyVB.NET Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles RadGrid1.ItemCreated
If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
Dim editedItem As GridEditableItem = TryCast(e.Item, GridEditableItem)
Dim editMan As GridEditManager = editedItem.EditManager
Dim actionButton As ImageButton
If editedItem.OwnerTableView.IsItemInserted Then
actionButton = TryCast(editedItem.FindControl("PerformInsertButton"), ImageButton)
Else
actionButton = TryCast(editedItem.FindControl("UpdateButton"), ImageButton)
End If
actionButton.OnClientClick = "return StartCheck();"
HiddenField1.Value = actionButton.ClientID
Dim controlsToCheck As New Stack()
Dim index As Integer = 0
For Each column As GridColumn In editedItem.OwnerTableView.RenderColumns
If TypeOf column Is IGridEditableColumn AndAlso column.IsEditable Then
Dim editor As IGridColumnEditor = editMan.GetColumnEditor(TryCast(column, IGridEditableColumn))
If TypeOf editor Is GridTextBoxColumnEditor Then
Dim editorID As String = TryCast(editor, GridTextBoxColumnEditor).TextBoxControl.ClientID
controlsToCheck.Push(editorID)
index += 1
End If
End If
Next
RadSpell1.ControlsToCheck = New String(index - 1) {}
While controlsToCheck.Count > 0
RadSpell1.ControlsToCheck.SetValue(controlsToCheck.Pop(), controlsToCheck.Count)
End While
RadSpell1.IsClientID = True
End If
End Sub
Protected Sub RadGrid1_ColumnCreated(ByVal sender As Object, ByVal e As GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated
If e.Column.IsBoundToFieldName("ProductID") Then
TryCast(e.Column, GridBoundColumn).ReadOnly = True
End If
End Sub
Protected Sub RadGrid1_ItemUpdated(ByVal source As Object, ByVal e As Telerik.Web.UI.GridUpdatedEventArgs) Handles RadGrid1.ItemUpdated
Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
Dim id As [String] = item.GetDataKeyValue("ProductID").ToString()
If e.Exception IsNot Nothing Then
e.KeepInEditMode = True
e.ExceptionHandled = True
SetMessage("Product with ID " + id + " cannot be updated. Reason: " + e.Exception.Message)
Else
SetMessage("Product with ID " + id + " is updated!")
End If
End Sub
Protected Sub RadGrid1_ItemInserted(ByVal source As Object, ByVal e As GridInsertedEventArgs) Handles
RadGrid1.ItemInserted()
If e.Exception IsNot Nothing Then
e.ExceptionHandled = True
SetMessage("Product cannot be inserted. Reason: " + e.Exception.Message)
Else
SetMessage("New product is inserted!")
End If
End Sub
Private Sub SetMessage(ByVal message As String)
lblMessage.Text = message
End Sub
|