JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Dynamic Template : Add Html Radio Button to the grid cause replicating on scroll

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #103425
    Ronak Patel


    Project Type: Angular

    Refer to link for adding dynamic element :

    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 ( == true)
    input.checked = true;
    const span = document.createElement(‘span’);
    span.className = “switch-slider”;
    span.setAttribute(‘data-checked’, “✓”);
    span.setAttribute(‘data-unchecked’, “✕”);


    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.


    • This topic was modified 1 year, 10 months ago by Ronak Patel.
    • This topic was modified 1 year, 10 months ago by Ronak Patel.


    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 ‘’. You are trying to access it from contains the datafields with their values and $ object with id and index.


    I suggest following the given example and accessing the 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

    Ronak Patel

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

    Here is my forked version of the example,

    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.



    I have worked out the problem.

    Here is the demo:


    If you need further help, let me know!


    Best Regards,
    Svetoslav Borislavov

    Smart UI Team

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.