ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: cpopolo on November 03, 2022, 12:54:52 am

Title: How to implement a "details" row in a treeview?
Post by: cpopolo on November 03, 2022, 12:54:52 am
Hi,

I would like to combine two aspects of existing examples:

So my question is, what are the general methods I should use to have a show/hide detail row under any existing detail row in the treeview?  In the treeview example, imagine a + or - sign to show/hide additional details under row 5 or 6.  In other words, at the "detail" level of the treeview, I would like to show additional details as an option.  The additional details should span across the entire with of the paramquery grid.  It might, for example, contain a PDF viewer of an actual bill related to the detail data of the row.

I'm pretty comfortable with the individual examples, I'm just not sure how or where to combine the different elements that would allow for one functionality (additional details) inside of the other (a treeview hierarchy which has details at the lowest level).

Thanks in advance.

P.S. - My profile is "Pro" but I was unable to post this in the Pro area because of an error reported by the forum script.  Can you check my account?

Title: Re: How to implement a "details" row in a treeview?
Post by: Pisga on September 13, 2023, 12:22:05 pm
I have the same question. Is this possibility to combine tree and detail model advantages exists ? Thank you very much
Title: Re: How to implement a "details" row in a treeview?
Post by: paramvir on September 13, 2023, 01:30:18 pm
Sorry for late reply.

Yes, they can be used together and it's quite straightforward.

Add a column to open / close the row details in treegrid colModel.

Code: [Select]
{ title: " ", minWidth: 25, maxWidth: 35, type: "detail" },

add detailModel in treegrid options.

You can load the detailModel data locally or remotely.
Title: Re: How to implement a "details" row in a treeview?
Post by: Pisga on September 14, 2023, 06:28:02 pm
Thank you, but my question is not exact the same.
For details model, we must click on details button, to see next level only
as in this example
<a href="/pro/demos62/nesting_local" class="acc-label">Nested grids</a>
I click on Africa, opens Northen and Central Africa, click on Northen Africa, see all it's countries
For tree model , the grid loads and show all below levels
as here
<a href="/pro/demos62/treegrid" class="acc-label">Features</a>
Opens with all data, show all folders, sub folders and files for all levels. When click on one folder, open/close all it's subfolders on all levels
I can not use tree model for my current work, because on every level I have different data and tree model for the same data

I want click on first level and open data for all it's below levels as in Tree
For example, if we use  Continent->Sub Continent -> Country
I want by one click on Africa see both Northen and Central Africa SubContinents with there Countries (as in Tree)
But on every level there own details as in details model
 
 - when click button before Africa, openes immediately:
<button>  Africa   col1_1 col1_2 col1_3
             <>Norther Africa    col2_1, col3_1, col4_1
                      <>Aljerial  col3_1, col3_2
It it possible ?
Thank you
Title: Re: How to implement a "details" row in a treeview?
Post by: paramvir on September 18, 2023, 06:15:08 pm
Yes it can be done by adding

Code: [Select]
pq_detail: {show: true},

to the nodes which are required to be open by default.
Title: Re: How to implement a "details" row in a treeview?
Post by: Pisga on September 20, 2023, 08:11:37 pm
Do you can give me full code example ? Thank you very much