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

Ahoj,

setkal se někdo s následující situací?

Mám nette framework, ublaboo/datagrid a ORM Doctrine. V datagridu mám přes 15 sloupečků, 5 je defaultně zobrazeno a zbytek defaultně skryto. Nicméně, když chci vyfiltrovat dle dataRange a zároveň dle typu položky v rámci filterSelect, tak se mi občas děje to, že server spadne. Server je na gigaserver.cz v rámci klasického webhostingu Easy. Vždy mě to na 10 minut zablokuje a pak to zase funguje dál. Stane se mi to vždy alespoň 1-krát denně. Nesetkal se s tím už někdo?
Tohle je část mého kodu:

$grid = new Datagrid($this, $name);
        $grid->setTranslator($this->translator);
        $grid->setItemsPerPageList([10, 50, 100, 250, 500], false);
        $grid->setColumnsHideable();
        $grid->setDefaultPerPage(10);
        $grid->setStrictSessionFilterValues(false);
        $grid->setTemplateFile(DIR_APP . DS . 'Templates/Datagrid/templates/custom.latte');

        $grid->setDataSource(new DoctrineDataSource($this->queryBuilder, 'id'));
        $grid->setDefaultSort(['accountDate' => 'DESC']);
$grid->addColumnText('type', $this->translator->translate('forms.type'))
            ->setRenderer(function (AllData $allData) {
                return $this->translator->translate('texts.allDataType.' . $allData->getType());
            })
            ->setSortable()
            ->setFilterSelect([
                '' => $this->translator->translate('texts.-all-'),
                AllData::TYPE_CASH_REGISTER_ITEM => $this->translator->translate('texts.allDataType.' . AllData::TYPE_CASH_REGISTER_ITEM),
                AllData::TYPE_SAFE_ITEM => $this->translator->translate('texts.allDataType.' . AllData::TYPE_SAFE_ITEM),
                AllData::TYPE_FIX_ITEM => $this->translator->translate('texts.allDataType.' . AllData::TYPE_FIX_ITEM)
            ])
            ->setCondition(function (QueryBuilder $qb, $value) {
                $qb->andWhere('allData.type = :type')
                    ->setParameter('type', $value);
            });

$grid->addColumnDateTime('accountDate', $this->translator->translate('forms.accountDate'))
            ->setRenderer(function (AllData $allData) {
                return $allData->getAccountDate()?->format('d.m.Y');
            })
            ->setSortable()
            ->setSortableCallback(function (QueryBuilder $qb, $sort) {
                if ($sort['accountDate']) {
                    $qb->addSelect('COALESCE(cri.accountDate, si.accountDate, fi.accountDate) AS HIDDEN orderedDate')
                        ->orderBy('orderedDate', $sort['accountDate']);
                }
            })
            ->setFilterDateRange()
            ->setCondition(function (QueryBuilder $qb, ArrayHash $value) {
                if ($value->offsetExists('from') && empty($value->offsetGet('from'))) {
                    $qb->andWhere('((cri.accountDate <= :dateTo AND cri.id IS NOT NULL) OR
                                    (si.accountDate <= :dateTo AND si.id IS NOT NULL) OR
                                    (fi.accountDate <= :dateTo AND fi.id IS NOT NULL))')
                        ->setParameter('dateTo', new DateTime(str_replace(' ', '', $value->offsetGet('to'))));
                } elseif ($value->offsetExists('to') && empty($value->offsetGet('to'))) {
                    $qb->andWhere('((cri.accountDate >= :dateFrom AND cri.id IS NOT NULL) OR
                                    (si.accountDate >= :dateFrom AND si.id IS NOT NULL) OR
                                    (fi.accountDate >= :dateFrom AND fi.id IS NOT NULL))')
                        ->setParameter('dateFrom', new DateTime(str_replace(' ', '', $value->offsetGet('from'))));
                } elseif ($value->offsetExists('from') && $value->offsetExists('to')) {
                    $qb->andWhere('((cri.accountDate BETWEEN :dateFrom AND :dateTo AND cri.id IS NOT NULL) OR
                                    (si.accountDate BETWEEN :dateFrom AND :dateTo AND si.id IS NOT NULL) OR
                                    (fi.accountDate BETWEEN :dateFrom AND :dateTo AND fi.id IS NOT NULL))')
                        ->setParameter('dateFrom', new DateTime(str_replace(' ', '', $value->offsetGet('from'))))
                        ->setParameter('dateTo', new DateTime(str_replace(' ', '', $value->offsetGet('to'))));
                }
            });

Děkuji za případnou radu.

Editoval oorac (29. 1. 2024 8:41)

Doporučuji vytvořit nativní formulářový prvek přes addDateTime().

Editoval radas (19. 2. 2024 12:18)

DataGrid::setDataSource(new ApiDataSource(…))

matronator napsal(a):

Pavel Janda napsal(a):

A ještě jedna věc: přibyl nový datasource: ApiDataSource. Je experimentální a netestoval jsem ho. Pokud ho někdo využije, piště, co přidat/zlepšit. Moc tam toho asi nebude. ApiDataSource prostě forwarduje filtrování, sortění a pod na remote api.

Sorry, vim že je to starý příspěvek, ale mám dotaz k tomu ApiDataSource. Chci přidat filtr, který nebude filtrovat v databázi, ale pošle tu zadanou hodnotu na remote API a z té se mi pak vrátí objekt, ze kterého bych chtěl vytáhnout jednu property a tu následně použít pro filtrování výsledků datagridu.

Je tam asi víc věcí, které mi teď ještě nejsou úplně jasné jak udělat, ale prvně jsem se zasekl na tom, že když chci zavolat $grid->setFilterText(function ($dataSource, $item)), tak jak mám nastavit tomu $dataSource URL té API, která u ApiDataSource lze nastavit pouze v konstruktoru?

Od toho je větev next, za pár chvil budeme mergovat do masteru. Z té pak vznikne po otestování verze 7 – bez jQuery a komplet přepsaným JS. Navrhuji vzít zatím pro testovací účely tuto verzi

iru napsal(a):

iru napsal(a):

Felix napsal(a):

👋 Pripravujeme novou verzi datagridu. S podporou PHP 8, bootstrap 5 a prepsanym javascriptem. Postupne muzete testovat v next vetvi.

https://github.com/…id/pull/1060
https://github.com/…ton/pull/168

Jak prosím nainstaluji? Mám:

	"require": {
		"php": ">= 8.0",
		"nette/application": "^4.0",
		"nette/bootstrap": "^3.2 || ^4.0",
		"nette/caching": "^3.2 || ^4.0",
		"nette/database": "^4.0",
		"nette/di": "^3.2 || ^4.0",
		"nette/forms": "^4.0",
		"nette/http": "^4.0",
		"nette/mail": "^4.0",
		"nette/php-generator": "^4.0",
		"nette/robot-loader": "^4.0",
		"nette/safe-stream": "^3.0",
		"nette/security": "^4.0",
		"nette/utils": "^4.0",
		"latte/latte": "^3.0",
		"tracy/tracy": "^2.10 || ^3.0",
		"ublaboo/datagrid": "dev-next"
	},
	"require-dev": {
		"nette/tester": "^2.0"
	},
	"autoload": {
		"psr-4": {
			"App\\": "app/"
		}
	},
	"minimum-stability": "dev"
}

Copy

C:\..........>composer update
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires ublaboo/datagrid dev-next -> satisfiable by ublaboo/datagrid[dev-next].
    - ublaboo/datagrid dev-next requires nette/forms ^3.1.3 -> found nette/forms[v3.1.3, ..., v3.1.x-dev] but it conflicts with your root composer.json require (^4.0).

Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.

Copy

Na serveru mám PHP 8.2, Pokusila jsem se změnit nette/forms ze 4 na 3.1, ale to zase nefungovalo s PHP 8.2. Tak nevím, jak se k tomu datagridu dostat. Když jsem měla Nette 3.2 a PHP 7.2, nefungovalo, tak jsem přešla na nette 4, ale zase mi to nejde :-(
Composer pro nette4 jsem sestavila viz: https://github.com/…ommit/master
Děkuji.

Stále bych ten datagrid chtěla používat a nedaří se mi ho nainstalovat, Nevíte prosím někdo jak zprovoznit na PHP 8 a nette4?

Zdravím,
používám

$grid->addColumnDateTime('datumPlan', 'Datum')->setSortable()->setFilterDateRange();

a potřeboval bych poradit, jak datepicker převést do češtiny. Zkoušel jsem i níže uvedený kod, ale čeština v datepickeru mi funguje jen pokud se nacházím na první straně výpisu

		<script>
			$(document).ready(function()
			{
			  $(':text[data-provide="datepicker"]').datepicker(
			  {
			    language: 'cs'
			  });
			});
		</script>

Dále pak mám dotaz zda existuje nějaká možnost jak tlačítko pro resetování umístit nahoru nad tabulku?

Děkuji

Zdravím…
čistá instalace Nette 3.2.3 a datagrid. Při napojení k databázi se objeví chyba:
Unexpected ‚{else}‘, expecting </a> for element started on line 11 at column 3 (in ‚…/templates/data_grid_paginator.latte‘ on line 12 at column 2)

Nevíte, kde může být chyba ?

Editoval lukyn (14. 6. 2024 14:02)

Infanticide0 napsal(a):

v data_grid_paginator.latte na řádku 12, Latte narazilo na {else} tam, kde čeká konec tagu <a>.

{if $paginator->isFirst()}
	<a class="first btn btn-sm {$btnSecondaryClass} disabled"> TADY
{else}
	<a class="btn btn-sm {$btnSecondaryClass} ajax" href="{$link('page!', ['page' => $paginator->page - 1])}" rel="prev"> TADY
{/if}

Copy

A jak se to da opravit? Kdyz jsem pridal </a> z te casti za {/if}, tak mi to pise

Cannot redeclare block 'icon-arrow-left' (in '.../templates/data_grid_paginator.latte' on line 13 at column 123)

Nemluvě o tom, že se to instaluje pres composer, takze jakakoliv uprava se mi zase zmeni

David Grudl napsal(a):

Zkus v konfiguračním souboru vypnout strictParsing

Díky to mi ten problem vyresilo :)

Hmmm to vyzerá že nič také tam nieje. Ale mohlo by byť.

@pista5 startuješ někde v JS nette.init()
?

@oorac o 6 příspěvků výše na téže stránce…

Zdravím setkal se někdo někdy s tím, že ve sloupečku typu Status se mu sice správně zobrazili tlačítka, ale nejde přepnout? Jakože kliknete a tlačítko zareaguje, ale druhá volba se neobjeví.

Editoval grovik (27. 10. 2024 14:05)

Úplně nejjednodušším způsobem místo HTML entity nbsp bych dal pevnou mezeru Alt+0160 (na Windows). Jinak v šabloně Latte filtr.

Editoval radas (17. 12. 2024 12:44)

Má někdo zkušenosti s využitím Column Status?
Po trošku bojování jsem ho tam dostal. HTML co mi to vygeneruje:

<div class="dropdown">
			<button class="dropdown-toggle btn-sm btn-warning btn btn-xs" type="button" data-toggle="dropdown">
				<i class="fa fa-fa fa-times"></i>
				Soukromá <i class="caret"></i>
			</button>
	<ul class="dropdown-menu">
		<li>

			<a href="/admin/news?newsDatagrid-id=14&amp;newsDatagrid-key=global&amp;newsDatagrid-value=1&amp;do=newsDatagrid-changeStatus" class="ajax dropdown-item" data-datagrid-confirm="Globální položka je vidět na hlavní stránce webu! Pozor na to!">

				Globální
			</a>
		</li>
		<li>

			<a href="/admin/news?newsDatagrid-id=14&amp;newsDatagrid-key=global&amp;newsDatagrid-value=0&amp;do=newsDatagrid-changeStatus" class="ajax dropdown-item">

				Soukromá
			</a>
		</li>
	</ul>
</div>

Na první pohled vypadají v pořádku. Ale po kliknutí se nic nestane, potažmo tlačítko se označí jako nakliknuté, ale nezmění se na žádnou z možností.

Kód pro grid vypadá takhle:

$grid->addColumnStatus('important', 'Important')
            ->addOption(true, 'Důležitá')
                ->setClass('btn-sm btn-warning')
                ->setIcon('fa fa-check')
                ->endOption()
            ->addOption(false,'Běžná')
                ->setClass('btn-sm btn-primary')
                ->setIcon('fa fa-times')
                ->setConfirmation(new StringConfirmation('Skutečně je položka důležitá?'))
                ->endOption()
            ->onChange[] = [$this, 'importantNewsChange'];

Mám jich tam několik a všude se chovají stejně pořád stejně slepá ulička.

@IJVo To nefunguje místo tlačítka se vypíšou jen jedničky a místo nuly nic.
Měl jsem to tak předtím na zkoušku a schválně jsem to zkusil znovu, ale jak jsem psal nefunguje.

Možná to bude tím, že máš Bootstrap5? V Datagrid chybí -bs, je nutné si na to udělat fork/composer patch.

Pavel Kravčík napsal(a):

Možná to bude tím, že máš Bootstrap5? V Datagrid chybí -bs, je nutné si na to udělat fork/composer patch.

Hmm proč by to mělo vadit… potažmo proč by to nemělo generovat běžné věci tak aby fungovali… myšleno nechci po něm nějakou BS nádheru, ale prostě jen vygnerovat grid. Když tam nebudou BS classy tak se vygeneruje prostě rozbije, ale nebude se to generovat do nesmyslu. Nebo jo?
Nevím to se ptám, protože mi to logicky hapruje.

grovik napsal(a):

Pavel Kravčík napsal(a):

Možná to bude tím, že máš Bootstrap5? V Datagrid chybí -bs, je nutné si na to udělat fork/composer patch.

Hmm proč by to mělo vadit… potažmo proč by to nemělo generovat běžné věci tak aby fungovali… myšleno nechci po něm nějakou BS nádheru, ale prostě jen vygnerovat grid. Když tam nebudou BS classy tak se vygeneruje prostě rozbije, ale nebude se to generovat do nesmyslu. Nebo jo?
Nevím to se ptám, protože mi to logicky hapruje.

Protože byl vyvíjen v BS4. Pokud použiješ BS5, tak nebude fungovat správně.

data-toggle="dropdown"
data-bs-toggle="dropdown"

Pánové děkuji mnohokrát za správné nakopnutí :D díky!

->setTemplate(__DIR__ .'/templates/column_status.latte')
\-- ->nastavil jsem si vlastní


/--html
{var $activeOption = $status->getCurrentOption($row)}

<div class="dropdown">
	{if $activeOption}
		{if $status->shouldBeRendered($row)}
			<button class="dropdown-toggle {$activeOption->getClass()} {$activeOption->getClassSecondary()}" type="button" data-bs-toggle="dropdown">
				{if $activeOption->getIcon()}<i class="{$iconPrefix}{$activeOption->getIcon()}"></i> {/if}
				{$activeOption->getText()|translate} <i n:if="$status->hasCaret()" class="caret"></i>
			</button>
		{else}
			{$activeOption->getText()|translate}
		{/if}
	{else}
		{$row->getValue($status->getColumn())}
	{/if}
	<ul class="dropdown-menu">
		<li n:foreach="$status->getOptions() as $option">
			{var $confirmationDialog = $option->getConfirmationDialog($row)}

			<a
				class="{$option->getClassInDropdown()}"
				n:href="changeStatus!, id => $row->getId(), key => $status->getKey(), value => $option->getValue()"
				{if $confirmationDialog}
					data-{Ublaboo\DataGrid\Column\Action::$dataConfirmAttributeName}={$confirmationDialog}
				{/if}
			>
				{if $option->getIconSecondary()}<i class="datagrid-column-status-option-icon {$iconPrefix}{$option->getIconSecondary()}"></i> {/if}
				{$option->getText()|translate}
			</a>
		</li>
	</ul>
</div>

Takhle to začalo fungovat… takže asi to ještě přiohnu (teď něco pro vyhledávače)
Tímhle se vyřešil problém Nette a Datagridu od Contributte neboli jak nastavit v Bootstrapu 5, Ublaboo datagridu nastavit ColumnStatus.

Pavel Kravčík napsal(a):

My to děláme pomocí patche. Hodil jsem ho veřejně, třeba Ti pomůže. Je tam ještě pár věcí.

https://github.com/…tagrid.patch

Bezva!