ublaboo/datagrid Inline edit – nechce se nechat potvrdit a redraw snipet

Isigarek

Dobrý den,
použil jsem datagrid abych mohl fungovat s více daty, kde se mě to zrovna hodí jenže potřebuji možnou inline úpravu řádku. Pomocí composeru jsem si nainstaloval datagrid vše nastavil dle dokumentace na gitu a teď máme problém s tím, že se neodešle požadavek po kliknutí na tlačítko save/cancel.

Kód vytváření datagridu:

public function createComponentSimpleGrid($name)
    {
        $grid = new DataGrid($this,$name);
        $grid->setPrimaryKey("ID");
        $grid->setDataSource($this->template->data);

        $grid->getInlineEdit()->onCustomRedraw[] = function() use ($grid) {
            $grid->redrawControl();
        };

        $grid->addColumnText("ID","ID");
        $grid->addColumnText("name","Product name");
        $grid->addColumnText("price_1","Price 1");
        $grid->addColumnText("price_2","Price 2");
        $grid->addColumnText("price_3","Price 3");
        $grid->addColumnText("price_4","Price 4");

        $grid->addInlineEdit()
            ->onControlAdd[] = function($container){
            $container->addText('ID','ID');
            $container->addText('name','Product name');
            $container->addText('price_1','Price 1');
            $container->addText('price_2','Price 2');
            $container->addText('price_3','Price 3');
            $container->addText('price_4','Price 4');
        };
        $grid->addInlineAdd()
            ->onControlAdd[] = function($container){
            $container->addText('name','');
            $container->addText('price_1','');
            $container->addText('price_2','');
            $container->addText('price_3','');
            $container->addText('price_4','');
        };

        $grid->getInlineEdit()->onSetDefaults[] = function($container,$item){
            $container->setDefaults([
                'ID' => $item["ID"],
                'name' => $item["name"],
                'price_1' => $item["price_1"],
                'price_2' => $item["price_2"],
                'price_3' => $item["price_3"],
                'price_4' => $item["price_4"],
            ]);
        };

        $grid->getInlineEdit()->onSubmit[] = function($id,$values){
            $this->flashMessage("Test $id");
            $this->redrawControl("flash");
        };
        $grid->getInlineAdd()->onSubmit[] = function($id, $values){
            $this->flashMessage("Add");
            $this->redrawControl("flash");
        };

        $grid->getInlineEdit()->setShowNonEditingColumns();

        return $grid;
    }

Obrázek toho datagridu:
https://image.prntscr.com/image/0PCFxg8NR82SmAGg5WFo-w.png

Pavel Janda

@Isigarek Zkus udělat sandbox-like zip, kde bude tento datagrid např se sqlite DB a pošli do issue na github, mrknu na to. :)

Isigarek

Pavel Janda napsal(a):

@Isigarek Zkus udělat sandbox-like zip, kde bude tento datagrid např se sqlite DB a pošli do issue na github, mrknu na to. :)

Dobře.

Isigarek

@PavelJanda Tak teď jsem udělal pokus na čistém sandboxu a jede to bez problému takže to bude něčím co mám už v projektu. Zkusím tedy zmenšit vše co tam není nutné, jako vypnout knihovny a tak.

Isigarek

Tak jsem zatím na nic nepřišel tak jsem dám další kód, nejspíš jsem jen idiot a nevidím to :/

@layout.latte

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{ifset title}{include title|stripHtml} | {$meta->title->getValue()}{else}{$meta->title->getValue()}{/ifset}</title>
    <meta name="description" content="{$meta->description->getValue()}">
    <meta name="keywords" content="{$meta->keywords->getValue()}">
    <meta name="robots" content="{$meta->robots->getValue()}">
    <link href="{$basePath}/css/selectize.default.css" rel="stylesheet">
    <link href="https://bootswatch.com/cosmo/bootstrap.css" rel="stylesheet">
    <link href="{$basePath}/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <link href="{$basePath}/datagrid/datagrid.css" rel="stylesheet">
    <link href="{$basePath}/datagrid/datagrid-spinners.css" rel="stylesheet">
    <link href="{$basePath}/css/bootstrap-select.css" rel="stylesheet">
    <link href="{$basePath}/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="{$basePath}/happy/happy.css" rel="stylesheet">
    <link href="{$basePath}/css/style.css" rel="stylesheet">
</head>
<body style="max-width:1200px; margin:0 auto;">

{snippet flash}
    {foreach $flashes as $flash}
        <div style="display:none;" class="alert alert-{$flash->type}">{$flash->message}</div>
    {/foreach}
{/snippet}

{block content}
{/block}

<div class="clearfix"></div>
<div class="footer bg-black fg-white padding20" style="padding:10px; margin-top:20px; margin-bottom:20px;">
    <div class="container">
        <a href="https://relisoft.cz" target="_blank">relisoft.cz</a>
    </div>
</div>

{block scripts}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="{$basePath}/js/netteForms.js"></script>
    <script src="{$basePath}/js/nette.ajax.js"></script>
    <script src="{$basePath}/js/main.js"></script>
    <script src="{$basePath}/happy/happy.js"></script>
    <script src="{$basePath}/js/moment.min.js"></script>
    <script src="{$basePath}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{$basePath}/js/bootstrap-select.js"></script>
    {*}DATA GRID{*}
    <script src="{$basePath}/datagrid/datagrid.js"></script>


    <script src="{$basePath}/datagrid/datagrid-spinners.js"></script>
    <script src="{$basePath}/js/bootstrap.js"></script>
    <script>
        $(function () {
            $(".alert").stop().slideDown(500).delay(2500).slideUp(500);
            $.nette.init();
        });
    </script>
{/block}
</body>
</html>

Presenter template file:

{block content}
<div class="container">
    <div class="page-header">
        <h1 n:block="title">{_pages.import.selection.title}</h1>
        <small>#{$filename}</small>
        <p class="help-block">
            Here you can check and edit imported products. Then click to finish button.
        </p>
        <a class="btn btn-primary" href="{link :Admin:Import:default}">Back</a>
        <a class="btn btn-success" href="{link :Admin:Import:default}">Finish</a>
    </div>
    <table>
        <thead>

        </thead>
        <tbody>
        {control simpleGrid}
        </tbody>
    </table>
</div>
{/block}

Isigarek

Tak nakonec jsem využil jednotlivé edit to funguje.