Cell Selection enabled only when Shift+Click

[Gabriel]

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

[Gabriel]

Just a sidenote i forgot to mention, is not a GridView, its a table inside the Editor itself.

[Rumen]

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

[Gabriel]

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

[Rumen]

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

[Gabriel]

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 !

 

 

 

 

[Rumen]

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

[Gabriel]

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 ?

 

 

[Gabriel]

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());

 

[Rumen]

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