ublaboo/datagrid – big edit se selectem

cafesk8
Člen | 103
+
0
-

Zdravím,

vytvořil jsem si pěkně funkční datagrid s big-inline editací.
Potřeboval bych po kliknutí na „edit“ v jednom sloupečku data vybírat ze selectboxu namísto je psát ručně jako text. Něco jako možnosti pro sloupec, kde vyberu jednu z definovaných „options“ a poté uložím.

Koukám že u small-inline editace něco takového je, ale já bych to potřeboval při editaci celého řádku.

.....

		$grid = new DataGrid($this, $name);
		$grid->setDataSource($this->myRepository->findAll());
		$grid->addColumnText('input_price', 'Vstup')
			->setSortable()
			->setFilterText('input_price');
		$grid->addColumnText('output_price', 'Výstup')
			->setSortable()
			->setFilterText('output_price');
		$grid->addColumnText('type', 'Typ')
			->setSortable()
			->setFilterText('type');

.....
		$grid->addInlineEdit()
			->onControlAdd[] = function($container) {
				$container->addText('input_price', '');
				$container->addText('output_price', '');
				$container->addText('type', ''); /// zde bych potřeboval něco jako addSelect(array(1 => 'one', 2 => 'two' ));
			};

Nemáte s tím někdo zkušenosti nebo nenavedete mě správným směrem?

Editoval cafesk8 (27. 11. 2018 15:59)

Honza.Mottl
Člen | 104
+
0
-

pokud se nedaji udelat selecty ze serverove strany, tak bych se to snazil obejit v JavaScriptu:

  1. nastavil bych si do inputu data atribut data-my-select abych takovy input poznal
  2. do data atrtibutu data-select-options bych nastavil options
  3. pri doruceni snippetu bych dal input na hidden a podle neho bych vytvoril select
  4. stejne pri kliknuti na Add bych to udelal podobne jako ve 3)
  5. na udalost change bych vzdy odzrcadlil hodnotu ze selectu do hidden inputu

Rekl bych, ze by to tak mohlo jit. Datagrid u inputu prestavi class. Pokud ho potrebujes nastavit, tak je treba k tomu pouzit data atribut a prestavit si to v Javascriptu.

//
// It's necessary to set data-my-select attribute in your PHP addInlineEdit() and addInlineAdd() functions
//
function createMySelect(el) {
    var options = $(el).attr('data-select-options');
    var selectEl; // vytvorit select s pouzitim options
    // selectEl = ...
    $(el).after(selectEl);
    $(el).setClass('hidden');
}

// call this code during page initialization
// all inputs having data-my-select are processed
//
$('a[data-datagrid-toggle-inline-add="true"]').click(function () {
    // inputs used for new records
    $('tr.datagrid-row-inline-add td.datagrid-inline-edit input[data-my-select]').each(function () {
        // you can set class or data attributes here
        createMySelect(this);
    });
});

$('muj select').change(function () {
    // odzrcadlit zmeny do inputu
});

$.nette.ext('datagrid.handling', {
    success: function(payload) {
        if (payload._datagrid_inline_editing) {
            $('td.datagrid-inline-edit input[data-my-select]').each(function () {
                createMySelect(this);
            });
        }
    }});