Cell Selection enabled only when Shift+Click

10 posts, 0 answers
  1. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 22 Feb 2018 Link to this post

    When selecting a full table, by a standard, we get text selection, but we get the table selected (we can copy/paste the table)

    Ive seen on docs you can change cell selection type to MultiCell, then you can shift+click and select cells, and its pretty much the same as the above however the visual selection is slightly different. In this case, however you cannot select texts manually like before.

    I know you can change this selection type during runtime, but only in the backend is that right ?

    What would be a good aproach to solve this problem ? Only do cell selection when shift is pressed, else do a normal selection.

    Would apreciate any help !!

    Best regards to Telerikers :)

  2. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 22 Feb 2018 Link to this post

    Just a sidenote i forgot to mention, is not a GridView, its a table inside the Editor itself.
  3. Rumen
    Admin
    Rumen avatar
    14214 posts

    Posted 22 Feb 2018 Link to this post

    Hi Gabriel,

    The cell selection in a table is provided and controlled by the rich text editing engine of the browser and it is currently supported only inside Firefox. 

    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 22 Feb 2018 Link to this post

    Hi Rumen, thanks alot for your time !

     

    Oh i see. My aproach will be writting a JS component to handle the selection then. Can i change the selection on Telerik`s side ? Like inputing programatically a selection ? (so telerik can handle for instance, bold, copy, paste etc)

     

    Best Regards !!!

  5. Rumen
    Admin
    Rumen avatar
    14214 posts

    Posted 22 Feb 2018 Link to this post

    Hi,

    The content area is an editable iframe and you can use the Browser Selection API to control the selection in it or use the RadEditor selection API discussed in these support resources:
    https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/client-side-programming/radeditor-object
    https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/client-side-programming/selection-object

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 27 Feb 2018 in reply to Rumen Link to this post

    Hi Rumen, thanks for your time !

     

    I did a workaround this having a separate selection for it. The Browser selection has only linear selection, meaning it cannot select 2 different things from different places without selecting everything between them (the select range).

     

    Now my other task would be to include this selection on the selection context so Telerik can apply its editing on the selection, for instance, Bold. When handling telerik commands, i havent found documentation regarding another way of adding selected elements to telerik without using the default browser Range (because its linear). 

     

    Would i need a telerik override to achieve this ? Overriding all those formatting commands so they handle the default browser selection AND my selection ? (which is pretty much a array of dom elements)

     

    Best Regards !! Have a nice week !

     

     

     

     

  7. Rumen
    Admin
    Rumen avatar
    14214 posts

    Posted 27 Feb 2018 Link to this post

    Hi Gabriel,

    Indeed, you will need to implement your own command or overwrite the existing mechanism that applies commands to the content.

    If you choose to do an overwrite, you can find the code of the executeBrowserCommand method in the \Telerik.Web.UI\Editor\RadEditor\RadEditor.js file of the source code.All commands are defined in the \Telerik.Web.UI\Editor\RadEditor\EditorCommandList.js file.

    Have a productive week.

    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 27 Feb 2018 in reply to Rumen Link to this post

    Cool stuff Rumen !!

    Im tryng 2 different approaches. Before i write my own command, ill try writting a Custom Filter.

    So, on editor onLoad event i have this:

     

    ```

    /// on teleriks OnClientLoad function

     var MyFilter = function () {
          MyFilter.initializeBase(this);
          this.set_isDom(false);
          this.set_enabled(true);
          this.set_name("RadEditor filter");
          this.set_description("RadEditor filter description");
       };
       MyFilter.prototype =
          {
             getHtmlContent: function (content) {
                console.log("HTML");
                console.log(content);
                var newContent = content;
                //Make changes to the content and return it      
                newContent = newContent.toUpperCase();
                return newContent;
             },
             getDesignContent: function (content) {
                console.log("DESIGN");
                console.log(content);
                var newContent = content;
                //Make changes to the content and return it      
                newContent = newContent.toUpperCase();
                return newContent;
             }
          };
       MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
       editor.get_filtersManager().add(new MyFilter());

    ```

     

    But i get `Sys.ArgumentException: Value is not the name of an existing type.
    Parameter name: typeName`

     

    I just copyed the example from telerik docs.

     

    Would this be doing something wrong ?

     

     

  9. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 27 Feb 2018 in reply to Gabriel Link to this post

    Oh im sorry for the wrong formatting. Since i cant edit the post:

    var MyFilter = function () {
         MyFilter.initializeBase(this);
         this.set_isDom(false);
         this.set_enabled(true);
         this.set_name("RadEditor filter");
         this.set_description("RadEditor filter description");
      };
      MyFilter.prototype =
         {
            getHtmlContent: function (content) {
               console.log("HTML");
               console.log(content);
               var newContent = content;
               //Make changes to the content and return it     
               newContent = newContent.toUpperCase();
               return newContent;
            },
            getDesignContent: function (content) {
               console.log("DESIGN");
               console.log(content);
               var newContent = content;
               //Make changes to the content and return it     
               newContent = newContent.toUpperCase();
               return newContent;
            }
         };
      MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
      editor.get_filtersManager().add(new MyFilter());

     

  10. Rumen
    Admin
    Rumen avatar
    14214 posts

    Posted 01 Mar 2018 Link to this post

    Hi there,

    You can to put this line 

    editor.get_filtersManager().add(new MyFilter());

    into the OnClientLoad function declaration:

    <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>
    <script type="text/javascript">
        function OnClientLoad(editor, args)
        {   
            editor.get_filtersManager().add(new MyFilter());
        }
     
        var MyFilter = function () {
            MyFilter.initializeBase(this);
            this.set_isDom(false);
            this.set_enabled(true);
            this.set_name("RadEditor filter");
            this.set_description("RadEditor filter description");
        };
        MyFilter.prototype =
           {
               getHtmlContent: function (content) {
                   console.log("HTML");
                   console.log(content);
                   var newContent = content;
                   //Make changes to the content and return it    
                   newContent = newContent.toUpperCase();
                   return newContent;
               },
               getDesignContent: function (content) {
                   console.log("DESIGN");
                   console.log(content);
                   var newContent = content;
                   //Make changes to the content and return it    
                   newContent = newContent.toUpperCase();
                   return newContent;
               }
           };
        MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
         
    </script>

    For your convenience I recorded and attached a video demonstration.

    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top