Custom DataTable Data

78 views
Skip to first unread message

Anderson Florencio

unread,
Dec 16, 2015, 1:13:42 PM12/16/15
to ZnetDK
Hello, I wonder how to load data from a datatable dynamically according to a parameter sent from view?

Pascal Martinez

unread,
Dec 17, 2015, 4:47:16 PM12/17/15
to ZnetDK
Hello Anderson,

Please, tell me more, I'm not sure to understand your need.

If you just want to filter dynamically the content of a zdkdatatable widget, call its filterRows method in JavaScript from your event handler.

var filterValue = 'my value';
$
('#mytable').zdkdatatable('filterRows',filterValue);

In the PHP controller action specified for the data-zdk-action HTML5 attribute, read the search_criteria POST parameter to get the filter value:

$request = new \Request();
$filterValue
= $request->search_criteria;

Regards,

Pascal MARTINEZ

Anderson Florencio

unread,
Dec 18, 2015, 9:50:00 AM12/18/15
to ZnetDK
In fact I have a view with a datatable $ (# myTable1) and there in Div Actions put a button to open a dialog showing in a datatable $ (# mytable2) data regarding the selected line in $ (# myTable1).

By exmplo:

I have in a datatable an Event list, and when I click the button in Div Actions "Show Event Cost", it opens a dialog with a datatable showing the cost of the selected event.

Pascal Martinez

unread,
Dec 19, 2015, 12:40:21 PM12/19/15
to ZnetDK
Hello Anderson,

OK, I understood your need.
Unfortunately, it's not so easy to develop with the current version 1.1 of ZnetDK.
The good new is I've published the patch version 1.11 of ZnetDK to make your need easier to develop, waiting for the release of the next version 1.2.

So, you can download this patch from the download page (button "Télécharger") and then follow the procedure below to check whether the result is suitable for your need. 

To display a view when you click on your "Show event cost" action bar button and then, to show another datatable (#myTable2) according to the selected row of the first datatable (#myTable1), you can do as explained below: 
1) Add a JavaScript handler for the click event of your "Show event cost" button:
- Get the selected row data from the main datatable (#myTable1): to do so, call the getSelection method.
- From the selected row, extract the relevant criteria and pass them to the second datatable (#myTable2) : for that, initialize the second datatable with the filterCriteria option if the datatable is created for the first time, otherwise call the filterRows method if the datatable already exists.
2) Add a JavaScript handler for the 'dataloaded' event triggered by the zdkdatatable widget when its rows are loaded. In this handler, displays the dialog that contains the secondary datatable (#myTable2).  

To illustrate this use case, here is an example based on the CRUD demo that can be downloaded from the ZnetDK website.
The controller action that is called to load the 2 datatables is "democrudctrl:data" (see the data-zdk-action attribute).

Below the code of the view:

<!-- Actions bar -->
<div id="crud_bar" class="zdk-action-bar">
   
<!-- Action buttons -->
   
<button class="zdk-bt-custom open" data-zdk-icon="ui-icon-gear">Open dialog</button>
</div>
<!-- Datatable -->
<div id="myfirsttable" class="zdk-datatable zdk-synchronize" title="products" data-zdk-action="democrudctrl:data" data-zdk-paginator="10" data-zdk-columns='[
     {"field":"name", "headerText": "Name", "sortable":true},
     {"field":"part_number", "headerText": "Part number", "sortable":true},
     {"field":"description", "headerText": "Description", "sortable":true},
     {"field":"price", "headerText": "Price", "sortable":true}]'
>
</div>
<!-- form dialog -->
<div id="myzdkmodal" class="zdk-modal" title="My modal dialog" data-zdk-width="600px">
   
<p><b>Selected product:</b> <span class="part_number"></span> - <span class="product_name"></span></p>
   
<p><b>Searched word:</b> <span class="searched_word"></span></p>
   
<div id="myothertable" title="related products" data-zdk-action="democrudctrl:data" data-zdk-paginator="3" data-zdk-columns='[
     {"field":"name", "headerText": "Name", "sortable":true},
     {"field":"part_number", "headerText": "Part number", "sortable":true},
     {"field":"description", "headerText": "Description", "sortable":true},
     {"field":"price", "headerText": "Price", "sortable":true}]'
>
   
</div>
</div>

<script>
    $
(document).ready(function(){
       
// Event handler for the button click
        $
("#crud_bar button.open").click(function() {
           
var selections = $('#myfirsttable').zdkdatatable('getSelection');
           
if (selections.length === 1 && selections[0]) {
               
var firstWord = selections[0].name.slice(0,selections[0].name.indexOf(" "));
                $
('#myzdkmodal span.part_number').text(selections[0].part_number);
                $
('#myzdkmodal span.product_name').text(selections[0].name);
                $
('#myzdkmodal span.searched_word').text(firstWord);
               
if ($('#myothertable').hasClass('pui-datatable')) {
                   
// The datatable has been previously instanciated
                    $
('#myothertable').zdkdatatable('filterRows', firstWord);
               
} else {
                   
// The datatable is not yet instanciated
                    $
('#myothertable').zdkdatatable({filterCriteria:firstWord});
               
}
           
} else {
                znetdk
.message('warn','Open the dialog','Please select a row first!');
           
}
       
});
       
       
// Handler of the datatable 'dataloaded' event
        $
('#myothertable').on('zdkdatatabledataloaded', function() {
            $
('#myzdkmodal').zdkmodal('show');            
       
});
   
});
</script>



You can see in this example that the first word of the selected product name is used as a filter criterium to load the rows of the second datatable.
Obviously, in your case, you will rather use the identifier of the selected row to filter the content of the second datatable.

Tell me if this sample of code is helpful for developing what you wish.

Regards,

Pascal MARTINEZ

Anderson Florencio

unread,
Dec 21, 2015, 1:28:01 PM12/21/15
to ZnetDK
Hello Pascal, thank you for your help. Problem solved, the creation of filterCriteria option in the widget datatable made it easier this work hehehe

Pascal Martinez

unread,
Dec 22, 2015, 4:28:58 PM12/22/15
to ZnetDK
Great!
Reply all
Reply to author
Forward
0 new messages