DataGrid: Nefungující přechod (animace) při zobrazení/skrývání řádky (Bootstrap 4.5.3)
- stepan
- Člen | 1
Kód níže funguje téměř úplně jak má – kliknu na „Toggle
expand“ a zobrazí se řádky pod řádkem obsahující toto tlačítko (pokud
tam jsou řádky bez tohoto tlačítka). Problém je, že se neukáže
animace – postupné zasouvání nebo vysouvání skrytých řádků (hodí se
pro přehlednost). Pokud stejné Bootstrap třídy použiju na stejné stránce
mimo DataGrid, animace je v pořádku. Vypadá to, že Bootstrap samotnou
animaci provádí nastavením style="height: ... px"
. To se děje
i v DataGridu – vidím to sice v dev-tools v prohlížeči, ale řádky
se zasouvají a vysouvají skokově.
$grid->addColumnText('expand', 'Expand')
->setRenderer(function (MyEntity $item) {
if (/** podmínka zjišťující, jestli je řádek skrytý detail */) {
return '';
} else { // řádek je master - obsahuje tlacitko "Toggle expand"
$this->masterIndexBtn++;
$button = Html::el('button');
$button->setAttribute('type', 'button')
->setAttribute('class', 'btn btn-primary btn-sm')
->setText('Toggle expand')
->setAttribute('data-toggle', 'collapse')
->setAttribute('data-target', ".masterIndex-{$this->masterIndexBtn}")
->setAttribute('aria-expanded', 'false');
return $button;
}
});
$grid->setRowCallback(function (MyEntity $item, Html $tr) {
) {
if (/** podmínka zjišťující, jestli je řádek skrytý detail */) {
$tr->setAttribute('class', "collapse masterIndex-{$this->masterIndex}");
$this->detailIndex++;
} else { // řádek je master - obsahuje tlacitko "Toggle expand"
$this->detailIndex = 0;
$this->masterIndex++;
}
});
Vypadá to tedy, že DataGrid interně nastavuje výšku řádků s
!important
, která pak nejde změnit.
Napadlo mě, že v setRowCallback bych mohl třeba nahradit $tr obalující
div a třídy collapse' a 'masterIndex-{$this->masterIndex}
dát
na ni. Nicméně to nejde, jelikož následující kód nemá žádný efekt
(ani jedna verze):
$grid->setRowCallback(function (MyEntity $item, Html $tr) {
$tr = Html::el('p')->setText('test');
});
$grid->setRowCallback(function (MyEntity $item, Html $tr) {
$tr->removeChildren();
});
Máte někdo nápad, co s tím? Animaci bych rád zachoval, aby byla tabulka přehlednější. Předem díky.