Event Listener removed from the button when using quickFind to filter the results

[jintech]

I am facing a weird issue when I filter the rows using the bryntum inbuilt quickfind used here https://www.bryntum.com/products/grid/docs/api/Grid/feature/QuickFind

{
				cls: 'text-center hidden-xs',
				minWidth: 15,
				maxWidth: 30,
				flex: 1,
				type: 'widget',
				text: '',
				icon: '',
				htmlEncode: false,
				cellCls: 'hidden-xs',
				renderer: ({ record }) => {
					var html_content = "",
						job = record.data;
						
					html_content = `<a class="updateStatus"  style="margin-left:7px; display:none;float:right;" href="#" title="Update Status">
							<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
						</a>`;
					return html_content;
			}
		},

I have an event listener in document. ready which performs a certain action when we click on update status

$('.updateStatus').off().on('click', updateStatus);

When the page is loaded for the first time, the widget works fine and the updateStatus click event is also attached. However when I use quickFind to filter out the rows and then click on the same widget, nothing happens. I checked the clcik EventListeners for this widget on console and its not there after the filter.

I modified the code to use the onClick event for the widget but that does not seem to work either.

{
				cls: 'text-center hidden-xs',
				minWidth: 15,
				maxWidth: 30,
				flex: 1,
				type: 'widget',
				text: '',
				icon: '',
				htmlEncode: false,
				cellCls: 'hidden-xs',
				renderer: ({ record }) => {
					var html_content = "",
						job = record.data;
						
					html_content = `<a class="updateStatus"  style="margin-left:7px; display:none;float:right;" href="#" title="Update Status">
							<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
						</a>`;
					return html_content;
			},
			onClick: ({ record }) => {
    				// Handle the click event for the "updateStatus" widget
    				debugger;
    				console.log(`Update Status for record ID ${record.data.id}`);
    				updateStatus();
			}
		}

Not exactly sure why the onClick event listener is not being triggered

[fabio.mazza]

Hello, I've just tried to enable quickfind feature on this example https://bryntum.com/products/grid/examples/columntypes/ and the widget type column still did its stuff. Can you please share your code so I can check better if there is something else that breaks the click event?

[jintech]

The difference between the widget column being used in the https://bryntum.com/products/grid/examples/columntypes/ and my code is that in my case, I am using onClick instead of onAction. onAction works for bryntum inbuilt functionality like addition/subtraction. In my case, I am performing a custom action based on clicking a custom widget.

My code

const grid = new Grid({
		appendTo : 'userContainer',
		selectionMode : {
			multiSelect: true, // Enable multiple row selection
			dragSelect: true,
			selectOnKeyboardNavigation: true,
			deselectOnClick: true,
			row : true,
			checkbox : {
				maxWidth: '5px',
				checkCls : 'b-my-checkbox',
				flex : 1, align : 'center'
			},
			showCheckAll : true
		},
		features : {
			cellMenu : false,
			cellEdit : false, // To make grid read-only
			sort : 'name',
			stripe : false,
			filterBar : {
				compactMode : true
			},
			quickFind : true
		},
		showDirty : true, // Show changed cells
		columnLines: false,

	columns : [
	... Other columns
	//Widget column 
	{
			cls: 'text-center hidden-xs',
			minWidth: 15,
			maxWidth: 30,
			flex: 1,
			type: 'widget',
			text: '',
			icon: '',
			htmlEncode: false,
			cellCls: 'hidden-xs',
			renderer: ({ record }) => {
				var html_content = "",
					job = record.data;
					
				html_content = `<a class="updateStatus"  style="margin-left:7px; display:none;float:right;" href="#" title="Update Status">
						<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
					</a>`;
				return html_content;
		},
		onClick: ({ record }) => {
				// Handle the click event for the "updateStatus" widget
				debugger;
				console.log(`Update Status for record ID ${record.data.id}`);
				updateStatus();
		}
	}
	
	... Rest of code
	]
}

$(document).ready(function() {
	
	updateStatus(){
		//Code for changing status
	};

	$(".updateStatus").off().on("click", updateStatus);
};

[fabio.mazza]

Yes, you're right. Btw the first approach that you tried works only initially, but every action that refreshes rows (such as quickfind etc) forces the rendering of each cell, and then new updateStatus elements that are being created, will not have any event attached to them.
The second approach doesn't work just because there isn't an onClick event in Column configs: https://www.bryntum.com/products/grid/docs/api/Grid/column/Column#events.
I can suggest you to create a custom column, to have more control over what you want to do.
I've just tried in my local and it works, with quickFind feature as well.

You can take a look at the following code just as an example.
Let me know.

// Custom column definition
export default class CustomButtonColumn extends Column {
    static $name = 'CustomButtonColumn';

static type = 'customButton';

static defaults = {
    htmlEncode : false
};

onCellClick({ grid, record, target }) {
    if (target.closest('.updateStatus')) {
        // put here the logic to execute on click
        const value = record['id'];

        console.log(value);
    }
}

renderer({ value }) {
    return `<a class="updateStatus" style="margin-left:7px; float:right;" href="#" title="Update Status">
        <span class="glyphicon glyphicon-play" aria-hidden="true">Test 123</span>
    </a>`;
}
}


// Register it
ColumnStore.registerColumnType(CustomButtonColumn);

....

new Grid({
    appendTo      : 'container',
    ....
    columns     : [
        { type : 'rownumber' },
        {
            width   : 80,
            type    : 'customButton' // using it
        },
        ...
    ],
    ....
});

[jintech]

Really appreciate your help. did run into some issues since my application is deployed on es6 environment and some of the code like using static was introduced in es6. I implemented the suggested code in es6 environment and it works fine without any issues. Looking for a work around on how this can be integrated into my es5 application

[tasnim]

Hi,

Glad to hear that it is working. Maybe you could ask ChatGPT to convert es6 code to es5