Custom css child table pagination

1

I have a child table in a custom doctype that I want rows highlighted when a condition is true. I currently have the function working in a Client Script under on_post_render with the following code:


	onload_post_render: function(frm) {
	    frm.doc.order_details.forEach(function(detail) {
            if(detail.delivered == 1) {
                let grid_row = document.querySelector(`div[data-name=${detail.name}`);
                if (grid_row != null) {
                    grid_row.style.backgroundColor = 'pink';
                }
            }
        });
	}

The issue is the child table is paginated. When changing pages, the code needs to be evaluated again. What trigger can I capture when the user changes pages in a paginated child table?

2

For information:

frappe.ui.form.on('Pricing Dashboard', {
	onload_post_render: function(frm) {
	    HighlightDelivered(frm);
        let btn_first_page = document.querySelector('.first-page');
        if(btn_first_page != null) { btn_first_page.addEventListener('click', () => HighlightDelivered(frm)); }
        let btn_prev_page = document.querySelector('.prev-page');
        if(btn_prev_page != null) { btn_prev_page.addEventListener('click', () => HighlightDelivered(frm)); }
        let btn_next_page = document.querySelector('.next-page');
        if(btn_next_page != null) { btn_next_page.addEventListener('click', () => HighlightDelivered(frm)); }
        let btn_last_page = document.querySelector('.last-page');
        if(btn_last_page != null) { btn_last_page.addEventListener('click', () => HighlightDelivered(frm)); }
	}
}

function HighlightDelivered(frm) {
    frm.doc.order_details.forEach(function(detail) {
        if(detail.delivered == 1) {
            let grid_row = document.querySelector(`div[data-name=${detail.name}`);
            if (grid_row != null) {
                grid_row.style.backgroundColor = 'pink';
            }
        }
    });
}
2 Likes