CRUD Datatable inside other CRUD Datatable.

[Everson Nino]

Hi Pascal.

Is it possible to open a CRUD datatable from within another?  

Ex.:

Double click on a datatable, open another datatable with foreign key records.

best regards  

[Pascal Martinez]

Hello Nino,

Here is a post on this forum that could help you to develop your functionality: https://groups.google.com/g/znetdk/c/sq8ispGGscA/m/HMgqTIFwCAAJ

To go a little further, you can catch the double click events from your main datatable by declaring a jQuery event handler as illustrated below:

<script>

// ...

// Double click event handler on datatable rows...

$('#my_main_datatable').on('zdkdatatablerowdblclicked', function(datatableObject, rowData) {

    alert('Row with ID=' + rowData.id + ' has been double clicked');

});

// ...

</script>

  

In this event handler, you can for example open a modal dialog (as explained in the post indicated above) that displays the second datatable and refresh its rows according to the ID of the  main datatable's row when it is double clicked.

It is also possible to display the second datatable in the same view by hiding it by default and next by showing it only when a row is double clicked on the main datatable.

Finally, as specified in the post mentioned above, the rows displayed in the second datatable can be filtered by initializing the filterCriteria option when it is instantiated or later calling the filterRows method.

If my answer was not enough, I will try to post code of a view and a controller to illustrate my point.

Yours,

Pascal

ZnetDK developer 

[Everson Nino]

I had already seen Anderson's post, and I did as explained. 

My difficulty is to implement the modal dialog action bar on the second datatable.

class "zdk-action-bar" conflicts with the first datatable.

I created 3 .puibutton buttons (new, edit and delete). 

for the "New" button, I created a form.

<form class="zdk-form" data-zdk-action="endclientesctrl:save" data-zdk-datatable="myothertable"> 

In jQuery

$('#novo').puibutton({icon: 'fa-plus'});

$('#novo').puibutton({click: function() {

$('#entrega-dlg').zdkmodal('show');

var selections = $('#clientes-table').zdkdatatable('getSelection');

var firstWord = selections[0].id.slice(0);

$('#recebe').val(firstWord);

}

        });

Pass the foreign key through the <input id="recebe"...  

So far all ok.

Save button, I haven't done it yet, but I believe I won't have a problem. 

The delete button I can't call the action_delete function from the controller via jQuery . 

Grateful for everything.

Nino 

[Pascal Martinez]

Hi Nino,

 

Here is an minimal example of a view that displays a first datatable.
When a row is double-clicked, a modal dialog is shown with an embeded second datable with rows matching the datatable's row that has been double-clicked.

<!-- First datatable -->

<div id="first_datatable" class="zdk-datatable" title="First"

        data-zdk-action="examplectrl:datafirst"

        data-zdk-columns='[{"field":"first_id", "headerText": "First ID"},

                {"field":"label", "headerText": "Label"}]'>

</div>

<!-- Modal dialog with second datatable -->

<div id="my_modal" class="zdk-modal" data-zdk-width="360px" title="Second datatable in a modal">

    <div id="second_datatable" class="zdk-datatable" title="Second"

        data-zdk-action="examplectrl:datasecond"

        data-zdk-columns='[{"field":"first_id", "headerText": "First ID"},

                {"field":"second_id", "headerText": "Second ID"},

                {"field":"label", "headerText": "Label"}]'>

    </div>

</div>

<script>

    $('#first_datatable').on('zdkdatatablerowdblclicked', function(datatableObject, rowData) {        

        if ($('#second_datatable').hasClass('pui-datatable')) {

            // The datatable has been previously instanciated

            $('#second_datatable').zdkdatatable('filterRows', rowData.first_id);

        } else {

            // The datatable is not yet instanciated

            $('#second_datatable').zdkdatatable({filterCriteria: rowData.first_id});

        }

        $('#my_modal').zdkmodal('show');

    });

</script>

And the PHP code of the controller actions called by the two datatables :

<?php

namespace controller;

class ExampleCtrl extends \AppController {

     

    static protected function action_datafirst() {

        $response = new \Response();

        $response->rows = [

            ['first_id' => 1, 'label' => 'One'],

            ['first_id' => 2, 'label' => 'Two'],

            ['first_id' => 3, 'label' => 'Three']

        ];

        $response->success = true;

        return $response;

    }

    

    static protected function action_datasecond() {

        $request = new \Request();

        $index = $request->search_criteria;

        $allRows = [

            1 => ['A', 'B', 'C'],

            2 => ['D', 'E', 'F'],

            3 => ['G', 'H', 'I']

        ];

        $rows = [];

        if (key_exists($index, $allRows)) {

            foreach ($allRows[$index] as $key => $value) {

                $rows[] = ['first_id' => $index, 'second_id' => $key + 1,  'label' => $value];

            }    

        }

        $response = new \Response();

        $response->rows = $rows;

        $response->success = true;

        return $response;

    }

}

Hoping you'll enjoy,

Pascal