Page 1 of 1
Parent / Child Table View Same Page?
Posted: 2022-03-20 21:27
by dlee
What I would like is to have the table view of parent records and table view of child records on the same page. Then when you click on a parent record, the the list of records in the child table view would update to show the child records for the parent selected.
Is this possible?
If it is, how would I do accomplish this?
See attached file to see image of what I am after.
Thanks,
TD
Re: Parent / Child Table View Same Page?
Posted: 2022-03-21 15:12
by dlee
Anyone ?
Re: Parent / Child Table View Same Page?
Posted: 2022-03-21 16:34
by jsetzer
Would be a lot of work, I'm afraid.
Re: Parent / Child Table View Same Page?
Posted: 2022-03-21 17:20
by jsetzer
I have tried.
The problem is
not embedding Detail View's Children-Tabs into Table View for the selected record, see screenrecording:
- ezgif.com-gif-maker.gif (244.16 KiB) Viewed 4039 times
But for me the problem is passing over the Table View selection and filters into the child's details, for example when creating new children:
- chrome_mjXTKhZfpO.png (23.43 KiB) Viewed 4039 times
- chrome_EuComGVQmS.png (16.53 KiB) Viewed 4039 times
Right now I don't have any good solution. Hopefully others have.
Re: Parent / Child Table View Same Page?
Posted: 2022-03-21 19:30
by dlee
Thanks jsetzer for trying to help. Yes, hopefully someone has a solution.
TD
Re: Parent / Child Table View Same Page?
Posted: 2022-03-21 20:15
by pbottcher
Hi,
actually jsetzer shows how to do it. As I don't want to take the credit for others, I just add the trick to show the preselected reference.
Add to the DOM a hidden input field with name="SelectedID". Then, on the selection of the row from the top table, set the SelectedID as the data-id value. If you click on add new it should use that value to populated the selection.
Re: Parent / Child Table View Same Page?
Posted: 2022-03-22 03:42
by dlee
jsetzer can you explain how you did what you did in the gif you posted?
Thanks,
TD
Re: Parent / Child Table View Same Page?
Posted: 2022-03-22 07:17
by jsetzer
- In
hooks/TABLENAME-tv.js I have added a <div/> using jQuery as a placeholder for the children tabs and named it TABLENAME-children
- Then I have added a button* to the first cell of each row of the table view.
* Due to an agreement with Ahmed I must not show how I did this because I'm using a commercial product. Giving help based on commercial products is not welcomed in the free community area of this forum. Just add buttons to each row by using Javascript.
- On button-click I'm using
.load-function of jQuery and fetch server-data from parent-children.php, which is the built-in script for retrieving children-tabs in the Detail View. I'm just re-using the detail-view code in the table view.
- Parameters for loading the children-tabs:
- ParentTable: AppGini.currentTableName()
- Operation: 'show-children'
- SelectedID: YOURCURRENTPRIMARYKEYHERE
If there are problems, check the requests (payload) and responses in the network tab of your browser's developer tools.
Here is some code excerpt inside document.ready:
Code: Select all
jQuery("<div/>").attr("id", `${AppGini.currentTableName()}-children`).addClass("children-tabs hidden").insertAfter(jQuery("table"));
// YOUR_FUNCTION_FOR_ADDINGBUTTONS
// YOUR_BUTTON_ONCLICK_HANDLER should execute:
function(pk) {
jQuery(`#${AppGini.currentTableName()}-children`).load("parent-children.php", { ParentTable: AppGini.currentTableName(), Operation: 'show-children', SelectedID: pk }, function() {
jQuery(`#${AppGini.currentTableName()}-children`).hide().removeClass("hidden").fadeIn();
};
};
Re: Parent / Child Table View Same Page?
Posted: 2022-03-22 17:53
by pbottcher
Hi,
here would be my proposal without an additional commercial product.
Code: Select all
$j(function(){
const tablename=AppGini.currentTableName();
$j('body').append('<input name="SelectedID" value="1" type="hidden">');
$j('[data-table="'+tablename+'"]').parent('.row').append('<div id="'+tablename+'-children"></div>');
btn='<button type="button" class="childtable btn btn-sm" title="Show child table"><i class="glyphicon glyphicon-search"></i></button>'
$j('[data-table="'+tablename+'"] tbody tr td:first-child input').after(btn);
$j('[data-table="'+tablename+'"] tbody tr td:first-child').attr('nowrap','');
$j('.childtable').on('click',function() {
id=$j(this).parents('tr').attr('data-id');
$j('[name="SelectedID"]').val(id);
post('parent-children.php', {ParentTable: tablename,SelectedID: id,Operation: 'show-children'},tablename+'-children');
})
})
Re: Parent / Child Table View Same Page?
Posted: 2022-03-31 10:25
by xbox2007
thanks a lot Mr. pböttcher
i already user your code and make some change NOW its look like that
- 1 (2).png (49.51 KiB) Viewed 3851 times
- 2 (2).png (59.17 KiB) Viewed 3851 times
- 3 (2).png (87.96 KiB) Viewed 3851 times
thanks again
Re: Parent / Child Table View Same Page?
Posted: 2022-04-01 14:23
by pbottcher
Hi,
glad it works.
Maybe you can post the code you are using, so that might be also useful for others.
Re: Parent / Child Table View Same Page?
Posted: 2022-04-01 22:18
by xbox2007
this my code on table-tv.js
Code: Select all
$j(function(){
$j('#NoFilter').after('<button class="btn btn-info btn-lg" type="button" onclick="myFunction()" id="Show_Child"><i class="glyphicon glyphicon-search"></i> Show Child </button>');
});
function myFunction() {
const tablename=AppGini.currentTableName();
$j('body').append('<input name="SelectedID" value="1" type="hidden">');
$j('[data-table="'+tablename+'"]').parent('.row').append('<div id="'+tablename+'-children"></div>');
btn='<button type="button" id="btn" class="childtable btn btn-primary btn-sm" title="Show child table"><i class="glyphicon glyphicon-search"></i></button>'
$j('[data-table="'+tablename+'"] tbody tr td:first-child input').after(btn);
$j('[data-table="'+tablename+'"] tbody tr td:first-child').attr('nowrap','');
$j('.childtable').on('click',function() {
id=$j(this).parents('tr').attr('data-id');
$j('[name="SelectedID"]').val(id);
post('parent-children.php', {ParentTable: tablename,SelectedID: id,Operation: 'show-children'},tablename+'-children');
})
}