How to display stacked header columns in Angular/JS2?
10 Replies
Hi Thavasianand,
Thank you for the quick reply.
For query #1, I'd like to start by mentioning that I have 3 levels of stacked headers. I'd like to render the template of the stacked columns. The way I understand it is that there is no way to manage the 3 levels of headers AND the data itself in the HTML alone as it used to be without the use of the "columns" attribute as shown below. The "old" version of Syncfusion used to allow this as shown on this page : https://help.syncfusion.com/angular/grid/stackedheader. All the code was in the HTML and the "stackedHeaderRows" and "stackedHeaderColumns" parameters in the TypeScript allowed to determine which columns should be grouped together. With all the code being in the HTML, this allowed far better customization for the columns template. For example, if I wanted to customize my second column to display the data in an input field instead of plain text, to set the height of the input based on a variable, to set the "[disabled]" field based on variables, to limit the field to 2 characters, to force uppercase lettering upon typing and to perform actions on "keyup" and "blur" events, I could do something as the following :
Please correct me if I'm wrong, but from my understanding. with the newer version of Syncfusion, since the "ASS" column (under the "HP TURBINE" section) is a child of 2 other sets of columns (child of "HP TURBINE" that is a itself is a child of "HIGH PRESSURE ROTOR"), it is no longer declared in the HTML. It has to be declared in the Typescript where customization is limited to the "[columns]" parameters available. Here are screenshots of portions of my actual code :
HTML:
Typescript :
ACTUAL RESULT :
How can I customize the "ASS" column as described (add function calls, customize style based on variables in the TS code, display in input instead of plan text, etc.) ? I am facing the same issue as the person in this thread : https://www.syncfusion.com/forums/141197/editable-checkbox-in-angular-ejs-grid-control. I have a column with boolean value that I want to display in checkboxes but I want the checkboxes to always be enabled. However, since my column is controlled in the TS and not in the HTML, the proposed solution doesn't apply for me.
For query #2, you are correct, I want to apply custom attributes based on the RowData. As you can see in the following screenshot, I am trying to apply a specific class for the first "ASS" column based on the data but that doesn't work :
Thank you,
Hello Rahul,
Thank you for your support. We are definitely on the right track with the proposed solution. Once we have a checkbox displayed (from the original boolean value), how can we add en event listener to monitor any future changes? If the checkbox is originally unchecked and I select it once the page has loaded, I want to update the backend database to reflect the new change. I tried adding the "onchange" event for the checkbox cells and "onblur" for an input, but for some reason it does not pass the desired variables.
queryCellInfoEventArgs(args: QueryCellInfoEventArgs) {
if (args.column.field !== 'enginePrefix' && args.column.field !== 'engineModel' && args.column.field !== 'actions') {
const checkbox = new CheckBox({});
if (args.data[args.column.field]) {
checkbox.checked = true;
}
checkbox.appendTo(args.cell.getElementsByTagName('input')[0]);
args.cell.getElementsByTagName('input')[0].onchange = function() {
// UPDATE BACKEND DATABASE...
};
}
if (args.column.field === 'engineModel') {
args.cell.getElementsByTagName('input')[0].value = args.data['engineModel'];
args.cell.getElementsByTagName('input')[0].onblur = function() {
// GIVES AN EMPTY STRING...
console.log(args.cell.getElementsByTagName('input')[0].value);
};
}
}
Thanks again,
Remy
SIGN IN To post a reply.
