Showfilterrow causing selection issue in firefox

[jean-fredericParticipant]

Hello,

Im having issue with the mouse in firefox. If I move the mouse while left-clicking inside the Grid, it will “select” the text of the grid.
This only happen in firefox.

I discovered that this happen ONLY if showfilterrow is true.

Here is a screenshot of the issue :
http://galleries.groupecanam.com/all/help/jeanfrederic/jqxgrid.jpg

You can see the issue in action there :
http://jsfiddle.net/JeanFrederic/KqQ4W/

Is there any work around available ?

Thanks

Jean-Frederic

[Peter StoevKeymaster]

Hi Jean-Frederic,

Browser’s Text selection is not handled by jQWidgets. It is just a coincidence that this text selection works in a different way when there are HTML Inputs in the Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jean-fredericParticipant]

Hello and thanks for your reply.

I did found a solution, if this can help someone.

(function($){
$.fn.disableSelectionCustom = function() {
return this
.attr(‘unselectable’, ‘on’)
.css(‘user-select’, ‘none’)
.on(‘selectstart’, false);
};
})(jQuery);

$(“#jqxgrid”).disableSelectionCustom();

*i did add “custom” because there is a function .disableSelection inside jqueryUI*

You can see this in action :
http://jsfiddle.net/JeanFrederic/KqQ4W/

Have a nice day !

[stephanParticipant]

Hi,

Well it would be nice if the jqxGrid could offer a more differentiated approach towards text selection, as this would reduce the need for application side corrective action, like the one mentioned by “jean-frederic” (which incidentally I am also using in an extended version, see below).

The conceptual idea is: the grid should indeed enable browser selection for the filtering row, as this makes sense. Yet it confuses most users (definitely the ones I have to deal with) to have text selection on for the grid rows area. Thus for the area with the grid rows text selecion should be off.

One way to achieve this is to use a function like the one jean-frederic mentioned. Here is the slightly larger version I am using (because it supports more browsers):

jQuery.fn.extend({
  disableTextSelect : function() {
    return this.each(function() {
      this.onselectstart = function() { return false; };
      this.unselectable = "on";
      jQuery(this).css('user-select', 'none');
      jQuery(this).css('-o-user-select', 'none');
      jQuery(this).css('-moz-user-select', 'none');
      jQuery(this).css('-khtml-user-select', 'none');
      jQuery(this).css('-webkit-user-select', 'none');
    });
  }
});

When doing it application side you can apply it on the jqxGrid element after having called the constructor:
myGrid.disableTextSelect();
My preferred solution would be to seee this integrated into jqxGrid

Here is a fiddle demonstrating the concept:
http://jsfiddle.net/q9K9w/1/

Regards,
Stephan

[sam2000Participant]

Hi,

Thanks so much for your answers. It works. This was the problem I was searching a solution for.

Regards,
Sam

[Author]

Posts