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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      Repeater Images
      Adds options to modify Repeater fields to make them convenient for "page-per-image" usage. Using a page-per-image approach allows for additional fields to be associated with each image, to record things such as photographer, date, license, links, etc.
      When Repeater Images is enabled for a Repeater field the module changes the appearance of the Repeater inputfield to be similar (but not identical) to an Images field. The collapsed view shows a thumbnail for each Repeater item, and items can be expanded for field editing.
      Screencast

      Installation
      Install the Repeater Images module.
      Setup
      Create an image field to use in the Repeater field. Recommended settings for the image field are "Maximum files allowed" set to 1 and "Formatted value" set to "Single item (null if empty)". Create a Repeater field. Add the image field to the Repeater. If you want additional fields in the Repeater create and add these also. Repeater Images configuration
      Tick the "Activate Repeater Images for this Repeater field" checkbox. In the "Image field within Repeater" dropdown select the single image field. You must save the Repeater field settings to see any newly added Image fields in the dropdown. Adjust the image thumbnail height if you want (unlike the core Images field there is no slider to change thumbnail height within Page Edit). Note: the depth option for Repeater fields is not compatible with the Repeater Images module.
      Image uploads feature
      There is a checkbox to activate image uploads. This feature allows users to quickly and easily add images to the Repeater Images field by uploading them to an adjacent "upload" field.
      To use this feature you must add the image field selected in the Repeater Images config to the template of the page containing the Repeater Images field - immediately above or below the Repeater Images field would be a good position.
      It's recommended to set the label for this field in template context to "Upload images" or similar, and set the visibility of the field to "Closed" so that it takes up less room when it's not being used. Note that when you drag images to a closed Images field it will automatically open. You don't need to worry about the "Maximum files allowed" setting because the Repeater Images module overrides this for the upload field.
      New Repeater items will be created from the images uploaded to the upload field when the page is saved. The user can add descriptions and tags to the images while they are still in the upload field and these will be retained in the Repeater items. Images are automatically deleted from the upload field when the page is saved.
      Tips
      The "Use accordion mode?" option in the Repeater field settings is useful for keeping the inputfield compact, with only one image item open for editing at a time. The "Repeater item labels" setting determines what is shown in the thumbnail overlay on hover. Example for an image field named "image": {image.basename} ({image.width}x{image.height})  
      https://github.com/Toutouwai/RepeaterImages
      https://modules.processwire.com/modules/repeater-images/
    • By EyeDentify
      Hello There Guys.

      I am in the process of getting into making my first modules for PW and i had a question for you PHP and PW gurus in here.

      I was wondering how i could use an external library, lets say TwitterOAuth in my PW module.
      Link to library
      https://twitteroauth.com/

      Would the code below be correct or how would i go about this:
      <?PHP namespace ProcessWire; /* load the TwitterOAuth library from my Module folder */ require "twitteroauth/autoload.php"; use Abraham\TwitterOAuth\TwitterOAuth; class EyeTwitter extends WireData,TwitterOAuth implements Module { /* vars */ protected $twConnection; /* extend parent TwitterOAuth contructor $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token, $access_token_secret); */ public function myTwitterConnection ($consumer_key, $consumer_secret, $access_token, $access_token_secret) { /* save the connection for use later */ $this->twConnection = TwitterOAuth::__construct($consumer_key, $consumer_secret, $access_token, $access_token_secret); } } ?> Am i on the right trail here or i am barking up the wrong tree?
      I don´t need a complete solution, i just wonder if i am including the external library the right way.
      If not, then give me a few hint´s and i will figure it out.

      Thanks a bunch.

      /EyeDentify
    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version (has been tested up to v3.3), add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "http://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


    • By kongondo
      FieldtypeRuntimeMarkup and InputfieldRuntimeMarkup
       
      Modules Directory: http://modules.processwire.com/modules/fieldtype-runtime-markup/
      GitHub: https://github.com/kongondo/FieldtypeRuntimeMarkup
      As of 11 May 2019 ProcessWire versions earlier than 3.x are not supported
      This module allows for custom markup to be dynamically (PHP) generated and output within a page's edit screen (in Admin).
       
      The value for the fieldtype is generated at runtime. No data is saved in the database. The accompanying InputfieldRuntimeMarkup is only used to render/display the markup in the page edit screen.
       
      The field's value is accessible from the ProcessWire API in the frontend like any other field, i.e. it has access to $page and $pages.
       
      The module was commissioned/sponsored by @Valan. Although there's certainly other ways to achieve what this module does, it offers a dynamic and flexible alternative to generating your own markup in a page's edit screen whilst also allowing access to that markup in the frontend. Thanks Valan!
       
      Warning/Consideration
      Although access to ProcessWire's Fields' admin pages is only available to Superusers, this Fieldtype will evaluate and run the custom PHP Code entered and saved in the field's settings (Details tab). Utmost care should therefore be taken in making sure your code does not perform any CRUD operations!! (unless of course that's intentional) The value for this fieldtype is generated at runtime and thus no data is stored in the database. This means that you cannot directly query a RuntimeMarkup field from $pages->find(). Usage and API
       
      Backend
      Enter your custom PHP snippet in the Details tab of your field (it is RECOMMENDED though that you use wireRenderFile() instead. See example below). Your code can be as simple or as complicated as you want as long as in the end you return a value that is not an array or an object or anything other than a string/integer.
       
      FieldtypeRuntimeMarkup has access to $page (the current page being edited/viewed) and $pages. 
       
      A very simple example.
      return 'Hello'; Simple example.
      return $page->title; Simple example with markup.
      return '<h2>' . $page->title . '</h2>'; Another simple example with markup.
      $out = '<h1>hello '; $out .= $page->title; $out .= '</h1>'; return $out; A more advanced example.
      $p = $pages->get('/about-us/')->child('sort=random'); return '<p>' . $p->title . '</p>'; An even more complex example.
      $str =''; if($page->name == 'about-us') { $p = $page->children->last(); $str = "<h2><a href='{$p->url}'>{$p->title}</a></h2>"; } else { $str = "<h2><a href='{$page->url}'>{$page->title}</a></h2>"; } return $str; Rather than type your code directly in the Details tab of the field, it is highly recommended that you placed all your code in an external file and call that file using the core wireRenderFile() method. Taking this approach means you will be able to edit your code in your favourite text editor. It also means you will be able to type more text without having to scroll. Editing the file is also easier than editing the field. To use this approach, simply do:
      return wireRenderFile('name-of-file');// file will be in /site/templates/ If using ProcessWire 3.x, you will need to use namespace as follows:
      return ProcessWire\wireRenderFile('name-of-file'); How to access the value of RuntimeMarkup in the frontend (our field is called 'runtime_markup')
       
      Access the field on the current page (just like any other field)
      echo $page->runtime_markup; Access the field on another page
      echo $pages->get('/about-us/')->runtime_markup; Screenshots
       
      Backend
       

       

       
      Frontend
       

×
×
  • Create New...