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

@elring Díky, super, mrknu na to.

@suwer: Původně jsem chtěl napsat právě že Ublaboo a Grido to v principu umí i bez JS a ten je jen pro uživatelský komfort.
A že ty JS tabulkovače jsou spíš odlehčené ke zlepšení zobrazení již existující tabulky, protože většinou neslouží k filtrování velkého množství dat (u těch čistě JS by musela zdrojová HTML tabulka obsahovat všechny záznamy, což u rozsáhlých dat většinou nechceš), zatímco plné backendové gridy se naopak snaží mít UI i pro rozsáhle filtrování a složitéjší řazení. Obecně to je sice podobné zadání, ale řeší to jinou potřebu. Ale máš pravdu, že obecně to není důležité.

Co je důležité, že všechny tvoje příklady neumí řazení podle více sloupců.

Editoval Šaman (26. 9. 2019 18:40)

Aha, tak ten shift mě nenapadl, to je zase novinka pro mě. :)
Hele, je to asi jedno a tady jsme offtopic. Evidentně jsme každý vyrostl na jiných gridech, takže nás překvapuje jiné UI.

Ahoj,
když si dám do setFilterSelect nebo groupAction pole, kde hodnoty obsahují tečky, tak vyneredorávní selectu není správně. Chybí tečky nebo čast hodnoty. Dělám něco špatně?

<?php
$arr = ['.a', 'a.', 'a.b', 'a.b.c'];
$grid->addColumnText('test', Test)->setFilterSelect($arr);
$grid->addGroupAction('Test', $arr)->onSelect[] = function (array $ids, $selected) {};
?>

Vyrendorování vypadá takto. Dá se říct, že ořízne to, co je před první tečkou, pokud tam něco je, včetně tečky.

<option value="0">a</option>
<option value="1"></option>
<option value="2">b</option>
<option value="3">b.c</option>

Mám poslední verzi datagridu, u předchozích jsem si nevšiml.
díky moc

ali napsal(a):

@jikki Typuju ze to bude delat translator, zkus ho vypnout.

Nebo vkladej hodnoty pres NotTranslate wrapper.

@ali máš pravdu, dělá to translator. Vypnutí či not translate wrapper pomáhá. Translator ale potřebuji mít zapnutý, tak škoda, že není u GroupAction možnost setTranslateOption jako je u Filtru. Nedaří se mi ten wrapper aplikovat na pole.

Díky za pomoc

Editoval jikki (15. 10. 2019 9:07)

Ahoj, díky za super komponentu, aktualizuju jednu historickou aplikaci na Nette 2.4 (časem na 3.0, ale to až později), takže jsem hledal náhradu za Grido :) Potřeboval bych poradit s jednou specialitou, jestli to vůbec nějak půjde, klidně i za cenu hacku přímo v kódu Datagridu (v Gridu jsem to taky tak nakonec musel udělat). A sice mít možnost nastavit, že se vůbec nebudou načítat data, pokud je filtr prázdný. Zkoumal jsem zdrojový kód (verze 5.7.1 pro Nette 2.4), ale ikdybych vytvořil potomka DibiFluentDataSource, abych upravil getData(), tak tam nemám jak zjistit, jestli ten filtr je prázdný nebo ne. Takže jediné, co bych asi aktuálně mohl udělat je upravit přímo DataModel a ve filterData() si přidat podmínku pro volání datasource->getData(). Nebo existuje jiný (a správnější) způsob, jak toho docílit? Díky za pomoc.

EDIT: respektive asi dát rovnou podmínku na začátek filterData() a pokud je filtr prázdný, tak vrátit rovnou prázdné pole.

EDIT2: hm, tak to nefunguje, jsem v koncích :(

Editoval Petr Daňa (20. 10. 2019 22:22)

@PavelJanda no, zkoušel jsem to vymyslet, ale nepovedlo se, už dlouho jsem v Nette nedělal :-/ Já ten Datagrid renderuju až v šabloně přes {control grid}, takže v presenteru v renderXxx() metodě vlastně ještě není vůbec dostupný.

No, nakonec jsem udělal ten hooodně nepěkný hack knihovny, na který nejsem vůbec pyšný, ale potřebuju se už pohnout dál, tak než přijdu na něco jiného nebo budu mít čas to hacknout „hezčeji“ (což se obávám hned tak nebude). Do DataModel jsem přidal public $noFetchingWhenEmptyFilter, v metodě filterData() pak mezi zpracováním filtrů a blokem volání getData() jsem dal tohle:

		if ($this->noFetchingWhenEmptyFilter) {
    $emptyFilter = true;
    foreach ($filters as $filter) {
        if ($filter->isValueSet()) {
            $emptyFilter = false;
            break;
        }
    }
    if ($emptyFilter) {
        return array();
    }
}

a v DataGridu jsem dal jako public $dataModel, abych se přes něj v mém presenteru dostal na ten příznak. No, snad bude čas to vymyslet jinak, ale bez úpravy kódu v knihovně to s největší pravděpodobností nepůjde.

EDIT:
Tak jsem to alespoň mírně upravil, v DataGrid jsem vrátil zpět ten field na protected a udělal public setter

public function setNoFetchingWhenEmptyFilter($enable = true) {
	    $this->dataModel->noFetchingWhenEmptyFilter = $enable;
}

Editoval Petr Daňa (24. 10. 2019 21:19)

Zdravím, je možné setConfirmation poslat do modalu místo klasického JS promptu?

Díky

@n3t nakonec jsem to vyřešil tak, že tlačítko pro smazání posílám na handleConfirm a v modalu tlačítko teprve na handleDelete. Děkuji

Ale mám ještě jeden dotaz. Mám v gridu sloupec s počtem dětí ke každé škole.

$grid->addColumnNumber('childs', 'Dětí')->setRenderer(function ($item) {
			return $item->related('user', 'company_id')->count();
		})->setAlign('center');

a pokud chci použít na tento sloupec summary.

$grid->setColumnsSummary(['childs']);

laděnka hlásí Cannot read an undeclared column ‚childs‘.

Editoval jval (2. 11. 2019 12:14)

@strunc A nestačilo by volat tím ajaxem url ?do=reload s tím, že v presentru by jsi měl

public function handleReload(){
	$this['grid']->reload();
}

jval napsal(a):

@strunc A nestačilo by volat tím ajaxem url ?do=reload s tím, že v presentru by jsi měl

public function handleReload(){
	$this['grid']->reload();
}

Moc dekuju, krasne to takhle funguje presne podle Tve rady.

@PavelJanda už se stalo :)

Tak jsem ještě narazil na jednu skrytou zradu s ItemsDetailForm, pokud se používá nějaká validace, je potřeba Submit buttonu nastavit Scope, jinak se validuje i vše ostatní (např. u mně to byl InlineAdd):

$grid->setItemsDetailForm(function(Nette\Forms\Container $container) use ($grid, $presenter) {
    $container->addHidden('id');
    $container->addText('name');

    $container->addSubmit('save', 'Save')
        ->setValidationScope([$container])
        ->onClick[] = function($button) use ($grid, $presenter) {
             $values = $button->getParent()->getValues();
             $presenter['grid']->redrawItem($values->id);
        };
});

Mám to taky doplnit do dokumentace (je to možná trochu specialita…)?

@PavelJanda poslal jsem PR

Ahoj, řeším banální případ a nějak se nemůžu pohnout z místa. Potřebuji, aby mi grid držel proměnnou, protože ho načítám Ajaxem. Proměnnou potřebuji mít ve stránkování, filtrování, sortingu atd. Zkusil jsme persistentní proměnnou, ale asi to celé chápu nějak špatně, protože v odkazech pro stránkování atd. se mi proměnná pokus neobjeví.

class MojeKomponenta extends Control
{

	protected $model;

	protected $dataGridFactory;

	/** @persistent */
	public $pokus;


	public function __construct($model, $dataGridFactory)
	{
		$this->model = $model;
		$this->dataGridFactory = $dataGridFactory;
		$this->pokus = 'nastaveno';
	}

	public function createComponentGrid()
	{
		$grid = $this->dataGridFactory->create($this);
		$grid->setDataSource($this->model->getAll());
		$grid->addColumnText('name', 'Name');
		return $grid;
	}
}

Předem díky moc za nasměrování, určitě to bude jako vždy nějaká blbost.

Editoval flamengo (13. 11. 2019 18:41)

A jeste na https://contributte.org/…ne-edit.html#… chybi v dokumentaci obrazky.

Ahoj,

v itemsDetail mi nefunguje prekresľovanie snippetov pomocou redrawControl(„snippetName“). Vie niekto čo s tým?

Vďaka.

Petr Daňa napsal(a):

Ahoj, díky za super komponentu, aktualizuju jednu historickou aplikaci na Nette 2.4 (časem na 3.0, ale to až později), takže jsem hledal náhradu za Grido :) Potřeboval bych poradit s jednou specialitou, jestli to vůbec nějak půjde, klidně i za cenu hacku přímo v kódu Datagridu (v Gridu jsem to taky tak nakonec musel udělat). A sice mít možnost nastavit, že se vůbec nebudou načítat data, pokud je filtr prázdný. Zkoumal jsem zdrojový kód (verze 5.7.1 pro Nette 2.4), ale ikdybych vytvořil potomka DibiFluentDataSource, abych upravil getData(), tak tam nemám jak zjistit, jestli ten filtr je prázdný nebo ne. Takže jediné, co bych asi aktuálně mohl udělat je upravit přímo DataModel a ve filterData() si přidat podmínku pro volání datasource->getData(). Nebo existuje jiný (a správnější) způsob, jak toho docílit? Díky za pomoc.

EDIT: respektive asi dát rovnou podmínku na začátek filterData() a pokud je filtr prázdný, tak vrátit rovnou prázdné pole.

EDIT2: hm, tak to nefunguje, jsem v koncích :(

Řešil jsem podobnou potřebu a jde to vcelku jednoduše. DataGridu můžeš nastavit template a v něm můžeš přepisovat/přenastavovat původní bloky. Před nastavením template tak stačí podmínky

<?php
if ($dataGrid->isFilterActive() === true) {
	$dataGrid->setTemplateFile(__DIR__ . '/templates/dataGrid.latte');
} else {
	$dataGrid->setTemplateFile(__DIR__ . '/templates/dataGrid.empty.latte');
}
?>

a v empty šabloně pak stačí přepsat tbody:

<?php
{extends $originalTemplate}

{define tbody}
	<tbody n:snippet="tbody">
	<tr>
		<td colspan="{$control->getColumnsCount()}">Nastav filtr</td>
	</tr>
	</tbody>
{/define}
?>

Tak dokud není nastaven filtr vykreslí se DataGrid bez dat.

Já ještě řeším potřebu omezit výpis na max. x záznamů – to ale nepůjde asi jinak, než nastavit natvrdo počet záznamů na stránku a skrýt stránkování (tedy zobrazit pouze první stránku a stránkování skrýt např. pomocí CSS).

Editoval xsuchy09 (27. 11. 2019 17:14)

Ahojte,

v datagridu používám možnost skrývání sloupců.

<?php
$grid->setColumnsHideable();
?>

Nicméně potřeboval bych některé sloupce nastavit tak, aby je nebylo možné skrýt. Jde toho nějako dosáhnout?

Díky moc za rady

Ahoj, mám datagrid, kde je více sloupců a jeden je upravitelný s setEditableCallback na jinou funkci. Po přepsání hodnoty v datagrid a kliknutí bokem se vše spustí a nová data se zapíší do databáze, což funguje správně, ale v konzoli se vypíše chyba:

`Uncaught TypeError: this.handleXHR is not a function
at ajax (nette.ajax.js:225)
at submit (datagrid.js:642)
at HTMLTextAreaElement.<anonymous> (datagrid.js:672)
at HTMLTextAreaElement.dispatch (jquery.min.js:2)
at HTMLTextAreaElement.v.handle (jquery.min.js:2)`

<?php
public function createComponentTaskStudentsGrid($name)
	{
		$grid = new DataGrid($this, $name);
		$grid->setPrimaryKey('id_user');
		$grid->setDataSource($this->database->query("SELECT id_user, email, first_name, surname, points FROM user NATURAL JOIN student_has_task WHERE id_task = ?", $this->id_task)->fetchAll());

		$grid->addColumnText('email', 'Email studenta')
		->setSortable()
		->setFilterText();

		$grid->addColumnText('first_name', 'Jméno studenta')
		->setSortable()
		->setFilterText();

		$grid->addColumnText('surname', 'Přijmení studenta')
		->setSortable()
		->setFilterText();

		$grid->addColumnText('points', 'Body')
		->setSortable()
		->setEditableCallback([$this,"handleTaskPoints"]);

		$grid->setTranslator($this->dataGridModel->dataGridTranslator);

		return $grid;
	}

	public function handleTaskPoints($id_user,$value)
	{
		$httpRequest = $this->getHttpRequest();
		$id_task = $httpRequest->getQuery('id_task');
		$maxpoints = $this->database->query("SELECT task_points FROM task WHERE id_task = ?", $id_task)->fetch();
		if($maxpoints->task_points >= $value)
		{
			$this->database->query("UPDATE student_has_task SET points = ? WHERE id_user = ? AND id_task = ?", $value, $id_user, $id_task);
		}
	}


?>

A poté již daná položka nejde upravit. Neví někdo co to způsobuje? Děkuji za pomoc.

@n3t BINGO – díky moc … akorát to ve verzi 3.0 hodí následně jinou chybovou hlášku, protožer se registruje dvakrát … musel jsem v constructoru datagridu zakomentovat
if ($parent !== null) {
$parent->addComponent($this, $name);
}

základ funguje, ale v javascript konzoli se objevuje stejná chyba jako píše @MasterPK „Uncaught TypeError: this.handleXHR is not a function“

Myslím že problém je v cestě, JS a CSS linkuj pomocí proměnné {$basePath}

např. <link rel="stylesheet" type="text/css" href="{$basePath}/bower_components/bootstrap/dist/css/bootstrap.css">

@nanuqcz složka contributte/www/bower_components/happy/dist/ v tvém projektu neexistuje.
Je tam contributte/www/bower_components/happy/src/

V tý consoly ti to ty chyby vypisuje. Chybí ti tam bootstrap-select. V projektu ho nemáš.

Tak vypadá to, že jakoukoli verzi 5.* rozjedu bez problémů.

Verzi 6.* ale ne. Jakto?

Pro kterou verzi je psaná dokumentace na https://contributte.org/…te/datagrid/ ?

EDIT: Tak dokumentace na webu je pro datagrid verzi 6 (která nejde rozjet). Dokumentace k verzi 5, kterou lze nalézt na githubu, zase není kompletní (chybí např. základní instrukce k instalaci).

Samotné Demo datagridu běží taky na verzi 5. Což lze poznat třeba z datagrid.js suboru, které demo aplikace načítá (demo vs verze 6)

Editoval nanuqcz (10. 12. 2019 13:17)