ublaboo/datagrid: mocný, rychlý, rozšiřitelný, hezký, anglicky dokumentovaný datagrid

@iru @PavelJanda dnes jsem narazil na celkem inspirativni video

https://uimovement.com/…interaction/

Ahoj,

začínám s nette a tímto datagridem, dělá se s tím super, ale narazil jsem na problém s gridem.

Pokud mám funkci createComponentGrid v BasePresenter, v hlavním presenteru přiřadím setDataSource a addFilterMultiSelect, tak mi grid nefiltruje. Pravděpodobně to bude tím, že UI\Presenter zpracuje signál a jako signalReceiver má komponentu (grid) která neexistuje a tak si jí vytvoří – tam ale není filter MiltiSelect, který jsem tam dodal až přes $this[‚grid‘].

Celý to dělám kvůli tomu, abych v options toho filtru MultiSelect měl DISTINCT hodnoty ze sloupce gridu. Tak jak je autofilter v excelu.

Může mi s tím prosím někdo pradit?

Děkuji.

@PavelJanda ahoj, prosímtě, nevíš, v čem může být problém – viz. předchozí příspěvek, udělal jsem si ten Status switch zatím podle návodu s rozbalovacím menu, ale $this[‚grid‘]->redrawItem($id); mi ve f-ci changeStatus odmítá překreslit řádek. Informace se odešlou dobře, ale vrátí se pouze údaje o nastavení gridu(počet na stránku atd.) + flash message.

Podle dema chybí snippet „snippet-grid-item-1“ a taky _datagrid_redrawItem_class: "" a _datagrid_redrawItem_id: 1

Grid mám v komponentně, injectuju do Presenteru továrničku registrovanou v configu, žádný speciality. Grid jako takový funguje, nastavení počtu zobrazených, filtrování v hlavičce sloupce funguje.

EDIT: zkoušel jsem to to i vyhodit z komponenty přímo do Presenteru a žádná změna
EDIT2: sem idiot, měl sem blbě nastavený DataSource, bohužel to nijak neinformuje, takže sem hledal úplně všude jinde :-(

PS: v Nette3 + NetteForms.js 3 + Datagrid nefungují Group actions. V demu to jde, ale v demu jsou připojené NetteForms 2.4. S NetteForms 3 se nezobrazí tlačítko pro potvrzení Group actions. Je stále display:none.

Editoval d@rkWolf (9. 4. 2020 18:17)

Mám dotaz.

Je nějaká možnost udělat že třeba uživatel z nějaké jiné šablony by se proklikl do šablony kde je grid a rovnou by to našlo to co hledá( Třeba na jedné šabloně bude id nějakého projektu a po prokliku na stránku kde je grid mu to rovnou to ID najde)
Díky

@jAkErCZ Pokud nechceš, nebo nemůžeš nastavovat jen filtr jak píše @dTTb (např. uživatel nesmí vidět data z jiných projektů), tak můžeš tohle základní filtrování udělat nad kolekcí kterou pak předáváš do datagridu ($grid->setDataSource($someCollection);.

Třeba si do továrničky gridu předat id toho projektu a ještě předtím než nastavíš kolekci ji podle toho id vyfiltrovat ($someCollection->findBy(['id' => $id]): takhle nějak by to mohlo být třeba v Nextras ORM).

Udělal bys na to, prosím, issue na GH? Díky!

Je nějaká možnost abych v

->addAction('blah', 'Blahblah2', 'blah!')

Předal nějak vlastní parametr? Abych to mohl lépe idetifikovat? [‚id‘ ⇒ ‚1‘]

Ahoj lidi, v datagridu zobrazuji ve sloupcích položky, jejich vlastnosti a počet. Počet dělám pomoci count v SQL. Když zobrazím či skryju nějaký sloupec, tak se mi změní group by v SQL dotazu a tedy i počet. Funguje mi to dobře. Předpokládal jsem, že i export pomocí $grid->addExportCallback s $filtered=true mi vrátí data ve stejné podobě. Nicméně vrací to jinak. Vrací mi data podle výchozího group by, který byl v createComponent datagridu. Tzn. pokud si zobrazím/skryju některé sloupce, tak zobrazené data a exportované se liší.

Netuší někdo, jak to udělat správně?

Děkuji

@jAkErCZ Jakože máš pole položek a každý položka má pole 1 indexem? Navrhoval bych: Buď pole přemapovat na jednoduché dvourozměrné – pole položek. Nebo bych to navrhoval přemapovat na nějakou jinou strukturu – třeba pole objektů nebo nějakou kolekci objektů. Třeba pomocí array_map. WDYT?

@mat.cerny3 jakou používáš verzi? Mně to funguje. I demo funguje.. 🤔

Používáš překlady do CZ?

@mat.cerny3 Yes, tam byla dřív nějaká chyba. Myslím, že ve verzi 6 je opravená. Večer se an to podívám. :)

Našel jsem jeden problém snažím se rozjet tree view

Grid:

public function createComponentReasonGrid($name)
 {
     $grid = new DataGrid();
     $reasons = $this->settignsRepository->getReasonList();
     $this->addComponent($grid, $name);
     $grid->setPrimaryKey('reason_id');
     $grid->setDataSource($reasons);
     $grid->setTreeView([$this, 'getChildren'], 'has_children');
     $grid->setDefaultSort(['reason_id' => 'ASC']);

Model

public function getReasonList() {

       $join = $this->db->select('COUNT(reason_id) AS count, parent_reason_id')
           ->from(self::TABLE_REASON)
           ->groupBy('parent_reason_id');

       $fluent = $this->db
           ->select('c.*, c_b.count as has_children')
           ->from(self::TABLE_REASON, 'c')
           ->leftJoin($join, 'c_b')
           ->on('c_b.parent_reason_id = c.reason_id')
           ->where('c.parent_reason_id IS NULL');

       return $fluent;
   }

   public function getChildren($id) {
       $join = $this->db->select('COUNT(reason_id) AS count, parent_reason_id')
           ->from(self::TABLE_REASON)
           ->groupBy('parent_reason_id');

       $fluent = $this->db
           ->select('c.*, c_b.count as has_children')
           ->from(self::TABLE_REASON, 'c')
           ->leftJoin($join, 'c_b')
           ->on('c_b.parent_reason_id = c.reason_id')
           ->where('c.parent_reason_id = %i', $id);

       return $fluent;
   }

Ale hází mi to chybu…

You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'GET REASON LIST ORDER BY `reason_id`' at line 1

SELECT c.*, c_b.count as has_children
FROM reason c
LEFT JOIN (
SELECT COUNT(reason_id) AS count, parent_reason_id
FROM `reason`
GROUP BY `parent_reason_id`) c_b ON c_b.parent_reason_id = c.reason_id
WHERE c.parent_reason_id IS NULL GET REASON LIST
ORDER BY `reason_id`

Dělám něco špatně?

Ahoj,

po vykonani update ublaboo/datagrid na verziu v6.2.26, som objavil chybu. Item Detail sa po kliknuti na tlacitko nezobrazil iba nacital. Chybu som u seba opravil a nachadza sa v datagrid.js na riadku 475, kedy sa do nazvu triedy nedoplnil nazov gridu. Oprava success callbacku vyzera nasledovne:

<script>
success: function(payload) {
    var id, name, row_detail;
    if (payload._datagrid_toggle_detail) {
      id = payload._datagrid_toggle_detail;
      name = payload._datagrid_name;
      row_detail = $('.item-detail-' + name + '-id-' + id);
      row_detail.toggleClass('toggled');
      return row_detail.find('.item-detail-content').slideToggle('fast');
    }
}
</script>

@Failips Člověče, tuto chybu se mi nedaří replikovat. Nemáš nějaké staré assety? Na řádku 475 je něco úplně jiného: https://github.com/…/datagrid.js#L475

Ahoj,

není někde popsáno, které bloky lze přepsat při tvorbě vlastní šablony? V dokumentaci jsme našli jen https://contributte.org/…emplate.html#…. Rádi bychom ale změnili více prvků, než je zde popsáno (například prvek pro nastavení počtu položek).

Díky za odpověď!

Čau,
mám takový problém mám ublaboo/datagrid ve kterém se prokliknu do dalšího gridu do kterého si předám ID a v tom druhém si ID seberu $this->presenter->getParameter(‚id‘) jenže jsem si všiml že při reloadu se id přidá v pořádku ale v pozadí proběhne AJAX prvek refreshState! který mi ale předá null
Jak tohle mohu ošetřit?

Editoval jAkErCZ (23. 7. 2020 17:51)

Pavel Janda napsal(a):

@jAkErCZ Možná pomůže zrušení refreshování statu – to je externí js script, který na této stránce třeba neuvedeš do layoutu. Případně vymyslíme jiné řešení

No můj grid vypadá takto :) Jak tedy zruším ten refresh?

protected function createComponentExhibitorsGrid($name): DataGrid {
    $grid = $this->createComponentGrid($name);
    $flat = $this->exhibitorManager->getFlatGrid($this->presenter->getParameter('id'));
    $grid->setDataSource($flat->related('stand')->where('floor_id = ?',$flat['id'])->fetchAll());
    $grid->setColumnsHideable();

    $grid->addColumnText('id', 'ID')
        ->setDefaultHide()
        ->setSortable()
        ->setFilterText();
    $grid->addColumnText('name', 'Název plochy')
        ->setSortable()
        ->setFilterText();

    $grid->addColumnText('exposition', 'Akce')
        ->setRenderer(function ($flat) {
            $html = Html::el('span');

            $html->addHtml(Html::el('span')
                ->setAttribute('style', 'display: block; margin: 2px 0;')
                ->setText($flat->name));

            return  $html;

        });

    $grid->addColumnText('state', 'Stav plochy')
        ->setRenderer(function ($flat) {
            $state = $flat->related('exhibitor_exposition__stand')->fetch();

            $html = Html::el('span');

            if ($state == true){
                $html->addHtml(Html::el('span')
                    ->setAttribute('class', 'label label-success')
                    ->setAttribute('style', 'display: block; margin: 2px 0;')
                    ->setText('Obsazeno'));
            }else{
                $html->addHtml(Html::el('span')
                    ->setAttribute('class', 'label label-danger')
                    ->setAttribute('style', 'display: block; margin: 2px 0;')
                    ->setText('Volno'));
            }
            return  $html;

        });

    $grid->addColumnText('exhibitor', 'Partner')
        ->setRenderer(function ($flat) {
            $exhibitor = $flat->related('exhibitor_exposition__stand')->fetch();
            $html = Html::el('span');

            $html->addHtml(Html::el('span')
                ->setAttribute('style', 'display: block; margin: 2px 0;')
                ->setText($exhibitor['exhibitor_exposition']['order']['exhibitor']['company']));

            return  $html;

        });

    $grid->onRender[] = function (\Ublaboo\DataGrid\DataGrid $grid) use ($flat): void {
        $grid->setDataSource($flat->related('stand')->where('floor_id = ?',$flat['id'])->fetchAll());
    };

    return $grid;
}

Ahoj dá se nějak při skupinové akci vytvořit vlastní formulář co se na daných položkách má změnit, třeba tato

$grid->addGroupTextAction('Přecenit ')
je super, ale já bych ty textové pole potřeboval 3, dá se to nějak ohnout?

Děkuji

Editoval zoool (27. 7. 2020 12:33)

Já to třeba používám takto a funguje.

$grid2 = $this['grid2'];
        $model2 = $grid2->getDataModel();
        $model2->onAfterFilter[] = function (NetteDatabaseTableDataSource $items) {
            $return2 = [];
            $data2 = [];
            $itemss2 = $items->getData();
            foreach ($itemss2 as $item) {
                if (array_key_exists($item->date1->format('m.Y'), $data2)) {
                    $data2[$item->date1->format('m.Y')] += $item->price;
                } else
                    $data2[$item->date1->format('m.Y')] = $item->price;
            }
            if (count($data2) > 2) {
                foreach ($itemss2 as $item) {
                    if (array_key_exists($item->date1->format('m.Y'), $return2)) {
                        $return2[$item->date1->format('m.Y')] += $item->price;
                    } else
                        $return2[$item->date1->format('m.Y')] = $item->price;
                }
            } else {
                foreach ($itemss2 as $item) {
                    if (array_key_exists($item->date1->format('d.m.Y'), $return2)) {
                        $return2[$item->date1->format('d.m.Y')] += $item->price;
                    } else
                        $return2[$item->date1->format('d.m.Y')] = $item->price;
                }
            }
            $this->payload->datagrafname2 = json_encode(array_keys($return2), JSON_NUMERIC_CHECK);
            $this->payload->datagrafvalue2 = json_encode(array_values($return2), JSON_NUMERIC_CHECK);
        };

akmt napsal(a):

Ahoj,
už druhý den se pokouším nad DataGridem implementovat práci s vyfiltrovanými výsledky, ale netuším, zda to jde a jestli ano, jak to správně provést. V diskuzích jsem našel možnost podědění DataGridu a následně a vložení callbacků $this->dataModel->onAfterFilter, takže jeden z pokusů byl:

class MarkersDatagrid extends \Ublaboo\DataGrid\DataGrid {

	/** @var MarkerManager */
	private $markerManager;

	public function __construct(MarkerManager $markerManager) {
		parent::__construct();

		$this->markerManager = $markerManager;

		$this->setDataSource($this->markerManager->getAll());
		$this->addColumnText('name', 'Name');
		$this->addFilterText('name', 'Name');

		$this->addColumnText('address', 'Address');

		$this->dataModel->onAfterFilter[] = [$this, 'afterFilter'];
	}

	public function afterFilter() {
		test();
	}
}

ale test() se nezavolá…
Mohl by mě někdo „nakopnout“ jak dál? A hlavně jak se pak na úrovni presenteru dostat k samotným datům?
Děkuji!

Zdravím. Mám datagrid se dvěma sloupci: jméno a počet bodů. Výchozí řazení je abecedně podle jména.

$grid = new DataGrid;
$grid->setRememberState(false);
$grid->setDataSource($data);
$grid->addColumnText('name', 'Jméno')
	->setSortable();
$grid->addColumnNumber('score', 'Počet bodů')
	->setSortable();
$grid->setDefaultSort(['name' => 'ASC']);
return $grid;

Chci, aby první kliknutí na Počet bodů seřadilo data podle počtu sestupně od nejvyššího. Jak to udělat? Standardně se řadí vzestupně a je tam jen setter setDefaultSort pro výchozí řazení celého datagridu, což nechci.

Editoval stepos2 (17. 8. 2020 12:19)

Ahoj,
je možné v presenteru zjistit skutečně aktuální stav filtrů na jednotlivých sloupcích?

Konkrétně mi jde o to, že chci zamezit změně pořadí (drag & drop), pokud je nastaven nějaký konkrétní filtr. Takže jsem chtěl v metodě handleSort() podle nastavení filtrů rozhodnout, zda povolit změnu pořadí nebo ne:

public function handleSort($item_id, $prev_id, $next_id)
{
	dump($this['grid']->filter);
}

Pokud nastavím nějaký filtr, správně se mi omezí řádky v gridu. Potom provedu drag & drop, ale metoda handleSort() mi vypíše stále to předchozí nastavení filtru. To aktuální nastavení se vypíše pouze v případě, že před změnou pořadí stisknu F5.

Díky za pomoc.

Vím že si můžu udělat svoji šablonu, ale tohle by mi ušetřilo spoustu času. iconPrefix je ale bohužel jako statická proměná.

$grid = new DataGrid($this, $name);
$grid->iconPrefix = 'glyphicon glyphicon-';

Umíte někdo nějak spacifikovat setConfirmation aby mi nevyskakoval klasický alert, ale nějaký rozumný dialog?

lubos napsal(a):

Confirmace na toolbar button, jde to ? Mě to píše nedefinovaná metoda.

$grid->addToolbarButton('deleteAll', 'Vymaže všechny data!')
	->setConfirmation(...);

Je to dementní, ale jde to:

$grid->addToolbarButton('deleteAllRegistrationData')
	->setIcon('ban')
	->setClass('btn btn-xs btn-danger')
	->addAttributes(['data-datagrid-confirm' => 'Pozor, vymažeš naprosto všechny registrace!!!!'])
	->setTitle('Výmaz kontakních údajů');

Pavel Janda napsal(a):

@lubos Můžeš v PR kód vylepšit, pokud se ti zdá „dementní“, budeme rádi. :)

Promiň, tvůj datagrid je naprosto báječná záležitost, vůbec jako kdybych nic neřekl. S těmi PR to bude se mnou těžké, vůbec netuším co to je :D (teda tuším, ale neumím to pěkně v angličtině popsat)