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