More in this section

Forums / Developing with Sitefinity / Sitefinity 3.7 Insert Date in Arabic

Sitefinity 3.7 Insert Date in Arabic

12 posts, 1 answered
  1. karnan sekar
    karnan sekar avatar
    80 posts
    Registered:
    07 Jul 2009
    27 Jan 2010
    Link to this post
    Hi,

    We are developing a website in sitefinity 3.7 for English and Arabic Languages.
    When we are trying to Insert the date and also time in Generic Content ( Rad editor) it is inserting in English text and not in Arabic
    Please suggest how to "Insert the date in Arabic "?

    Regards,
    Karnan

     

  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    27 Jan 2010
    Link to this post
    Hi karnan sekar,

    Thank you for using our services.

    Unfortunately this is how the InsertDate and InserTime tools of the RadEdtior work. However you can create custom insert date and insert time which will insert the appropriate strings based on the current culture. You will have to edit the control templates which use the RadEditor and map them. Then before you implement the tools you will need to set the current culture appropriately for each language. This can be done with the following server code:
    <script type="text/C#" runat="server">
        protected void Page_Load()
        {
            System.Globalization.CultureInfo currentUICulture = System.Threading.Thread.CurrentThread.CurrentUICulture;
            if (currentUICulture.ToString() == "ar")
            {
                System.Globalization.CultureInfo arabic = new System.Globalization.CultureInfo("ar-SA");
                System.Threading.Thread.CurrentThread.CurrentCulture = arabic;
            }
            else if (currentUICulture.ToString() == "en")
            {
                System.Globalization.CultureInfo arabic = new System.Globalization.CultureInfo("en-US");
                System.Threading.Thread.CurrentThread.CurrentCulture = arabic;
            }
        }
    </script>

    This way when you are creating/editing content items you will set the current thread's culture based on the selected language from the dropdown. Then you can follow this tutorial explaining how to insert custom date (it contains necessary code): Editor / Custom Tools

    In the javascript which you will add for inserting the date you can first check the name of the current culture and based on that insert necessary string:
    // Create the CurrentCulture object
    var cultureObject = Sys.CultureInfo.CurrentCulture;
    if (cultureObject.name == "en-US") {
        //add string for English
    } else if (cultureObject.name == "ar-SA") {
        //add string for Arabic
    }

    More information on the culture info client object here: Sys.CultureInfo class.

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. karnan sekar
    karnan sekar avatar
    80 posts
    Registered:
    07 Jul 2009
    27 Jan 2010
    Link to this post
    Hi Radoslav Georgiev,

    Thank you for reply. I tried to implement globalization in EditorTemplate.ascx. It is not working.

    I try to add custom date as mentioned in the below link .

    http://demos.telerik.com/aspnet-ajax/editor/examples/customtools/defaultcs.aspx

    But  It shows a popup saying "The command InsertcustomDate is not implemented yet "



    code  is below please tell us what is wrong in it:

    in .xml
    <tools name="MainToolbar" dockable="false">
        <tool name="InsertCustomDate"/>

      </tools>


    and .ascx files


    <div class="ctrlPropsGeneric">



    <telerik:RadEditor
        runat="server"
        ID="RadEditor1"
        ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
        ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"
        EnableEmbeddedSkins="False" Skin="Sitefinity"
        NewLineBr="False"
        Height="360px"
        Width="98%">
        <ImageManager MaxUploadFileSize="1073741824" ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
        <MediaManager MaxUploadFileSize="1073741824" ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
        <FlashManager MaxUploadFileSize="1073741824"  ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
        <DocumentManager MaxUploadFileSize="1073741824" ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
        <CssFiles>
            <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
        </CssFiles>
        <Content>
            <div class="halfL">
                    <h2>Location Map:</h2>
                    <img title="Location Map" style="display: block; margin-top: 4px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; " alt="Map" src=":2349/Images/location.gif" />
                    <br />
                    <br />
            </div>
            <div class="halfR">
                    <h2>General:</h2>
                    <address>Telerik International University<br />143 Brooks Street, Suite 2<br />Brighton Street, 90-643<br />Telerik<br />Phone: 2-253-253-3654<br />Fax: 2-253-253-8712<br />Email: <a href="mailto:info@telerik.edu">info@telerik.edu</a> </address>
                    <h2>Admissions:</h2>
                    <address>Director of Admissions<br />Phone: 2-253-253-7934<br />Fax: 2-253-253-0578<br />Email: <a href="mailto:admissions@telerik.edu">admissions@telerik.edu</a> </address>
                    <h2>Executive:</h2>
                    <address>Executive Director<br />Phone: 2-253-253-9153<br />Fax: 2-253-253-6024<br />Email: <a href="mailto:executive@telerik.edu">executive@telerik.edu</a> </address>
            </div>
            <div class="clear">
                    <!-- -->
            </div>
        </Content>
    </telerik:RadEditor>



    <script type="text/C#" runat="server">
        
        
        protected void Page_Load()
        {
            System.Globalization.CultureInfo currentUICulture = System.Threading.Thread.CurrentThread.CurrentUICulture;
            if (currentUICulture.ToString() == "ar")
            {
                System.Globalization.CultureInfo arabic = new System.Globalization.CultureInfo("ar-QA");
                System.Threading.Thread.CurrentThread.CurrentCulture = arabic;
            }
            else if (currentUICulture.ToString() == "en")
            {
                System.Globalization.CultureInfo arabic = new System.Globalization.CultureInfo("en-US");
                System.Threading.Thread.CurrentThread.CurrentCulture = arabic;
            }
        }
    </script>




    <script type="text/javascript">

    Telerik.Web.UI.Editor.CommandList["InsertCustomDate"] = function(commandName, editor, args)
    {
       editor.pasteHtml('<span style="width:200px;border: 1px dashed #bb0000;background-color: #fafafa;color: blue;"> ' + new Date() + ' </span>');
    };


    Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args)
    {
       var editorArgs = editor.getSelectedElement();
       if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();
       
       var myCallbackFunction = function(sender, args)
       {
            if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")
                editor.get_Document().replaceChild(editorArgs, args);
            else
            {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
       }
       editor.showExternalDialog(
       '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>',
       editorArgs,
       750,
       515,
       myCallbackFunction,
       null,
       'ImageLibraryDialog',
       true,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       false)
    };

    Telerik.Web.UI.Editor.CommandList["LibraryDocumentManager"] = function(commandName, editor, args)
    {
       var editorArgs = editor.getSelectedElement();
       if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();
       
       var myCallbackFunction = function(sender, args)
       {
            if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                editor.get_Document().replaceChild(editorArgs, args);
            else
            {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
       }
       editor.showExternalDialog(
       '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>',
       editorArgs,
       750,
       515,
       myCallbackFunction,
       null,
       'ImageLibraryDialog',
       false,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       false)
    };

    Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args)
    {
       var editorArgs = editor.getSelectedElement();
       if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();
       
       var myCallbackFunction = function(sender, args)
       {
            if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                editor.get_Document().replaceChild(editorArgs, args);
            else
            {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
       }
       editor.showExternalDialog(
       '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',
       editorArgs,
       750,
       515,
       myCallbackFunction,
       null,
       'ImageLibraryDialog',
       false,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       false)
    };

    Telerik.Web.UI.Editor.CommandList["SetLinkProperties"] = function(commandName, editor, args)
    {
       var editorArgs = editor.getSelectedElement();
       if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();
       
       var myCallbackFunction = function(sender, args)
       {
            if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                editor.get_Document().replaceChild(editorArgs, args);
            else
            {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
       }
       editor.showExternalDialog(
       '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',
       editorArgs,
       750,
       515,
       myCallbackFunction,
       null,
       'ImageLibraryDialog',
       false,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       false)
    };

    RadEditorCommandList["IncreaseSize"] = function(commandName, editor, oTool)
    {
        var currentWidth = editor.GetWidth(); //get the width of Telerik RadEditor
        var currentHeight = editor.GetHeight(); //get the heigh of Telerik RadEditor

        editor.SetSize(currentWidth, currentHeight + 30); //set the height size of the editor to increase with 30px
    };

    RadEditorCommandList["DecreaseSize"] = function(commandName, editor, oTool)
    {
        var currentWidth = editor.GetWidth();
        var currentHeight = editor.GetHeight();

        editor.SetSize(currentWidth, currentHeight - 30); //set the height size of the editor to decrease with 30px
    };
    var oldFunction = Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"]; //save the original Paste function

    Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"] = function(commandName, editor, args)
    {
        oldFunction(commandName, editor, args);
        var bd = document.getElementsByTagName("body")[0];
        
        if(/fullScreenMode/.test(bd.className)) {
            var rep = bd.className.match(' '+'fullScreenMode')?' '+'fullScreenMode':'fullScreenMode';
            bd.className=bd.className.replace(rep,'');

        } else {
            bd.className += bd.className?' '+'fullScreenMode':'fullScreenMode';
        }
    };
    </script>
    </div>
    <div class="footLinks">
        <p id="SharedContentInfo" runat="server"><strong><asp:Literal runat="server" Text="<%$Resources:SharedContentInfo %>"></asp:Literal></strong></p>
        <asp:LinkButton ID="ShareContent" CommandName="ShareContent" Text="<%$Resources:ShareThisContent %>" runat="server" CssClass="share"></asp:LinkButton>
        <asp:LinkButton ID="SelectContent" CommandName="SelectContent" Text="<%$Resources:SelectSharedContent %>" runat="server" CssClass="select"></asp:LinkButton>
    </div>

    Thanks,
    Karnan

  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    27 Jan 2010
    Link to this post
    Hi karnan sekar,

    Please, check if you have some typos in the script and text. All letter casing must be matched. The sample I have linked works without problem on my side.

    Greetings,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. karnan sekar
    karnan sekar avatar
    80 posts
    Registered:
    07 Jul 2009
    27 Jan 2010
    Link to this post
    Hi,

    I check the typos, it seems to be alright. Could please explain this line

    "If a custom tool is added without a CommandList command, then the clicked button will pop up a message that the command [commandname] is not implemented yet."

    and tell us where to add the command list command.

    Thanks,
    karnan

  6. karnan sekar
    karnan sekar avatar
    80 posts
    Registered:
    07 Jul 2009
    28 Jan 2010
    Link to this post
    Hi,

    Sorry since we worked in different control it went wrong.
    Now the custom date control is working.
    But If we try to change the culture in the page load , it is rendering as a code below but Insert date is still coming the same English format. Please suggest us.



    var __cultureInfo = '{"name":"ar-QA","numberFormat":{"CurrencyDecimalDigits":2,"CurrencyDecimalSeparator":".","IsReadOnly":false,"CurrencyGroupSizes":[3],"NumberGroupSizes":[3],"PercentGroupSizes":[3],"CurrencyGroupSeparator":",","CurrencySymbol":"ر.ق.‏","NaNSymbol":"ليس برقم","CurrencyNegativePattern":3,"NumberNegativePattern":3,"PercentPositivePattern":0,"PercentNegativePattern":0,"NegativeInfinitySymbol":"-لا نهاية","NegativeSign":"-","NumberDecimalDigits":2,"NumberDecimalSeparator":".","NumberGroupSeparator":",","CurrencyPositivePattern":2,"PositiveInfinitySymbol":"+لا نهاية","PositiveSign":"+","PercentDecimalDigits":2,"PercentDecimalSeparator":".","PercentGroupSeparator":",","PercentSymbol":"%","PerMilleSymbol":"‰","NativeDigits":["٠","١","٢","٣","٤","٥","٦","٧","٨","٩"],"DigitSubstitution":0},"dateTimeFormat":{"AMDesignator":"ص","Calendar":{"MinSupportedDateTime":"\/Date(-62135596800000)\/","MaxSupportedDateTime":"\/Date(253402280999999)\/","AlgorithmType":1,"CalendarType":1,"Eras":[1],"TwoDigitYearMax":2029,"IsReadOnly":false},"DateSeparator":"/","FirstDayOfWeek":6,"CalendarWeekRule":0,"FullDateTimePattern":"dd MMMM, yyyy hh:mm:ss tt","LongDatePattern":"dd MMMM, yyyy","LongTimePattern":"hh:mm:ss tt","MonthDayPattern":"dd MMMM","PMDesignator":"م","RFC1123Pattern":"ddd, dd MMM yyyy HH\u0027:\u0027mm\u0027:\u0027ss \u0027GMT\u0027","ShortDatePattern":"dd/MM/yyyy","ShortTimePattern":"hh:mm tt","SortableDateTimePattern":"yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss","TimeSeparator":":","UniversalSortableDateTimePattern":"yyyy\u0027-\u0027MM\u0027-\u0027dd HH\u0027:\u0027mm\u0027:\u0027ss\u0027Z\u0027","YearMonthPattern":"MMMM, yyyy","AbbreviatedDayNames":["الاحد","الاثنين","الثلاثاء","الاربعاء","الخميس","الجمعة","السبت"],"ShortestDayNames":["أ","ا","ث","أ","خ","ج","س"],"DayNames":["الاحد","الاثنين","الثلاثاء","الاربعاء","الخميس","الجمعة","السبت"],"AbbreviatedMonthNames":["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","اغسطس","سبتمبر","اكتوبر","نوفمبر","ديسمبر",""],"MonthNames":["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","اغسطس","سبتمبر","اكتوبر","نوفمبر","ديسمبر",""],"IsReadOnly":false,"NativeCalendarName":"التقويم الميلادي (تسمية إنجليزية)‏","AbbreviatedMonthGenitiveNames":["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","اغسطس","سبتمبر","اكتوبر","نوفمبر","ديسمبر",""],"MonthGenitiveNames":["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","اغسطس","سبتمبر","اكتوبر","نوفمبر","ديسمبر",""]}}';//]]>
    </script>

    Thanks,
    Karnan
  7. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    28 Jan 2010
    Link to this post
    Hi karnan sekar,

    The demo which I have linked does not change the text inserted. As I have noted in my first thread
    1) you have to set the culture
    2) check the culture on the client and depending on its value output correct string.

    I have also provided you with the if statement. All you have to do is to fill in the blanks there:
    In the javascript which you will add for inserting the date you can first check the name of the current culture and based on that insert necessary string:
    // Create the CurrentCulture object
    var cultureObject = Sys.CultureInfo.CurrentCulture;
    if (cultureObject.name == "en-US") {
        //add string for English
    else if (cultureObject.name == "ar-SA") {
        //add string for Arabic
    }

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. karnan sekar
    karnan sekar avatar
    80 posts
    Registered:
    07 Jul 2009
    28 Jan 2010
    Link to this post
    Hi,

    You mean to say client machine should be set in Arabic Language. Thus it will not change the language based on drop down list selected. Since our system is en-US ,so if we select the drop down it is not changing.
    So en-US machine can't add the Arabic date right.

    Thanks,
    Karnan




  9. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    28 Jan 2010
    Link to this post
    Hi karnan sekar,

    No I do not mean this, please read carefullly

    1) On page load the server code I sample checks the currently selected culure (if from drowpdown you have selected Arabic will set the current thread's culture to arabic.

    2) When you click the custom insert date button you have to perform this check first then insert the date depending on the if statement (this is client code javascriopt, does not have anything to do with client machine):

    // Create the CurrentCulture object
    var cultureObject = Sys.CultureInfo.CurrentCulture;
    if (cultureObject.name == "en-US") {
        //add string for English
    } else if (cultureObject.name == "ar-SA") {
        //add string for Arabic
    }

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. karnan sekar
    karnan sekar avatar
    80 posts
    Registered:
    07 Jul 2009
    28 Jan 2010
    Link to this post
    Hi,

    Sorry not custom date and javascript. I mean to say Insert Date which is inbuild in sitefinity

    <script type="text/C#" runat="server">
        protected void Page_Load()
        {
            System.Globalization.CultureInfo currentUICulture = System.Threading.Thread.CurrentThread.CurrentUICulture;
            if (currentUICulture.ToString() == "ar")
            {
                System.Globalization.CultureInfo arabic = new System.Globalization.CultureInfo("ar-SA");
                System.Threading.Thread.CurrentThread.CurrentCulture = arabic;
            }
            else if (currentUICulture.ToString() == "en")
            {
                System.Globalization.CultureInfo arabic = new System.Globalization.CultureInfo("en-US");
                System.Threading.Thread.CurrentThread.CurrentCulture = arabic;
            }
        }
    </script>

     
  11. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    28 Jan 2010
    Link to this post
    Hello karnan sekar,

    I think you have not been reading my responses carefully.

    1) I said this is not possible without custom date.
    2) I linked you to a demo
    3) You mus make custom date button as in the demo and check the Sys.CultreInfo.CurrentCulture value using javascript in the implementation of the custom date button:
    Telerik.Web.UI.Editor.CommandList["InsertCustomDate"] = function(commandName, editor, args)
    {
      // Create the CurrentCulture object
    var cultureObject = Sys.CultureInfo.CurrentCulture;
    if (cultureObject.name == "en-US") {
        //add string for English
    } else if (cultureObject.name == "ar-SA") {
        //add string for Arabic
    }
    };

    I hope all is clear now. You have to some javascript coding, as all code provided by us is sample. You just have to follow the instructions.

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Answered
  12. karnan sekar
    karnan sekar avatar
    80 posts
    Registered:
    07 Jul 2009
    28 Jan 2010
    Link to this post
    Hi
    Sorry for my mistake Radoslav Georgiev. I will try custom date and let you know.

    Thanks a lot :)

    Karnan


Register for webinar
12 posts, 1 answered