Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 10 of 10 total
Thread Advanced Tabulator Grid now available
Wed, Jan 26 2022 7:46 PMPermanent Link

erickengelke


New advanced Grid component, based on Tabulator 5.0, integrated with Datasets.

Supports colour, money formats (display and sorting), and many other features.

Sample viewable at:
https://erickengelke.com/nice/samples.html. under Adv Tabulator Grid button.

Contact me for more information and source code as part of my Nice toolkit.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Thu, Jan 27 2022 10:02 AMPermanent Link

erickengelke

erickengelke wrote:

>New advanced Grid component, based on Tabulator 5.0, integrated with Datasets.

I've added a feature to copy the structure/sizes/etc from an existing TGrid component, simplifying upgrading programs to just a few lines to copy and replace the TGrid.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Thu, Jan 27 2022 8:23 PMPermanent Link

erickengelke

erickengelke wrote:

erickengelke wrote:

>>New advanced Grid component, based on Tabulator 5.0, integrated with Datasets.

>I've added a feature to copy the structure/sizes/etc from an existing TGrid component, simplifying
> upgrading programs to just a few lines to copy and replace the TGrid.

I used it in production today for a row selectable TGrid replacement, I was concerned because the grid has 6200 rows of 10 columns, and I didn't know how it would perform.  It was very fast.    The most notable delay is loading the Javascript/CSS from the CDN which gives an incorrect display flashing on the screen for an instant, I'll make an option for a local copy to help with that.

It took only a few lines of code to replace the TGrid since I based the Tabulator grid on the TGrid instance.

The Tabulator systems defaults to selecting zero, one or more rows in row select mode.  I spent about an hour on the project to force it to always have exactly one selected, because EWB Datasets have a more limited view of what being selected means and don't support an unselected capability.

Suggestions welcomed.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
EWB Programming Books and Component Library
http://www.erickengelke.com
Thu, Jan 27 2022 8:55 PMPermanent Link

Trinione

Erick,
Just checked the sample. Really good stuff!

Some observations:
1 - Touchpad mouse unable to scroll.

2 - Dragging the mouse over the grid selects text in the grid.

I have used the CSS user-select to fix this. Here is example code:
-----------------------------
.noselect {
 -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Old versions of Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
           user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome, Edge, Opera and Firefox */
}
<p>
 Selectable text.
</p>
<p class="noselect">
 Unselectable text.
</p>

-----------------------------
Thu, Jan 27 2022 9:12 PMPermanent Link

Trinione

Erick,
Another suggestion is to include the Search functionality in the TNiceDataset in the Sample as well.
Thu, Jan 27 2022 9:24 PMPermanent Link

erickengelke

Trinione wrote:

Erick,
Just checked the sample. Really good stuff!

Some observations:
>1 - Touchpad mouse unable to scroll.

I  don't know how to fix that.   

> 2 - Dragging the mouse over the grid selects text in the grid.

> I have used the CSS user-select to fix this. Here is example code:

Sorry, I don't know where to put this.  CSS is certainly not my strength.


-----------------------------
.noselect {
 -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Old versions of Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
           user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome, Edge, Opera and Firefox */
}
<p>
 Selectable text.
</p>
<p class="noselect">
 Unselectable text.
</p>

-----------------------------
EWB Programming Books and Component Library
http://www.erickengelke.com
Thu, Jan 27 2022 9:42 PMPermanent Link

Trinione

I believe I did the CSS 'user-select' in a program somewhere about. After you release it in NiceComponents I'll play with it.

I shall see if I can figure out the scrolling issue.




erickengelke wrote:

Trinione wrote:

Erick,
Just checked the sample. Really good stuff!

Some observations:
>1 - Touchpad mouse unable to scroll.

I  don't know how to fix that.   

> 2 - Dragging the mouse over the grid selects text in the grid.

> I have used the CSS user-select to fix this. Here is example code:

Sorry, I don't know where to put this.  CSS is certainly not my strength.


-----------------------------
.noselect {
 -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Old versions of Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
           user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome, Edge, Opera and Firefox */
}
<p>
 Selectable text.
</p>
<p class="noselect">
 Unselectable text.
</p>

-----------------------------
EWB Programming Books and Component Library
http://www.erickengelke.com
Thu, Jan 27 2022 11:30 PMPermanent Link

erickengelke

Trinione wrote:

> I believe I did the CSS 'user-select' in a program somewhere about. After you release it in NiceComponents I'll play with it.

Thanks in advance.

For all Nice component users, the files are all in the same location as in the past.  Contact me if you've lost track of that location and you have paid in the past.

Tonight I've added grouped columns (eg subheadings) and frozen columns (left and right) that stay when you scroll horizontally.

It's still a work in progress, but encouragement from others suggest I'm on the right track.  Thanks for bringing this component to my attention.  I didn't know I needed it before, but I did.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Sat, Jan 29 2022 10:44 AMPermanent Link

Trinione

Erick,
The Adv.Tabulator Grid example isn't working. The grids do not appear and the EWB Grid is empty.
Sat, Jan 29 2022 11:07 AMPermanent Link

erickengelke

Trinione wrote:

Erick,
>The Adv.Tabulator Grid example isn't working. The grids do not appear and the EWB Grid is empty.

Ah, I forgot to copy the JS files.  My browser cache was supplying them, so it worked for me when I went there.

It appears to work now.  Let me know if it fails again.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Image