DataGrid Row Template with dropdown menu not working all of the time

Question

I'm using a template row to include a column that has a dropdown menu with multiple actions. Each one of the options will open a different bootstrap modal. The partial view loads in a placeholder div. It works when the grid doesn't have scroll bars. However when I do a search, scrollbars are displayed and my modal will not open. Is there a reason why the bootstrap modal will not open when there are scrollbars?Here is my code:

Vignesh Sivagnanam · Accepted Answer

Hi Stephen Thanks for the update. Based on your query we found that the button element does not fire the click event in the rowTemplate. To fire the click event we suggest you to define the onclick event within the button element like below code example Please refer the Sample, Documentation and code Example for your reference Code Example :
Sample : https://www.syncfusion.com/downloads/support/forum/157367/ze/157367-753621659.zip Documentation : https://ej2.syncfusion.com/javascript/documentation/common/template-engine/#custom-helper Please get back to us if you need further assistance on this. Regards, Vignesh Sivagnanam

Sujith Kumar Rajkumar · Answer

Hi Stephen, 

Greetings from Syncfusion support. 

We checked your query and could understand that you have rendered row template in the Grid and the problem you are facing is occurring on performing the search in the Grid. We would like to let you know that the searching functionality of the Grid is not supported with the row template. 

If we misunderstood you query or if you require any further assistance, then please get back to us. 

Regards, 
Sujith R

Stephen Hall · Answer

When I do a search in the DataGrid. My template row displays. However, the JQuery doesn't work on the column that has a custom button that is to trigger a modal. The JQuery works when the DataGrid first renders.

Here is a screenshot of the rowtemplate. It renders the row, my dropdown works, but when I click on the item in the dropdown the modal doesn't open.

Rajapandiyan Settu · Answer

Hi Stephen, 

Thanks for your update. 

By default in EJ2 Grid, the rowTemplate feature does not support Search action. i.e. element rendering and event firing of the row template elements is not working properly after performing the search action in Grid, since the rowTemplate does not support the Searching feature. 

Please get back to us if you need further assistance. 

Regards, 
Rajapandiyan S

Stephen Hall · Answer

I removed search from my DataGrid and my issue still exists. My template row still doesn't fire my function when I click on my buttons in the column.

The button in the rowTemplate is

<button type="button" class="dropdown-item" data-toggle="ajax-modal" data-target="#inactivateClient" data-url="/Home/Inactivate/${id}" title="Inactivate Client">Inactivate</button>

When clicking on this button, it should open a Bootstrap Modal to confirm the action.

Here is the JavaScript to open the modal:

$(function () {

var placeholderElement = $('#modal-placeholder');

/// Check if Follow-Up is checked

var isFollowUp = $('#isFollowUp');

$('button[data-toggle="ajax-modal"]').click(function (event) {

var url = $(this).data('url');

$.get(url).done(function (data) {

placeholderElement.html(data);

placeholderElement.find('.modal').modal('show');

});

placeholderElement.on('click', '[data-save="modal"]', function (event) {

event.preventDefault();

var form = $(this).parents('.modal').find('form');

var actionUrl = form.attr('action');

//var dataToSend = form.serialize();

var dataToSend = new FormData(form.get(0));

//$.post(actionUrl, dataToSend).done(function (data) {

$.ajax({ url: actionUrl, method: 'post', data: dataToSend, processData: false, contentType: false }).done(function (data) {

var newBody = $('.modal-body', data);

placeholderElement.find('.modal-body').replaceWith(newBody);

var html = $($.parseHTML(data));

var isValid = html.find('[name="IsValid"]').val() == 'True';

if (isValid) {

placeholderElement.find('.modal').modal('hide');

location.reload();

//Change from reload to update the section of code

}

else {

/// Check if Follow-Up is checked

var isFollowUp = $('#isFollowUp');

if ($(isFollowUp).is(":checked")) {

$("#followUpInfo").show();

} else {

$("#followUpInfo").hide();

}

});