on click event not firing after sort

[Benjamin]

my onclick event not firing after grid sort.

grid columns markup

columns: [
   
                    {
                        field: "", title: "", width: "150px", attributes: { "class": "ps-0" }, template: function(dataItem) {
                            var actionHtmlContent = '';
                            if (dataItem && dataItem.canEdit) {

                                actionHtmlContent += '<a class="btn btn-link"  href="' + contactDetailLink + '/1/' + dataItem.id + '">';
                                actionHtmlContent += '<em class="material-icons material-edit" style="color:#0D4EA2;"></em>';
                                actionHtmlContent += '</a>';
                            }
                            if (dataItem && dataItem.canDelete) {

                                actionHtmlContent += '<a class="btn btn-link delete-button" title=" " aria-label=" " href="?AppContactID=' + encodeURIComponent(dataItem.id) + ' &handler=Delete">';
                                actionHtmlContent += '<em class="material-icons material-delete" style="color:#0D4EA2;"></em>';
                                actionHtmlContent += '</a>';
                            }
                            return actionHtmlContent;
                        }
                    },
       
    { field: "salutation", title: "Salutation", width: "130px" },
    { field: "fullName", title: "Full Name", width: "200px" },

 

code to attach onclick

$(".delete-button").on("click", function () {
    return confirm('Are you sure you want to proceed?');
});

 

my js tag has nounce, thus i can't add the event listener to the html tag itself.

 

after i sort the grid, when user click on the .delete-button the confirm popup is not showing

[Nikolay]

Hello Benjamin,

The reason for the lost click handler is that the Grid content is re-rendered and the $.on("click") is lost. You need to re-attach it in the sort Grid  event handler or define it with onclick in the template:

template: function(dataItem) {
            return '<a onclick="customClick()" class="btn btn-link delete-button" title=" " aria-label=" " &handler=Delete">Delete</a>';
          }
...
      function customClick() {
        return confirm('Are you sure you want to proceed?');
      }

Dojo demo: https://dojo.telerik.com/QoexeqjA

Regards,
Nikolay
Progress Telerik

[Ashwani]

Another Possible answer is available in this dojo: https://dojo.telerik.com/IpxBxIHk
Here I used databound(), additionally this provides csp complaint code as we should not use 'onclick' event to avoid csp issues.

[Nikolay]

Hi Ashwani,

Thank you for sharing this approach with the community. It is also a valid one.

Regards,

Nikolay

[Alex]

I like that both Nikolay and Ashwani provided solutions. It's helpful to see different approaches. heardle