Hitachi Vantara Pentaho Community Forums
Results 1 to 27 of 27

Thread: Table Component - Expand on Click property

  1. #1

    Default Table Component - Expand on Click property

    Hi folks ,
    I've a problem in the creation of multiple table nested:
    I would like to create a summary table where you can click on it to Expand and see the sum splitted by one of the values of the table and again click in the new table to expand and show the details splitted by another value.
    My problem is that after accomplished the first step I can not expand anymore the tables.

    Here's how I did it (maybe it helps someone):
    first I create 3 HTML Object for my 3 tables. I hid the last 2 with the css.
    then I create 3 table component: table1, table2, table3.
    the first (the one with al the totals) has
    Code:
    Expand on Click: True
    Expand container Object: <HTML Object of the second table>
    Expand Parameters: <idx_column>, <parameter>
    The second table has the same attributes with different container object and parameters.

    With this if I click on the first table, it takes the value in the column "id_coumn", assigns it to the "parameter" and expand the table with the sub-table.

    But here are the problems :
    - At the first click on the table1, it creates 2 sub-tables2 nested, the first empty with 0 of 0 entries and inside it the second with all the entries.
    If I click on another row this problem disappear. But if I click two times on the same row (to make the sub-table2 disappear) the problem appears again on the next click. There's a way to eliminate this annoying effect?

    - And than all the properties of the sub-table2 are erased: background color, width, etc, and (of course) the expand on click.
    How can I make the sub-table2 keep all his attributes?? (or make it expandable on click at least?)

    I don't know if I was clear , sorry
    and thanks
    Last edited by Duncanmaster; 04-29-2013 at 12:35 PM.

  2. #2
    Join Date
    Nov 2012
    Posts
    24

    Default

    I would like to help you, but need you to be clear!
    Let´s try work with only 2 tables (one table with expand, it will show another one inside the expand)! Can you put it working?

  3. #3

    Default

    thanks ^^
    So, I can easily do this, but the inside table does not have any of the attributes that I assigned to it: color, font, dimension, etc.

  4. #4
    Join Date
    Nov 2012
    Posts
    24

    Default

    Should I believe you are having problems with CSS?

  5. #5

    Default

    but the css works perfectly until the tables are separated, but if I expand one inside of another, the subtable lose all its properties, include the expand property

    PS: i'm using CCCv1 if I haven't said before.

  6. #6
    Join Date
    Nov 2012
    Posts
    24

    Default

    It´s hard to believe, can you get a screenshot (of debugger) for the html elements (for table and expanded table).

    CCCv1 it´s for chart´s components, does not seems to interfere on what you are saying.

  7. #7

    Default

    Quote Originally Posted by gaspar View Post
    CCCv1 it´s for chart´s components, does not seems to interfere on what you are saying.
    uhm, you're right.
    Well... since no one answered I've used another approach (first with 3 query and 3 tables in the same html object that will pop up depending on which parameter changes, after with a little more complex query, 1 table, and the columns that disappear or appear depending on wich parameter changes).
    So I can't do screens of my work but I'll do another dash to test this and I'll post the screens ^^

  8. #8

    Default

    Now, I've done a test dashboard to show how I do so to understand where I wrong.
    First I create 3 table component with 3 queries and here they are:
    Name:  Schermata del 2013-05-08 10:21:18.jpg
Views: 576
Size:  29.6 KB

    Then I hide the html object related to the 2nd e 3rd table and set up the Expand properties:
    Name:  Schermata del 2013-05-08_1_2.jpg
Views: 536
Size:  15.9 KB

    (T1 has the same configuration but expand T2)

    Here the layout:
    Name:  Schermata del 2013-05-08 10:26:44.jpg
Views: 534
Size:  9.7 KB


    Well, if I click on the 1st table it expands and show the 2nd table, but if I click on the 2nd it will not expand with the 3rd.:
    Name:  Schermata del 2013-05-08 10:49:42.jpg
Views: 537
Size:  22.9 KB

    Where I'm wrong?

  9. #9
    Join Date
    Nov 2012
    Posts
    24

    Default

    Change priority of each table to 5, 10 and 15;
    Create 2 parameters (Components->Generic->Simple Parameter) named: t2Param and t3Param
    Add "Expanded Parameters" on components: table1 (arg=0 and value=t2Param) and on table2 (arg=0 and value=t3Param);
    Set listeners for: table2 (t2Param) and for table3 (t3Param);

    It will work!

  10. #10

    Default

    I don't understand where apply the "priority" part, but I've done everything else and doesn't work to me . Nothing is changed from before :/
    I made some other tests, based of what you suggest to me, but nothing
    Last edited by Duncanmaster; 05-09-2013 at 11:25 AM.

  11. #11

    Default

    Hai sir,
    I need to display a chart component into to the Expand on Click ,I don't know how to do this. Please help me how can i use a chart component in expand on click property in table component.
    I need the result like following link please refer the link
    http://www.webdetails.pt/pentaho/con...Content01.wcdf

    Thank you

  12. #12

    Default

    what you need is a simple Table component with 3 column types (refer to the demo in your link): set the first as a string, the second as a number and the third as "dataBar".
    Then you have to create a function in the "pre execution" option of this component to customize your dataBar using the setAddInOptions function.
    Be sure your datasource had all the needed values.
    Last edited by Duncanmaster; 07-10-2013 at 08:05 AM.

  13. #13
    Join Date
    Dec 2010
    Posts
    304

    Default

    Hi sasidharan091,
    I try to help you using an example:

    1) in your dashboard Layout create a Row with name expandObj and, inside it, create a Column with name chartObj
    (make expandObj not visible using a css class)

    2) add to your dashboard as many parameters as the table fields you need to synchronize the chart:
    Parameter column0selection
    Parameter column1selection
    ...

    3) in your table component set these properties:
    Expand On Click = True
    Expand container Object
    = expandObj
    Expand Parameters = [["0","column0selection"],["1","column1selection"], ... ]

    4) add to your dashboard a chart component that listen to the parameters column0selection, column1selection, ... and that use them as parameters for its datasource;
    set chart component HtmlObject property to chartObj

  14. #14

    Default

    Quote Originally Posted by lukolap View Post
    Hi sasidharan091,
    I try to help you using an example:

    1) in your dashboard Layout create a Row with name expandObj and, inside it, create a Column with name chartObj
    (make expandObj not visible using a css class)

    2) add to your dashboard as many parameters as the table fields you need to synchronize the chart:
    Parameter column0selection
    Parameter column1selection
    ...

    3) in your table component set these properties:
    Expand On Click = True
    Expand container Object
    = expandObj
    Expand Parameters = [["0","column0selection"],["1","column1selection"], ... ]

    4) add to your dashboard a chart component that listen to the parameters column0selection, column1selection, ... and that use them as parameters for its datasource;
    set chart component HtmlObject property to chartObj


    Thank you for reply lukolap,
    I tried this,But i didn't get the preview, How i link the table component with the parameter. Is there any script i need to write.
    In my data source i have only one parameter.

    The table fields are
    Student name , username , overall%.

    My problem is i click on the row it will fetch the username as a parameter for the chart.

    My chart will show the individual mark of every subject in stacked chart...
    Please solve my problem....
    Thanks,


    Last edited by sasidharan091; 07-12-2013 at 05:32 AM.

  15. #15

    Default

    Thank you Duncanmaster. I done this but i need a separate chart component by Expand on click.
    Thank you for the reply

  16. #16
    Join Date
    Dec 2010
    Posts
    304

    Default

    Quote Originally Posted by sasidharan091 View Post
    Thank you for reply lukolap,
    I tried this,But i didn't get the preview, How i link the table component with the parameter. Is there any script i need to write.
    In my data source i have only one parameter.

    The table fields are
    Student name , username , overall%.

    My problem is i click on the row it will fetch the username as a parameter for the chart.

    My chart will show the individual mark of every subject in stacked chart...
    Please solve my problem....
    Thanks,


    Open the browser log console and do the preview... then look for the error and post it.

    I write the procedure again according to your case:

    1) ...

    2) add to your dashboard
    Parameter selectedUsername

    3) in the table component set
    ...
    Expand Parameters = [["1","selectedUsername"]]

    4) in thechart component set
    Listeners = ["selectedUsername"]
    Parameters = ["username", "selectedUsername"]

    5) in the datasource used for the chart set
    Parameters = [["username", "", "String"]]
    and in the Query use the parameter in this form: ${username}

  17. #17

    Default

    2013-07-12 15:05:47,259 WARN [pt.webdetails.cpf.repository.PentahoRepositoryAccess] hasAccess: html extension not in acl-files.
    2013-07-12 15:05:47,259 WARN [pt.webdetails.cpf.repository.PentahoRepositoryAccess] hasAccess: Unable to check access control for system/cda/previewer/previewer.html using default access settings.
    2013-07-12 15:05:47,405 ERROR [org.pentaho.platform.web.servlet.GenericServlet] GenericServlet.ERROR_0004 - Resource /cda/previewer/languages/Messages_en_IN.properties not found in plugin cda
    2013-07-12 15:05:47,412 ERROR [org.pentaho.platform.web.servlet.GenericServlet] GenericServlet.ERROR_0004 - Resource /cda/previewer/dataTables/languages/Messages_en_IN.txt not found in plugin cda
    2013-07-12 15:08:31,954 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:08:33,970 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:08:56,154 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:08:57,860 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:09:22,333 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:09:26,944 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:10:23,237 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:10:53,804 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:11:35,388 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:11:38,397 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:12:58,069 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:13:01,858 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:50:31,451 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .wcdf extension not in acl-files.
    2013-07-12 15:52:22,706 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.

  18. #18

    Default

    I got this error in Log

    2013-07-12 16:02:35,363 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.

  19. #19

    Default

    Thanks Lukolap,
    I got the output. But i don't know to hide the row in layout. Please help me how we use the css to hide the row..
    I used the css Class as

    CSS Class:
    visibility:hidden



  20. #20
    Join Date
    Dec 2010
    Posts
    304

    Default

    Quote Originally Posted by sasidharan091 View Post
    2013-07-12 15:05:47,259 WARN [pt.webdetails.cpf.repository.PentahoRepositoryAccess] hasAccess: html extension not in acl-files.
    2013-07-12 15:05:47,259 WARN [pt.webdetails.cpf.repository.PentahoRepositoryAccess] hasAccess: Unable to check access control for system/cda/previewer/previewer.html using default access settings.
    2013-07-12 15:05:47,405 ERROR [org.pentaho.platform.web.servlet.GenericServlet] GenericServlet.ERROR_0004 - Resource /cda/previewer/languages/Messages_en_IN.properties not found in plugin cda
    2013-07-12 15:05:47,412 ERROR [org.pentaho.platform.web.servlet.GenericServlet] GenericServlet.ERROR_0004 - Resource /cda/previewer/dataTables/languages/Messages_en_IN.txt not found in plugin cda
    2013-07-12 15:08:31,954 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:08:33,970 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:08:56,154 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:08:57,860 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:09:22,333 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:09:26,944 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:10:23,237 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:10:53,804 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:11:35,388 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:11:38,397 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:12:58,069 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:13:01,858 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    2013-07-12 15:50:31,451 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .wcdf extension not in acl-files.
    2013-07-12 15:52:22,706 WARN [pt.webdetails.cpf.repository.RepositoryAccess] hasAccess: .cdfde extension not in acl-files.
    If I'm not wrong, this is pentaho log...
    I think you have a problem with component rendering or query execution, so web console's log could help me more.
    If you work with Firefox press CTRL + SHIFT + K to open Web Console, then see if there are errors

  21. #21
    Join Date
    Jun 2013
    Posts
    15

    Default

    Quote Originally Posted by sasidharan091 View Post
    Thanks Lukolap,
    I got the output. But i don't know to hide the row in layout. Please help me how we use the css to hide the row..
    I used the css Class as

    CSS Class:
    visibility:hidden


    In the Dashboard Layout you need to add a Resource from the toolbar, choose Css from the drop down and Code Snippet in the second Drop Down, then in the Resource code you can write:

    Code:
    #expandObj { display: none; }

  22. #22
    Join Date
    Jun 2013
    Posts
    15

    Default

    Anyone can give me some tips to make Drillable Table Component similar explained in this thread, but instead of run just one SQL per row clicked, I need run more than one SQL per row and column clicked .


    For example, if I have the table:


    id, user, date
    11, john, 2013-8-31


    When I do click in "john" I need show a nested table using as parameter the value "john", but if in the same row I do click in "11" I need show a nested table using as parameter, and just this parameter, the value "11".


    By now I can only show the nested table using both parameter together, because I don't know how get just one by one and then run x SQL according to the parameter sent.

  23. #23

    Default

    you can use just one sql, simply change it to use all the needed parameters at once.
    I don't remember which DB you use, but in oracle you can use the sql in the form:
    Code:
    where 
     (param1 is null or param1 = 11)
       AND (param2 is null or param2 = john) 
       AND (param3 is null or param3 = etc)
    you can do the same also with other DBs

  24. #24
    Join Date
    Jun 2013
    Posts
    15

    Default

    Quote Originally Posted by Duncanmaster View Post
    you can use just one sql, simply change it to use all the needed parameters at once.
    I don't remember which DB you use, but in oracle you can use the sql in the form:
    Code:
    where 
     (param1 is null or param1 = 11)
       AND (param2 is null or param2 = john) 
       AND (param3 is null or param3 = etc)
    you can do the same also with other DBs

    Thank you Duncan Master for your answer. Unfortunately I want one SQL Query for each param, the query is different for each param. My problem is when the user is clicking in any row (don't matter the column) I am getting all params, I need just one per row/column selected.

  25. #25

    Default

    ah ok
    Well, maybe i'm wrong, but I think it's possible to extract the exact value with something like:

    Code:
    function f(a){
        param = a.tableData[a.rowIdx][a.colIdx]
    }
    but if the queries are completly different, probably you have to do more tables and makes a control with something like:
    Code:
    if(a.category == 'x')
       Dashboards.fireChange('paramX', a.tableData[...][...]);
    else if(a.category =='y')
       Dashboards.fireChange('paramY', a.tableData... );
    and link the right parameter to the right table.

    I don't know if this works for you or if there are better solutions

  26. #26
    Join Date
    Jun 2013
    Posts
    15

    Default

    Quote Originally Posted by Duncanmaster View Post
    ah ok
    Well, maybe i'm wrong, but I think it's possible to extract the exact value with something like:

    Code:
    function f(a){
        param = a.tableData[a.rowIdx][a.colIdx]
    }
    but if the queries are completly different, probably you have to do more tables and makes a control with something like:
    Code:
    if(a.category == 'x')
       Dashboards.fireChange('paramX', a.tableData[...][...]);
    else if(a.category =='y')
       Dashboards.fireChange('paramY', a.tableData... );
    and link the right parameter to the right table.

    I don't know if this works for you or if there are better solutions

    This is amazing! is just what I am looking for.

    I have available all this options:

    param = a.tableData[a.rowIdx][a.colIdx]; // value of row/column selected
    param0 = a.tableData[1];
    param1 = a.tableData[1][0];
    param2 = a.tableData[a.rowIdx];
    param3 = a.tableData[a.rowIdy];
    param4 = a.category; // my column name
    param5 = a.tableData[a.rowIdx][0]; //my row first column

    console.log('param0: '+param0);
    console.log('param1: '+param1);
    console.log('param: '+param);
    console.log('param2: '+param2);
    console.log('param3: '+param3);
    console.log('param4: '+param4);
    console.log('param5: '+param5);

    And as you said, with Javascript I can make any control and call Dashboards.fireChange('paramx',param);


    Thank you, I help me a lot.


    Note for newer viewer: This function going to clickAction in the main table.
    Last edited by herohat; 09-02-2013 at 11:30 AM.

  27. #27

    Default

    ehehhehe you're welcome ^_^

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2019 Hitachi Vantara Corporation. All Rights Reserved.