[deprecated] RockGrid - powerful, performant and beautiful data listing tool

[bernhard]

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?

[dotnetic]

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?

[bernhard]

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:

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,
]);

 

[bernhard]

Lots of updates for the weekend ?

• I merged all updates of the dev branch to master and bumped the version to 0.0.8
• I added a changelog here: https://gitlab.com/baumrock/FieldtypeRockGrid/raw/master/changelog.md
• I added an example filter + floating filter that you can easily copy and customize

 

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:

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

 

[dotnetic]

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.

 

[dotnetic]

Also I want to know how did you handle translations? For example translating the pager? There are instructions how to at https://www.ag-grid.com/javascript-grid-internationalisation/ but my general problem is understanding how to modify the gridOptions object.

[theo]

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)

[dotnetic]

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

 

[theo]

@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.

[bernhard]

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/

 

[bernhard]

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/

 

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.

[theo]

@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.

[bernhard]

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 ?

[theo]

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

[bernhard]

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.

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

 

[bernhard]

Just finished the docs for my custom smart filter - if anybody wants to get an idea what is possible just have a look here: https://gitlab.com/baumrock/FieldtypeRockGrid/blob/master/plugins/filters/smart.md

[dotnetic]

Thanks for the update. RockGrid is getting better and better. 

[dotnetic]

@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

[Beluga]

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.

[bernhard]

Thx @jmartsch and @Beluga but I get a vertical scrollbar on all my RockGrids after the update:



Do you also get this scrollbar?

[Beluga]

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

[bernhard]

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

[dotnetic]

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.

 

[bernhard]

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.

[Beluga]

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.