Error in datagrid.latte with latte/latte:3.1.1

[vzikmund]

Hello,
I upgraded my Latte to version 3.1.1. but now Datagrid (version 6.10.0) has error

Invalid attribute name 'rowspan=2'

I cannot upgrade to the new version, because I use package ublaboo/datagrid-nette-database-data-source which is compatible with datagrid ^6.0 only.

Is there any workaround for this problem?

Thank you!

PS: This problem was mentioned by DG (https://forum.nette.org/cs/36881-latte-3-1-pojdte-otestovat-rc#:~:text=A%C2%A0je%C5%A1t%C4%9B%20p%C3%A1r%20koment%C3%A1%C5%99%C5%AF%3A) but i couldnt find how to solve it.

[radimvaculik]

@vzikmund Could you try this PR? We merged nette-database-data-source repo into Datagrid directly.

[vzikmund]

Thank you, now it works. The problem was with a method $grid->addGroupButtonAction(...). The page loads as expected, however the group action remains disabled when i check some items in the grid. But it might be problem somewhere else. I will try to debug what is the issue.

[radimvaculik]

@vzikmund Let us know. Thanks. You can always check examples, if the behaviour is present or not.

[vzikmund]

Ok the issue is in JS. I tried to use "@contributte/datagrid": "^7.1.0" installed via npm and it started working... but different error appeared 🫠 .

The problem is that I also use "nette-forms": "^3.5.3" with custom errors display callback Nette.showFormErrors = function (form, errors) {..}. And your package rewrites behaviour of the function Nette.showFormErrors back to default. Is there a slim version of datagrid.js without wired nette-forms?

import Nette from "nette-forms";
import { setupNetteErrors } from "./nette-forms-custom";
setupNetteErrors(Nette);
Nette.initOnLoad();
window.Nette = Nette;

import "@contributte/datagrid/dist/datagrid-full.js"; // custom form validation works only if this line is commented
import "@contributte/datagrid/dist/datagrid-full.css";

[radimvaculik]

The package does not actually overwrite Nette.showFormErrors on your window.Nette. The effect is the same though, and here is why:

datagrid-full.js is a self-contained bundle — nette-forms is inlined into it (no external configured in rollup). This means two separate nette-forms instances exist at runtime: yours (customized) and datagrid's (default). When naja validates forms, it uses its own bundled instance, so your custom showFormErrors is never called.

The fix: skip datagrid-full.js and build your own entry point using the assets/ source (published to npm). This gives you one shared instance. Something like:

import naja from "naja";
import Nette from "nette-forms";
import { setupNetteErrors } from "./nette-forms-custom";
import { AutosubmitPlugin, CheckboxPlugin, ConfirmPlugin, createDatagrids, InlinePlugin, NetteFormsPlugin /* ... */ } from "@contributte/datagrid";
import { NajaAjax } from "@contributte/datagrid/ajax";

setupNetteErrors(Nette);
Nette.initOnLoad();

document.addEventListener("DOMContentLoaded", () => {
    naja.formsHandler.netteForms = Nette;
    naja.initialize();

    createDatagrids(new NajaAjax(naja), {
        datagrid: {
            plugins: [
                new NetteFormsPlugin(Nette), // pass your customized instance
                // ... rest of plugins
            ],
        },
    });
});

NetteFormsPlugin already accepts a custom Nette instance — so this is the intended approach for anyone needing custom nette-forms behavior.