Parent / Child Table View Same Page?

[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

[dlee]

Anyone ?

[jsetzer]

Would be a lot of work, I'm afraid.

[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 2231 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 2231 times

chrome_EuComGVQmS.png (16.53 KiB) Viewed 2231 times

Right now I don't have any good solution. Hopefully others have.

[dlee]

Thanks jsetzer for trying to help. Yes, hopefully someone has a solution.
TD

[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.

[dlee]

jsetzer can you explain how you did what you did in the gif you posted?

Thanks,
TD

[jsetzer]

1. In hooks/TABLENAME-tv.js I have added a <div/> using jQuery as a placeholder for the children tabs and named it TABLENAME-children
2. 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.
3. 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.
4. 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();
  };
};

[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');
	})
})

[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 2043 times

2 (2).png (59.17 KiB) Viewed 2043 times

3 (2).png (87.96 KiB) Viewed 2043 times

thanks again

[pbottcher]

Hi,

glad it works.

Maybe you can post the code you are using, so that might be also useful for others.

[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');
	})
}