Localization in EJ 1 ASP.NET MVC SpellCheck

12 Sep 2017 / 11 minutes to read

SpellCheck dialog mode comes with default localization support which allows it to customize the display of text within the SpellCheck dialog in a user-specific culture and locale. The SpellCheck control can be localized in specific culture using the common API locale along with the collection of localized words defined for that culture using the ej.SpellCheck.Locale [culture-code].

By default, the SpellCheck control is localized in en-US culture. Please find the following table lists the default keywords and its localized text values for en-US culture.

Locale key words Text
SpellCheckButtonText SpellCheck
NotInDictionary Not in Dictionary
SuggestionLabel Suggestions
IgnoreOnceButtonText Ignore Once
IgnoreAllButtonText Ignore All
AddToDictionary Add to Dictionary
ChangeButtonText Change
ChangeAllButtonText Change All
CloseButtonText Close
CompletionPopupMessage Spell check is complete
CompletionPopupTitle Spell check alert
OK OK
NoSuggestionMessage No suggestions available

To localize SpellCheck into any particular culture, it is necessary to refer the culture-specific script files in your application after the reference of ej.web.all.min.js file, which are available under the following location.

<Installed location>\Syncfusion\Essential Studio\18.4.0.30\JavaScript\assets\scripts\i18n

The following code example shows how to localize the SpellCheck control in fr-FR culture.

  • cshtml
  • @section ControlsSection{
        <div id="TextArea" contenteditable="true" name="sentence">
            Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum, Dustin and Chris Hughes.
            The founders had initially limited the websites membership to Harvard students, but later expanded it to collages in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div><br />
     
        @Html.EJ().SpellCheck("TextArea").DictionarySettings(dictionary => dictionary.CustomDictionaryUrl("../api/SpellCheck/AddToDictionary").DictionaryUrl("../api/SpellCheck/CheckWords")).Locale("fr-FR")
     
        @Html.EJ().Button("SpellCheck").Width("200px").Height("25px").Text("Spell check using dialog").ClientSideEvents(event => event.Click("showDialog"))
     }
     
    @section ScriptSection{
        <script type="text/javascript">
            ej.SpellCheck.Locale["fr-FR"] = {
                SpellCheckButtonText: "Vrification orthographique",
                NotInDictionary: "Pas dans le dictionnaire",
                SuggestionLabel: "Suggestions",
                IgnoreOnceButtonText: "Ignorer une fois",
                IgnoreAllButtonText: "Ignorer tout",
                AddToDictionary: "Ajouter au dictionnaire",
                ChangeButtonText: "Changement",
                ChangeAllButtonText: "Tout modifier",
                CloseButtonText: "Fermer",
                CompletionPopupMessage: "Vrification orthographique est termine",
                ErrorPopupMessage: "Vrification orthographique est pas termine",
                CompletionPopupTitle: "Vrification orthographique alerte",
                OK: "D'accord",
                NoSuggestionMessage: "Aucune suggestion disponible",
            };
            function showDialog() {
                var spellObj = $("#TextArea").data("ejSpellCheck");
                spellObj.showInDialog();
            }
        </script>
    }

    localization_img1

    NOTE

    Refer the ej.culture.fr-FR.min.js file in your HTML application and also define the locale property for the SpellCheck control with the appropriate culture-code [fr-FR].

    For further information on how to refer the required culture scripts into your application, refer here.

    Localizing Specific Words

    To customize or localize only some specific words in the default ej.SpellCheck.Locale[“en-US”] collection, the words to be localized/customized can be defined in a separate variable and then extended to the original collection as depicted in the following code example.

  • cshtml
  • @section ControlsSection{
        <div id="TextArea" contenteditable="true" name="sentence">
            Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum, Dustin and Chris Hughes.
            The founders had initially limited the websites membership to Harvard students, but later expanded it to collages in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div><br />
     
        @Html.EJ().SpellCheck("TextArea").DictionarySettings(dictionary => dictionary.CustomDictionaryUrl("../api/SpellCheck/AddToDictionary").DictionaryUrl("../api/SpellCheck/CheckWords")).Locale("fr-FR")
     
        @Html.EJ().Button("SpellCheck").Width("200px").Height("25px").Text("Spell check using dialog").ClientSideEvents(event => event.Click("showDialog"))
     }
     
    @section ScriptSection{
    
        <script type="text/javascript">
    	
          var customizationMessage = { CompletionPopupMessage: "Completed", };
    	  
          $.extend(ej.SpellCheck.Locale["en-US"], customizationMessage);
    	  
            function showDialog() {
    		
                var spellObj = $("#TextArea").data("ejSpellCheck");
    			
                spellObj.showInDialog();
            }
        </script>
    }