We have a requirement to load a tree grid in a modal window. We followed the example provided and the grid loads, but on initial load there is a alignment issue with the headers in the columns and also the grouped values (example: "A test survey", "B test survey" etc.) don't seem to span all the columns. I have provided a link to a screenshot of what we see when we first load the modal.
Here is our configuration and sample date:
const questionTree = new TreeGrid({
selectionMode: {
checkbox: true, // Adds a checkbox column that lets the user select rows showCheckAll : true // Adds a checkbox to the checkbox column header that lets the user check/uncheck all rows
includeChildren: true,
showCheckAll: true
},
appendTo: 'treeContainer',
animateTreeNodeToggle: true,
loadMask: 'Loading tree data...',
columns: [
{
text: 'Name',
field: 'name',
flex: 2,
type: 'tree'
},
{
text: 'Type',
field: 'questionType',
align: 'left',
flex: 1
},
],
store: {
fields: [
'questionType']
},
tbar: [
{
type: 'button',
ref: 'expandAllButton',
icon: 'b-fa b-fa-angle-double-down',
text: 'Expand all',
onAction: () => questionTree.expandAll()
},
{
type: 'button',
ref: 'collapseAllButton',
icon: 'b-fa b-fa-angle-double-up',
text: 'Collapse all',
onAction: () => questionTree.collapseAll()
}
]
});
//Now load the data:
var json = { "treeData": [{ "id": "GettingStarted", "name": "A Test Survey", "expanded": true, "icon": "fas fa-poll-people", "children": [{ "id": "GettingStarted.participant_diagnosis", "name": "What is the Participant's rare disease diagnosis?", "questionType": "dropdown", "icon": "fal fa-question-square", "state": { "opened": null, "selected": null, "disabled": null } }, { "id": "GettingStarted.pt_diagnosis_other", "name": "What other rare disease was the Participant diagnosed with?", "questionType": "text", "icon": "fal fa-question-square", "state": { "opened": null, "selected": null, "disabled": null } }], "state": { "opened": null, "selected": null, "disabled": null } }, { "id": "BTestSurvey", "name": "B Test Survey", "icon": "fas fa-poll-people", "expanded": true, "children": [{ "id": "BTestSurvey.question1", "name": "Test1", "questionType": "text", "icon": "fal fa-question-square", "state": { "opened": null, "selected": null, "disabled": null } }, { "id": "BTestSurvey.question2", "name": "Test2", "questionType": "radiogroup", "icon": "fal fa-question-square", "state": { "opened": null, "selected": null, "disabled": null } }], "state": { "opened": null, "selected": null, "disabled": null } }, { "id": "DTestSurvey", "name": "D Test Survey", "icon": "fas fa-poll-people", "children": [{ "id": "pt_meds", "name": "pt_meds", "icon": "fas fa-repeat", "children": [{ "id": "pt_meds.pt_medication", "name": "Please select a medication.", "questionType": "dropdown", "icon": "fal fa-question-square", "state": { "opened": null, "selected": null, "disabled": null } }, { "id": "pt_meds.pt_med_other", "name": "If other medication, please specify.", "questionType": "name", "icon": "fal fa-question-square", "state": { "opened": null, "selected": null, "disabled": null } }] }] }], "errors": null, "logInfo": null, "successful": true, "errorMessage": "" };
questionTree.store.data = json.treeData;
