How to populate child table with a button?

How to populate child table with a button?

gh2mgh2m Posts: 63Questions: 16Answers: 0

Test Case: http://live.datatables.net/zefusufa/1/

when I click Create a nested table with data button then the green + sign with circle, the child data is not there for some reason. The issue is probably at function appendSelectedControls. No error but the data is just not there. Any ideas?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I’m using an iPad at the moment, which isn’t ideal for web-dev, so I might be missing something, but:

    row.child( format(row.data()) ).show();
    

    I don’t think format exists does it? format1 does, but it just returns an empty table and then doesn’t do anything with it.

    Allan

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    I updated Test Case (http://live.datatables.net/zefusufa/3/) and only using format1 but it is still not working. I am using processautoteststep to add a new row to #testStepTable table and at the same time initiate teststepchild1 child table. When I try to click the green plus sign at the row I just created, I don't see my child table.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    When adding the new row you are using this to create the child:

    row(this).child(format1(row(this).data(), nextteststepnumber)).show()
    

    row(this) won't return the row API which is why it is not working. I updated you code like this:

        var newRow = row.add({ icon:null,
              teststep:nextteststepnumber,
              testid:data1[0],
              testname:data1[1],
              testdesc:data1[2]
        }).draw();  //populate test step to tbltstep datatable
    
        newRow.child(format1(row(this).data(), nextteststepnumber)).show();
            newRow.nodes().to$().addClass('shown');
        var rowData = row(this).data();
        var id = "teststepchild" + nextteststepnumber;
    
    

    The row.add() API returns the API instance of the new row. It is assigned to newRow which can now be used to show the new row. Also added code to add the shown` class and updated your table ID to use the counter so you can add multiple rows.

    http://live.datatables.net/jagihipe/1/edit

    Kevin

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    The updated Test Case expired for some reason. I had to make another one
    http://live.datatables.net/cugaqaqe/1/

    After I click Create button, a row data is added to testStepTable. But when I expand (click the green plus button) I see a line right below the newly added row but no data. Inspection shows this new line is teststepchild1 table.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Did you look at the test case I updated for you?
    http://live.datatables.net/jagihipe/1/edit

    Kevin

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    You test case works when I first click Create button. But when I collapse (minus sign) and expand (plus sign) again, the data is gone. Why is that? I think you are very close.

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    Inspection shows re-open(re-expand) is pulling teststepchildundefined table. So I changed, in my file, line below // Open this row
    row.child(format1(rowData+1)).show();

    just to make sure I am pulling teststepchild1 table which it does but the data is not show. Eventually I need to make it dynamic of course, i.e., first row re-expand showing teststepchild1, second row re-expand showing teststepchild2, etc.

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    Hi Kevin, any ideas/suggestions? It's probably has something to do with referencing the child table teststepchild1 at the time of expanding (click + sign) the parent row. But I just can see it for some reason. There is no error either.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    You need to find a consistent way to generate the ID for the child table. First decide if you need the child to have an ID. Your example is generating an ID number and appending it to the string "teststepchild".

    Your function format1(d, tsnum) function expects two parameters but in your click event you are passing just one parameter - the row data and not the tsnum parameter. My suggestion is to eliminate this parameter and use a unique value from the parent's row data to append to `"teststepchild".

    Kevin

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    Yes, that's what I am trying to do but having some difficulty. Here is my new Test Case: http://live.datatables.net/jagihipe/2/edit

    I am trying to use Test # column value of the parent row, a sequential number as the child table id to tie the child to the parent. That is teststepchild1, teststepchild2, etc. But I have trouble referencing the child table when re-open it. I use row.child(format(rowData, 1)).show(); to see if I can at lease re-open the first child table but with no luck. Ideally I need to replace 1 with the corresponding parent Test # and get the child table show when I click minus and then plus sign again. Any help would be greatly appreciated.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    There are a couple things missing. One is you need to initialize the Datatable and add the data to the child in the click event. Same as in the processautoteststep() function.

    Second is remove the use of the nextteststepnumber to generate the child table ID and use the data from the parent row. For example:
    var id = "teststepchild" + newRow.data().teststep;

    Here is the updated example:
    http://live.datatables.net/jagihipe/3/edit

    Kevin

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    This works with creating child table and re-opening it. Thank you very much. I must have misunderstanding of how child table works. I thought once it is created it will be under that parent row without having to re-initializing it when I try to close/re-open the parent row. My data for child table is hardcoded in appendSelectedControls for this test case. Real data is dynamically built at the time of click Create button in processautoteststep and no longer available after that. In other words I can't really use appendSelectedControls to populate data in the event listener section again. That is just my quick test to see data in the child table, sorry for the confusion. Can I pull the child table with data that is created at processautoteststep? It seems to me the child tables initially created and re-initialized are different tables/objects although they reference the same table id teststepchildx. Am I wrong?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    I must have misunderstanding of how child table works. I thought once it is created it will be under that parent row without having to re-initializing it when I try to close/re-open the parent row.

    You can do that. Use row.child.show(); instead of row.child(format(rowData)).show();. Note no () after child. Here is the updated example:
    http://live.datatables.net/jagihipe/4/edit

    Kevin

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    Wow. This is exactly what I was looking for. I should have thought about that since I already have row.child.hide() there in the same if statement. I have been over thinking and forgot about the basics :smiley: You are the men. I love this datatable stuff. I really appreciate your help!

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    What's the best practice to store this kind of parent/child table date in the back-end SQL table. Is there an example on this platform?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    There are a couple blogs you might be interested in. First is the Ajax loaded details row and the other Parent Child editing of detail rows.

    Kevin

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    Thanks. Will check it out.

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    I am running some issues with pulling saved data from server.
    Here is my test case: http://live.datatables.net/kiluxeso/1/edit

    Array is populated at the start of the page by server agent into dataSetTestSteps and I can see the data by viewing source as follows:
    var dataSetTestSteps = [
    ["class=details-control", 1,1001,"test name1","test description1"],
    ["class=details-control", 2,1002,"test name2","test description2"]
    ];

    DataTable tblteststep is initialized with data: dataSetTestSteps

    But data is not showing in the Output page. What's the issue here? I am not pulling any child table data at this point, only the row data for the parent table. I hope that's not the issue.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Take a look at the browser's console and you will see this error:

    Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

    Your Datatables initialization is causing an alert message. To see the alert click in the Live Preview arrow in the Output tab (top right). You will see this alert:

    DataTables warning: table id=testStepTable - Requested unknown parameter 'teststep' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

    You are using columns.data to define the columns. Datatables expects and array of objects. But dataSetTestSteps is an array of arrays. Change it to an array of objects to match your defined structure and it will work.

    Kevin

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    That works. Thanks. Here is the updated test case http://live.datatables.net/sogisohi/1/edit

    Now how do I get my server side child data back under the corresponding parent row? Since the child datatable is dynamically built by click a button, I don't have dataset available at the time the page is loaded.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    See this blog about Ajax loaded child rows.

    Kevin

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    Before I try that is there a way to load all the rows with the corresponding child tables at the time of page initial loading since I have everything available in the SQL table?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Its up to you how you obtain the child row data. It can be part of the Datatables row data like the example. You can load it via a separate jQuery Ajax request and store in a global variable that is used in the format function. You can load it via ajax each time you open the row as discussed in the blog. There are no restrictions or requirements from Datatables. You just need to be able to access the data to display in the child.

    Kevin

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    Okay, I tried ajax call but for some reason the response data does not show, it only shows loading... message.

    I used F12, Network tab to check the server response:
    Headers: Status Code: 200 OK
    Preview: {"html":"test html"}
    Response:
    <html>
    <head>
    </head>
    <body text="#000000">
    {"html":"test html"}
    </body>
    </html>

    Whereas the blog Network shows slightly different:
    Preview:
    {,...}
    html: "Details for <b>Airi Satou ..."
    Response: {"html":"Details for <b>Airi Satou<\/b><br><br>Full information ..."}

    I am using lotusscript agent on Domino server to generate json string as follows:
    json = |{"| & "html" & |":"| & "test html" & |"}|

    I am not sure why my server Response has <html>...</html> stuff or if it matters.

    Can you tell what's the issue here?

  • gh2mgh2m Posts: 63Questions: 16Answers: 0

    Found the issue. I forgot to set the header.

    Print |content-type: application/json|
    Print json

This discussion has been closed.