Dynamic Template : Add Html Radio Button to the grid cause replicating on scroll

[Ronak Patel]

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 1 year, 9 months ago by Ronak Patel.
• This topic was modified 1 year, 9 months ago by Ronak Patel.

[svetoslav_borislavov]

Hi,

I have reproduced your situation by the given code and I saw that you are accessing the row id incorrectly.
To get the row id you can access it from ‘formatObject.row.id’. You are trying to access it from formatObject.row.data
formatObject.row.data contains the datafields with their values and $ object with id and index.

 

I suggest following the given example and accessing the row id —> formatObject.row.id

 

Here is an example of logging the row id in the console on checkbox click: stackblitz

 

I will wait for the result!

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Ronak Patel]

Thanks @Svetoslav for the updates, But its not what’s creating issue.

Here is my forked version of the example,
https://github-j7yyej-hcwtjs.stackblitz.io

I just create 1000 records so the scrollbar is enabled for the grid. Now try to scroll down and check or uncheck any of the checkboxes and check the printed ID in the console. Which is the same id loaded as you see for the first time on screen.

So technically when I scrolled down the grid and try to check and uncheck it shows the wrong id in the console. even the sequence of input it checked is not even based on value I pass. It keeps repeating the same pattern as it loaded the first time (on viewport) on screen.

I hope now you are clear about the issue I’m facing.

[svetoslav_borislavov]

Hi,

I have worked out the problem.

Here is the demo: https://stackblitz.com/edit/github-q2hxsx-tsz5e9?file=src/app/app.component.ts

 

If you need further help, let me know!

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts