Nextras Datagrid integration

Nittro integrates quite nicely with Nextras Datagrid out of the box! But in practice I found a couple of snags one might hit along the way, so I figured I'd try providing a brief overview of things I already know how to fix. Here goes:

1. Don't use the distribution JS for Nextras Datagrid - since it's built to integrate with nette.ajax.js and you're not using that if you're using Nittro it'd only break horribly.
2. To make Nextras Datagrid behave nicely with regards to browser history, put this in the afterRender() method of the presenter which contains the datagrid:

   if ($this->isAjax()) {
       $this->postGet('this');
   }

   Alternatively it might make sense to prevent datagrid actions from being pushed onto the browser history stack altogether; if that's the case for you there are two ways to achieve this:

   • Either add data-history="false" to the datagrid's form (which you can do using $grid->getComponent('form')->getElementPrototype()->data('history', 'false') e.g. in the datagrid's factory or in an onRender callback) and to the sortable columns' sorting links (which is trickier since it means you need to override the whole row-head-columns block just to add one stupid data attribute).
   • Or you can write a small javascript service which will listen for the transaction-created event of the page service to detect transactions originating within a datagrid and prevent such transactions from being pushed onto the browser history stack - an example implementation can be found here.

3. If you're using custom JS widgets for a datagrid's filter and / or inline edit forms (e.g. a datepicker), the best way to initialise them is to put the initialisation code inline in a custom cell block, for example:

   {define col-filter-created_at}
       <input n:name="$column->name" />
       <script type="application/javascript">
           _stack.push(function (di) {
               var pickr = null;
   
               di.getService('page').getSnippet({input.id form-filter-$column->name})
                   .setup(function (inp) {
                       pickr = flatpickr(inp, {
                           altInput: true,
                           altFormat: 'j. n. Y'
                       });
                   })
                   .teardown(function () {
                       pickr = pickr && pickr.destroy() && null;
                   });
           });
       </script>
   {/define}