Spell

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Spell - Spell Check RadGrid editors

 Product IDProduct NameQuantity Per UnitUnit PriceUnits In StockDiscontinued
Data pager
Data pager
Page size:
PageSizeComboBox
select
 77 items in 8 pages
1Chai10 boxes x 20 bags18.0039
2Chang24 - 12 oz bottles19.0017
3Aniseed Syrup12 - 550 ml bottles10.0013
4Chef Anton's Cajun Seasoning48 - 6 oz jars22.0053
5Chef Anton's Gumbo Mix36 boxes21.350
6Grandma's Boysenberry Spread12 - 8 oz jars25.00120
7Uncle Bob's Organic Dried Pears12 - 1 lb pkgs.30.0015
8Northwoods Cranberry Sauce12 - 12 oz jars40.006
9Mishi Kobe Niku18 - 500 g pkgs.97.0029
10Ikura12 - 200 ml jars31.0031

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. Review the source code of the demo under the respective tabs for more details.

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Integration.GridAndSpell.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>ASP.NET Spell Demo - Spell Check RadGrid editors</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
          <script type="text/javascript">
               //boolean flag which determines whether the spell check has been processed or not
               var IsChecked = false;
               //starts the spell check operation
               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) {
                         //trigger submit from the update/insert button in the grid
                         //the id of the update or insert button is extracted from a hidden field
                         var buttonID = document.getElementById('<%=HiddenField1.ClientID %>').value;
                         document.getElementById(buttonID).click();
                         IsChecked = false;
                    }
               }
          </script>
     </telerik:RadCodeBlock>
     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
          <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                         <telerik:AjaxUpdatedControl ControlID="RadSpell1"></telerik:AjaxUpdatedControl>
                         <telerik:AjaxUpdatedControl ControlID="HiddenField1"></telerik:AjaxUpdatedControl>
                         <telerik:AjaxUpdatedControl ControlID="lblMessage"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
          </AjaxSettings>
     </telerik:RadAjaxManager>
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
     </telerik:RadAjaxLoadingPanel>
     <asp:HiddenField ID="HiddenField1" runat="server"></asp:HiddenField>
     <telerik:RadSpell ID="RadSpell1" runat="server" ButtonType="None" OnClientDialogClosed="SpellCheckClosed"
          OnClientCheckFinished="SpellCheckFinished"></telerik:RadSpell>
     <telerik:RadGrid ID="RadGrid1" 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="None">
               <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton">
                    </telerik:GridEditCommandColumn>
               </Columns>
               <EditFormSettings>
                    <EditColumn ButtonType="ImageButton">
                    </EditColumn>
               </EditFormSettings>
          </MasterTableView>
     </telerik:RadGrid>
     <asp:Label ID="lblMessage" runat="server" EnableViewState="false"></asp:Label>
     <br/>
     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
          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>
               <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
               <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
               <asp:Parameter Name="UnitsInStock" Type="Int16"></asp:Parameter>
               <asp:Parameter Name="Discontinued" Type="Boolean"></asp:Parameter>
          </UpdateParameters>
          <InsertParameters>
               <asp:Parameter Name="ProductName" Type="String"></asp:Parameter>
               <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
               <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
               <asp:Parameter Name="UnitsInStock" Type="Int16"></asp:Parameter>
               <asp:Parameter Name="Discontinued" Type="Boolean"></asp:Parameter>
          </InsertParameters>
     </asp:SqlDataSource>
     <!-- content end -->
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here