New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Spell Check RadGrid editors

Next database reset in 0 hours, 32 minutes, 8 seconds
 Product IDProduct NameQuantity Per UnitUnit PriceUnits In StockDiscontinued
123
Page size:
 24 items in 3 pages
830cable text 45.0032767
832gjfgj0.0056
833ygrty550.0056
836test 50.0010
839test260.002
840JKHKH80.008
841GJGKJ70.005
842test 22.001
8431 1.001
844were  32767

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ 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>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <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) {
                args.suppressCompleteMessage(true);
                IsChecked = true;
            }

            function SpellCheckClosed(sender, args) {
                if (IsChecked) {
                    //trigger the postback from the update/insert button in the grid
                    //the name of the update or insert button is extracted from a hidden field
                    var buttonName = document.getElementById('<%=HiddenField1.ClientID %>').value;
                    __doPostBack(buttonName, "");
                    IsChecked = false;
                }
            }
        </script>
    </telerik:RadCodeBlock>
    <div class="demo-container size-wide" runat="server" id="theContainer">
        <asp:HiddenField ID="HiddenField1" runat="server"></asp:HiddenField>
        <telerik:RadSpell RenderMode="Lightweight" ID="RadSpell1" runat="server" ButtonType="None" OnClientDialogClosed="SpellCheckClosed"
            OnClientCheckFinished="SpellCheckFinished"></telerik:RadSpell>
        <asp:Label ID="lblMessage" runat="server" EnableViewState="false"></asp:Label>
        <telerik:RadGrid RenderMode="Lightweight" 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>
                    </telerik:GridEditCommandColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="theContainer"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

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

Support & Learning Resources

Find Assistance