DataGrid: Nefungující přechod (animace) při zobrazení/skrývání řádky (Bootstrap 4.5.3)

před 2 lety
stepan
Člen | 1
+
0
-

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.