Radeditor OnClientSelectionChange getSeletion not working on all the browser(Works in IE only)

2 posts, 0 answers
  1. Gyan
    Gyan avatar
    13 posts
    Member since:
    Nov 2012

    Posted 10 Jul 2013 Link to this post

    HI,
     I am using Rad Editor in my project that I have created with VS2010.   As per my project requirement, I have a html table in radeditor and i want  no one can change the content of this table in design mode as well as in preview mode. 
    I have tried to unselect to table on OnClientSelectionChange event of rad editor. But it work only in IE not in other browsers. please help me.
    i have use this code.
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="demo.aspx.vb" Inherits="ComplianceTable.demo" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <telerik:RadScriptBlock ID="scriptBlock" runat="server">
            <script type="text/javascript">
                function OnClientSelectionChange(editor, args) {
                    editor.getSelection()._window.document.selection.empty();
                } 
            </script>
        </telerik:RadScriptBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
            <telerik:RadEditor runat="server" ID="RadEditor11" OnClientSelectionChange="OnClientSelectionChange"
                AllowScripts="true">
                <Content>
                  
       <table style="width: 700px; margin-top: 20px; margin-left: 15px; border-top-color: rgb(37, 160, 218);
                border-right-color: rgb(37, 160, 218); border-top-width: 1px; border-right-width: 1px;
                border-top-style: solid; border-right-style: solid; float: left;" id="Table1"
                cellspacing="0" cellpadding="0">
                <tbody>
                    <tr style="background-color: rgb(205, 242, 242);" >
                        <th>
                            <div contenteditable="true">
                                <b>Header0</b></div>
                        </th>
                        <th>
                            <div contenteditable="true">
                                <b>header1</b></div>
                        </th>
                        <th>
                            <div contenteditable="true">
                                <b>Header2</b></div>
                        </th>
                    </tr>
                    <tr>
                        <td >
                            <div contenteditable="true">
    cell0
                            </div>
                        </td>
                        <td  >
                            <a contenteditable="true"  onclick="return true;" href="">http:// </a>
                        </td>
                        <td  >
                            <div contenteditable="true">
                              cell1</div>
                        </td>
                    </tr>
                    <tr >
                        <td >
                            <div contenteditable="true">
                             cell0
                           </div>
                        </td>
                        <td >
                            <a contenteditable="true" href="">http:// </a>
                        </td>
                        <td >
                            <div contenteditable="true">
                               cell1
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
                </Content>
            </telerik:RadEditor>
        </div>
        </form>
    </body>
    </html>


  2. Ianko
    Admin
    Ianko avatar
    1864 posts

    Posted 15 Jul 2013 Link to this post

    Hi Gyan,

    For this custom client-side script to work you should implement it with cross-browser functionality. The selection object is different in IE, Firefox and Chrome.

    You could follow this example script:
    function OnClientSelectionChange(editor, args) {
                     var editorWindow = editor.getSelection()._window;
                     clearSelection(editorWindow);
                 }
     
    function clearSelection(object) {
                     if (object.getSelection) {
                         object.getSelection().removeAllRanges();
                     } else if (object.document.selection) {
                         object.document.selection.empty();
                     }
                 }
    the clearSelection() method is the cross browser functionality.



    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top