Jump to content
bernhard

RockGrid - powerful, performant and beautiful data listing tool

Recommended Posts

19 minutes ago, jmartsch said:

short note: the name of the module in this file is still RockGrid instead of FieldtypeRockGrid.

thx, I updated the readme and it will be committed in the next version. It now looks like this:

You need to include `moment.js` to your assets. In your field's php file do this:
```php
// eg site/assets/RockGrid/fields/yourfield.php
$this->rg->assets->add($this->config->paths->siteModules . 'FieldtypeRockGrid/lib/moment.min.js');
```

Assets is a property of FieldtypeRockGrid, you are inside the inputfield so there is no assets property.

Does that help?

Share this post


Link to post
Share on other sites

This does not really help, as I have no field for the RockGrid because it is created on the fly in my Dashboard module.

When I created that file "site/assets/RockGrid/fields/yourfield.php", the code to add the moment.js lib works, but now my grid was empty.

My stats.php (thats the name of my InputfieldRockGrid) file looked like this:

$this->rg->assets->add($this->config->paths->siteModules . 'FieldtypeRockGrid/lib/moment.min.js');

I think I then have to also copy the code to setup the RockGrid to this file, right?

However, I found a much simpler way to add the script, via ProcessWire's own method.

So now in my module I have this code, which works:

public function __executeRockGrid()
  {
    $f = $this->modules->get('InputfieldRockGrid');
    $f->name = 'stats';
    $f->themeBorder = 'none';
    $f->height = 0;
    $f->pageSize = 50; // set initial pagination to 25 rows

    $finder = new \ProcessWire\RockFinder('template=stelle', ['title', 'created']);
    $field = $finder->addField('mitarbeiterId', ['vorname', 'nachname']);

    $this->config->scripts->add($this->config->urls->siteModules . "FieldtypeRockGrid/lib/moment.min.js");

    $f->setData($finder);

    return $f->render();
  }

Any complaints doing it this way?

Share this post


Link to post
Share on other sites
6 minutes ago, jmartsch said:

Any complaints doing it this way?

No, absolutely not 🙂 You just have to make sure that it is loaded properly.

I'd recommend you name your field and place everything in a separate related php file to keep everything clean and organized. You'll end up with much nicer processmodules like this one:

JFfUSH4.png

The yourfield.php file can look like this:

<?php namespace ProcessWire;
$this->rg->assets->add($this->config->paths->siteModules . 'FieldtypeRockGrid/lib/moment.min.js');
$this->rg->assets->add($this->config->paths->siteModules . 'FieldtypeRockGrid/lib/currency.min.js');

// your finder here
$finder = ...

// set data
$this->setData($finder);

// send variables to JS
// for example you can send an array of key/value pairs of a select options field
// in the grid you can then replace the options ID that is returned by the finder with the corresponding label
// like that (pseudocode): cellRenderer = function(params) { return grid.js.youroptions[key] }
$this->js([
  'youroptions' => $youroptions,
]);

 

  • Like 1

Share this post


Link to post
Share on other sites

Lots of updates for the weekend 🙂

 

Regarding the filter:

To apply this filter to one of your columns you just need to do this (full example here: https://gitlab.com/baumrock/FieldtypeRockGrid#create-custom-filters):

col = grid.getColDef('title');
col.filter = RockGrid.filters.example;
col.floatingFilterComponent = RockGrid.filters.exampleFloating;

Here is the example filter implementing a "smart search": https://gitlab.com/baumrock/FieldtypeRockGrid/blob/master/plugins/filters/example.js

It looks like this:

XRnkws7.png

Code with removed comments to see that it only 100 lines of code for your very own filter without limits (custom GUI, custom filter logic etc):

Spoiler

/**
 * simple filter
 */
document.addEventListener('RockGridReady', function(e) {

  /**
   * create filter class
   * all methods are mandatory unless they are marked optional
   */
  function filter() {}
  
  filter.prototype.init = function (params) {
    console.log(this);
    this.valueGetter = params.valueGetter;
    this.filterText = null;
    this.params = params;
    this.setupGui();
  };

  filter.prototype.getGui = function () {
    return this.gui;
  };

  filter.prototype.setupGui = function () {
    this.gui = document.createElement('div');
    this.gui.innerHTML =
      '<div style="padding: 4px;">' +
      '<div style="font-weight: bold;">Smart search:</div>' +
      '<div><input style="margin: 4px 0px 4px 0px;" type="text" placeholder="Enter..."/></div>' +
      '<div><em>"jo do" will find "John Doe"</div>' +
      '</div>';
    this.eFilterInput = this.gui.querySelector('input');
    
    var that = this;
    onFilterChanged = RockGrid.debounce(function() {
      that.filterText = that.eFilterInput.value;
      that.params.filterChangedCallback();
    });
    this.eFilterInput.addEventListener("input", onFilterChanged);
  };

  filter.prototype.doesFilterPass = function (params) {var passed = true;
    var valueGetter = this.valueGetter;
    var value = valueGetter(params);
    if(!value) return false;

    this.filterText.toLowerCase().split(" ").forEach(function(filterWord) {
      if (value.toString().toLowerCase().indexOf(filterWord)<0) {
        passed = false;
      }
    });
  
    return passed;
  };

  filter.prototype.isFilterActive = function () {
    return  this.filterText !== null &&
      this.filterText !== undefined &&
      this.filterText !== '';
  };

  filter.prototype.getModel = function () {
    return this.isFilterActive() ? this.eFilterInput.value : null;
  };

  filter.prototype.setModel = function (model) {
    this.eFilterInput.value = model;
    this.filterText = this.eFilterInput.value;
  };

  RockGrid.filters.simple = filter;
});

/**
 * simple floating filter
 */
document.addEventListener('RockGridReady', function(e) {
  function floatingFilter() {}

  floatingFilter.prototype.init = function (params) {
    this.onFloatingFilterChanged = params.onFloatingFilterChanged;
    this.setupGui();
  };
  
  floatingFilter.prototype.getGui = function () {
    return this.gui;
  };

  floatingFilter.prototype.setupGui = function() {
    this.currentValue = null;
    this.gui = document.createElement('div');
    this.gui.innerHTML = '<input placeholder="simple.js" type="text"/>'
    this.eFilterInput = this.gui.querySelector('input');

    var that = this;
    onInputBoxChanged = RockGrid.debounce(function() {
      if (that.eFilterInput.value === '') {
        that.onFloatingFilterChanged(null);
        return;
      }
      
      that.currentValue = that.eFilterInput.value;
      that.onFloatingFilterChanged(that.currentValue);
    });
    this.eFilterInput.addEventListener('input', onInputBoxChanged);
  }

  floatingFilter.prototype.onParentModelChanged = function (parentModel) {
    var value = !parentModel ? '' : parentModel + '';
    this.eFilterInput.value = value;
    this.currentValue = parentModel;
  };

  RockGrid.filters.simpleFloating = floatingFilter;
});

 

  • Like 3

Share this post


Link to post
Share on other sites

Hi @bernhard. I would like to change the styling/rendering of one or more header columns. For example I want to change the background color.

How would I do that? I found this instruction from the aggrid site https://www.ag-grid.com/javascript-grid-header-rendering/ but how would I integrate this into RockGrid?

Or is there an easy way to add a class to a specific header column?

How do I disable a plugin/button? For example the Excel export button?

Somewhere in your code I found

document.addEventListener('RockGridButtons.beforeRender', function (e) {
    // Buttons entfernen
    if (e.target.id != 'RockGridItem_stats') return
    var grid = RockGrid.getGrid(e.target.id)
    var plugin = grid.plugins.buttons

    // remove a btton
    plugin.buttons.remove('refresh')
})

which does not work. The  the listener event is never fired.

Also I  found

document.addEventListener('RockGridItemBeforeInit', function (e) {
    if (e.target.id != 'RockGridItem_stats') return
    var grid = RockGrid.getGrid(e.target.id)

    grid.disablePlugin('excel');
})

which also doesn't work.

 

Share this post


Link to post
Share on other sites

Hi Bernhard,

I am testing RockGrid for the first time now. It looks really great.

I know I could read tfm for hours now, but I dare to ask a few questions:

1. How can I get a link on the row near the id for linking to the page editor? The same way it is done in "RockFinder Tester"? SOLVED

2. How can I deal with the "Select Options" field type, if I don't want to show the id's but the values?

3. How can I change the color of a row, depending on a certain row value?

Thank you.

(Lazy Theo)

Share this post


Link to post
Share on other sites
17 hours ago, theo said:

3. How can I change the color of a row, depending on a certain row value?

 

As https://www.ag-grid.com/javascript-grid-row-styles/#row-class says, you need to modify the gridOptions.rowClassRules for this.

Now I found out how to do this. In your javascript file do this:

document.addEventListener('RockGridItemAfterInit', function (e) {
    if (e.target.id != 'RockGridItem_stats') return
    var grid = RockGrid.getGrid(e.target.id)
    
    // set style of all rows to color #cecece remember styles are bad, better use classes
    grid.gridOptions.rowStyle = {background: '#cecece'};
    // this is untested. First is the class to be assigned and second is the condition
	grid.gridOptions.rowClassRules: {
    'rag-green': 'data.age < 20',
      'rag-amber': 'data.age >= 20 && data.age < 25',
      'rag-red': 'data.age >= 25'
      }
    // you can use the grid api like this:
    // grid.api().sizeColumnsToFit();
    //grid.api().setHeaderHeight(48);
})

 

  • Like 2

Share this post


Link to post
Share on other sites

@jmartsch Thank you! I will try it this evening.

Btw. do you know if something like this (see image below which shows a bootstrap table by wenzhixin) is possible with RockGrid? (with reasonable effort).

I would like to use "Select Options" field types, which show their value instead of the key and which can be filtered with a Select Box (see "Status" in the image below).

Thank you.

selectbs.png

Share this post


Link to post
Share on other sites
19 hours ago, theo said:

I am testing RockGrid for the first time now. It looks really great.

Glad to hear that. I'm also still impressed how powerful and well crafted aggrid is 🙂

19 hours ago, theo said:

1. How can I get a link on the row near the id for linking to the page editor? The same way it is done in "RockFinder Tester"? SOLVED

If others read this just have a look here: https://gitlab.com/baumrock/FieldtypeRockGrid/blob/master/plugins/columns/rgColAddIcons.md

19 hours ago, theo said:

2. How can I deal with the "Select Options" field type, if I don't want to show the id's but the values?

https://gitlab.com/baumrock/FieldtypeRockGrid/blob/master/readme.md#transmit-data-to-the-client-side

19 hours ago, theo said:

3. How can I change the color of a row, depending on a certain row value?

https://www.ag-grid.com/javascript-grid-row-styles/

 

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, theo said:

Btw. do you know if something like this (see image below which shows a bootstrap table by wenzhixin) is possible with RockGrid? (with reasonable effort).

I would like to use "Select Options" field types, which show their value instead of the key and which can be filtered with a Select Box (see "Status" in the image below).

This is called "Set Filter" in aggrid and it is an enterprise feature: https://www.ag-grid.com/javascript-grid-filter-set/

YEvDIua.png

 

I've already created two custom filters: https://gitlab.com/baumrock/FieldtypeRockGrid/tree/master/plugins/filters

I want to create a filter similar to the set filter of aggrid one day, but it has low priority at the moment. You can try my smart filter (that is already default in the new versions) or you can try to build your own. If you (or anybody else) are/is interested in sponsoring this type of filter for the community please let me know.

  • Like 2

Share this post


Link to post
Share on other sites

@bernhard Thanks a lot. I will try this tonight.

Yes, "Set filter" is what I would need. This is critical.

Since I don't have enough time for experiments atm., I think I'll go with bootstrap table working on normal MySQL Table this time.

I have everything at hand with this system, it just takes a few changes. So that's my best bet to get the job done as fast as possible.

But I'll come back to RockGrid.

Thank you.

Share this post


Link to post
Share on other sites
5 hours ago, theo said:

I think I'll go with bootstrap table working on normal MySQL Table this time.

I have everything at hand with this system, it just takes a few changes. So that's my best bet to get the job done as fast as possible.

I would be interested how you do that 🙂

Share this post


Link to post
Share on other sites
11 hours ago, bernhard said:

I would be interested how you do that 🙂

I am not sure what you mean. I'm using bootstrap table and some PHP for the database operations.

I can copy most parts from code had written before. I know how it works, so it is easy for me. That's all.

It has nothing to do with Processwire.

P.S. See also

http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/select2-filter.html

http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/editable.html

Share this post


Link to post
Share on other sites

Update: RockGrid is now translateable via the pw backend 🙂 To be more precise: RockGrid has always been multilanguage, just aggrid's labels for Page 1 of X and "loading..." etc. where not translateable until now.

xnoPWp7.png

9zDB1Lb.png

The translation file is attached to the first post of this thread:

 

  • Like 4

Share this post


Link to post
Share on other sites

@bernhard You should update ag grid to the latest version, as it brings numerous good improvements. See https://www.ag-grid.com/ag-grid-changelog/?fixVersion=18.0.0 and https://www.ag-grid.com/ag-grid-changelog/?fixVersion=19.0.0

I made a quick test with the new version and everything works well in my case.

The name of the script has been changed to ag-grid-community.js

  • Thanks 1

Share this post


Link to post
Share on other sites
2 hours ago, jmartsch said:

@bernhard You should update ag grid to the latest version, as it brings numerous good improvements. See https://www.ag-grid.com/ag-grid-changelog/?fixVersion=18.0.0 and https://www.ag-grid.com/ag-grid-changelog/?fixVersion=19.0.0

I made a quick test with the new version and everything works well in my case.

Can confirm everything works. I updated ag-grid soon after I started tinkering with RockGrid.

  • Thanks 1

Share this post


Link to post
Share on other sites

I don't get the scrollbar with ag-Grid 19.0.1 (on latest Firefox). That is unfortunate 😞

Share this post


Link to post
Share on other sites

I also get it on Firefox. Which version did you try exactly? the single-js version or the one with separate css?

I also tried it with Reno + Uikit... no difference

Share this post


Link to post
Share on other sites

Please take a look about the new autoheight setting https://www.ag-grid.com/javascript-grid-width-and-height/#auto-height

Here is an example where you can switch between a fixed height and autoheight:

Example

With autoheight enabled the vertical scrollbar appears, which might be a small bug in ag grid, but it doesn't bother me.

 

  • Like 1

Share this post


Link to post
Share on other sites

ok thx just pushed v0.0.12 including aggrid v19.0.0

seems that the scrollbar thing is an issue with aggrid itself and has nothing to do with any of my modules so i'm fine with it. grids can be tricky and i guess they have a good reason why they changed to flex and why the scrollbar is there (i guess it makes other things a lot easier/better).

@Beluga I would be interested in how you are using RockGrid and what you think of it so far 🙂

PS: Just added the module to the modules directory.

  • Like 1

Share this post


Link to post
Share on other sites
5 minutes ago, bernhard said:

@Beluga I would be interested in how you are using RockGrid and what you think of it so far 🙂

The plan is to have it as an interface to filter from two collections of proverbs, international with 35k items and Finnish with 8k. Filtering would target the proverb text. The db includes thematic categorisation, book references, cross-references for culture/language and various research-related tidbits. There will be other views on the material without the grid (like a digital card per proverb etc.).

I like RockGrid very much and the new smart filter is a really nice addition. I will look into paying you after we launch the site.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Gadgetto
      SnipWire - Snipcart integration for ProcessWire
      Snipcart is a powerful 3rd party, developer-first HTML/JavaScript shopping cart platform. SnipWire is the missing link between Snipcart and the content management framework ProcessWire.
      With SnipWire, you can quickly turn any ProcessWire site into a Snipcart online shop. The SnipWire plugin helps you to get your store up and running in no time. Detailed knowledge of the Snipcart system is not required.
      SnipWire is free and open source licensed under Mozilla Public License 2.0! A lot of work and effort has gone into development. It would be nice if you could donate an amount to support further development:

      Status update links (inside this thread) for SnipWire development
      2020-04-06 -- SnipWire 0.8.6 (beta) released! Adds support for Snipcart subscriptions and also fixes some problems 2020-03-21 -- SnipWire 0.8.5 (beta) released! Improves SnipWires webhooks interface and provides some other fixes and additions 2020-03-03 -- SnipWire 0.8.4 (beta) released! Improves compatibility for Windows based Systems. 2020-03-01 -- SnipWire 0.8.3 (beta) released! The installation and uninstallation process has been heavily revised. 2020-02-08 -- SnipWire 0.8.2 (beta) released! Added a feature to change the cart and catalogue currency by GET, POST or SESSION param 2020-02-03 -- SnipWire 0.8.1 (beta) released! All custom classes moved into their own namespaces. 2020-02-01 -- SnipWire is now available via ProcessWire's module directory! 2020-01-30 -- SnipWire 0.8.0 (beta) first public release! (module just submitted to the PW modules directory) 2020-01-28 -- added Custom Order Fields feature (first SnipWire release version is near!) 2020-01-21 -- Snipcart v3 - when will the new cart system be implemented? 2020-01-19 -- integrated taxes provider finished (+ very flexible shipping taxes handling) 2020-01-14 -- new date range picker, discount editor, order notifiactions, order statuses, and more ... 2019-11-15 -- orders filter, order details, download + resend invoices, refunds 2019-10-18 -- list filters, REST API improvements, new docs platform, and more ... 2019-08-08 -- dashboard interface, currency selector, managing Orders, Customers and Products, Added a WireTabs, refinded caching behavior 2019-06-15 -- taxes provider, shop templates update, multiCURL implementation, and more ... 2019-06-02 -- FieldtypeSnipWireTaxSelector 2019-05-25 -- SnipWire will be free and open source Plugin Key Features
      Fast and simple store setup Full integration of the Snipcart dashboard into the ProcessWire backend (no need to leave the ProcessWire admin area) Browse and manage orders, customers, discounts, abandoned carts, and more Multi currency support Custom order and cart fields Process refunds and send customer notifications from within the ProcessWire backend Process Abandoned Carts + sending messages to customers from within the ProcessWire backend Complete Snipcart webhooks integration (all events are hookable via ProcessWire hooks) Integrated taxes provider (which is more flexible then Snipcart own provider) Useful Links
      SnipWire in PW modules directory SnipWire Docs (please note that the documentation is a work in progress) SnipWire @GitHub (feature requests and suggestions for improvement are welcome - I also accept pull requests) Snipcart Website  
      ---- INITIAL POST FROM 2019-05-25 ----
       
    • By bernhard
      #######################
      Please use the new RockFinder2
      #######################
      WHY?
      This module was built to fill the gap between simple $pages->find() operations and complex SQL queries.
      The problem with $pages->find() is that it loads all pages into memory and that can be a problem when querying multiple thousands of pages. Even $pages->findMany() loads all pages into memory and therefore is a lot slower than regular SQL.
      The problem with SQL on the other hand is, that the queries are quite complex to build. All fields are separate tables, some repeatable fields use multiple rows for their content that belong to only one single page, you always need to check for the page status (which is not necessary on regular find() operations and therefore nobody is used to that).
      In short: It is far too much work to efficiently and easily get an array of data based on PW pages and fields and I need that a lot for my RockGrid module to build all kinds of tabular data.

      Basic Usage

       
      Docs & Download
      https://modules.processwire.com/modules/rock-finder/
      https://github.com/BernhardBaumrock/RockFinder
       
      Changelog
      180817, v1.0.6, support for joining multiple finders 180810, v1.0.5, basic support for options fields 180528, v1.0.4, add custom select statement option 180516, change sql query method, bump version to 1.0.0 180515, multilang bugfix 180513, beta release <180513, preview/discussion took place here: https://processwire.com/talk/topic/18983-rocksqlfinder-highly-efficient-and-flexible-sql-finder-module/
    • By MoritzLost
      TrelloWire
      This is a module that allows you to automatically create Trello cards for ProcessWire pages and update them when the pages are updated. This allows you to setup connected workflows. Card properties and change handling behaviour can be customized through the extensive module configuration. Every action the module performs is hookable, so you can modify when and how cards are created as much as you need to. The module also contains an API-component that makes it easy to make requests to the Trello API and build your own connected ProcessWire-Trello workflows.
      Features
      All the things the module can do for you without any custom code: Create a new card on Trello whenever a page is added or published (you can select applicable templates). Configure the target board, target list, name and description for new cards. Add default labels and checklists to the card. Update the card whenever the page is updated (optional). When the status of the card changes (published / unpublished, hidden / unhidden, trashed / restored or deleted), move the card to a different list or archive or delete it (configurable). You can extend this through hooks in many ways: Modifiy when and how cards are created. Modify the card properties (Target board & list, title, description, et c.) before they are sent to Trello. Create your own workflows by utilizing an API helper class with many convenient utility methods to access the Trello API directly. Feedback & Future Plans
      Let me know what you think! In particular:
      If you find any bugs report them here or on Github, I'll try to fix them. This module was born out of a use-case for a client project where we manage new form submissions through Trello. I'm not sure how many use-cases there are for this module. If you do use it, tell me about it! The Trello API is pretty extensive, I'll try to add some more helper methods to the TrelloWireApi class (let me know if you need anything in particular). I'll think about how the module can support different workflows that include Twig – talk to me if you have a use-case! Next steps could be a dashboard to manage pages that are connected to a Trello card, or a new section in the settings tab to manage the Trello connection. But it depends on whether there is any interest in this 🙂 Links
      Repository on Github Complete module documentation (getting started, configuration & API documentation) [Module directory pending approval] Module configuration

    • By MoritzLost
      Process Cache Control
      This module provides a simple solution to clearing all your cache layers at once, and an extensible interface to perform various cache-related actions.
      The simple motivation behind this module was that I was tired of manually clearing caches in several places after deploying a change on a live site. The basic purpose of this module is a simple Clear all caches link in the Setup menu which clears out all caches, no matter where they hide. You can customize what exactly the module does through it's configuration menu:
      Expire or delete all cache entries in the database, or selectively clear caches by namespace ($cache API) Clear the the template render cache. Clear out specific folders inside your site's cache directory (/site/assets/cache) Clear the ProCache page render cache (if your site is using ProCache) Refresh version strings for static assets to bust client-side browser caches (this requires some setup, see the full documentation for details). This is the basic function of the module. However, you can also add different cache management action through the API and execute them through the module's interface. For this advanced usage, the module provides:
      An interface to see all available cache actions and execute them. A system log and logging output on the module page to see verify what the module is doing. A CacheControlTools class with utility functions to clear out different caches. An API to add cache actions, execute them programmatically and even modify the default action. Permission management, allowing you granular control over which user roles can execute which actions. The complete documentation can be found in the module's README.
      Plans for improvements
      If there is some interest in this, I plan to expand this to a more general cache management solution. I particular, I would like to add additional cache actions. Some ideas that came to mind:
      Warming up the template render cache for publicly accessible pages. Removing all active user sessions. Let me know if you have more suggestions!
      Links
      https://github.com/MoritzLost/ProcessCacheControl ProcessCacheControl in the Module directory CHANGELOG in the repository Screenshots


    • By Macrura
      PrevNextTabs Module
      Github: https://github.com/outflux3/PrevNextTabs
      Processwire helper modules for adding page navigation within the editor.
      Overview
      This is a very simple module that adds Previous and Next links inline with the tabs on the page editor. Hovering over the tab shows the title of the previous or next page (using the admin's built in jqueryUI tooltips.)
      Usage
      This module is typically used during development where you or your editors need to traverse through pages for the purpose of proofing, flagging and/or commenting. Rather than returning to the page tree or lister, they can navigate with these links.
      Warnings
      If you are using PW version 2.6.1 or later, the system will prevent you from leaving the page if you have unsaved edits.
      For earlier versions, to avoid accidentally losing changes made to a page that might occur if a user accidentally clicks on one of these, make sure to have the Form Save Reminder module installed.
      http://modules.processwire.com/modules/prev-next-tabs/
×
×
  • Create New...