Hello,

Project Type: Angular

Refer to link for adding dynamic element : https://www.htmlelements.com/angular/demos/grid/column-dynamic-template-with-components/

Based on this demo link I try to add the Normal Html Input of type checkbox and on change of it attach the listener. And it starts displaying perfectly.

But when there is a scroll on grid and then while scrolling to the grid it is replicating the button rather than rendering new separate button. So in that case when click on the checkbox it gives me the different row id and then selected.

Here is the sample columns how i implemented this feature :

this.grid.columns = [
{ label: ‘Name ‘, dataField: ‘name’, },
{
label: ‘Action ‘, dataField: ‘isAllow’, width: 100,
template: function (formatObject: any) {
if (!formatObject.template) {
const label = document.createElement(‘label’);
label.className = “switch switch-label switch-success”;

const input = document.createElement(‘input’);
input.type = “checkbox”;
input.className = “switch-input”;
if (formatObject.row.data.isAllow == true)
input.checked = true;
input.setAttribute(‘rowID’, formatObject.row.data.id);
const span = document.createElement(‘span’);
span.className = “switch-slider”;
span.setAttribute(‘data-checked’, “✓”);
span.setAttribute(‘data-unchecked’, “✕”);

label.appendChild(input);
label.appendChild(span);

input.addEventListener(‘click’, (e) => {
// e.preventDefault();
// e.stopPropagation();
const rowID = input.getAttribute(“rowID”);
that.updateGridActionStatus(e, rowID, input.checked);
});

formatObject.template = label;
}
}
},
];

If you check the code then there is rowID im adding to all the checkbox. So technically when user press on checkbox it gives me the same id which is attached to that component.

Any suggestion to make this better please suggest.

Thanks

• This topic was modified 2 years, 3 months ago by Ronak Patel.
• This topic was modified 2 years, 3 months ago by Ronak Patel.