Highlight Row on click in Reports

Frappe Framework
1

Currently when we click on specific cell in a report, cell gets highlighted with its borders. When there is a report with large number of columns, it becomes difficult to trace the specific row when we scroll horizontally.

I have written the code to highlight the complete row when clicked on specific cell. For my custom reports I am adding this code in report’s javascript file. But I want to make it a global solution, so that it gets applied automatically to all existing and future reports.

To make it global solution, I added custom js code in apps/custom_app/custom_app/public/js/custom_file.js.

I hooked this file in hooks.py using app_include_js = “/assets/custom_app/js/custom_file.js”

But this is not working.

Do anyone have idea how can we make it a global solution.

(If my custom code which I am using to highlight the rows in my custom reports is required, I will share it, so that community can use it if they have same requirement).

1 Like
2

Hello,

I think it is a very good use, you can also contribute to frappe it will help others.

and your path is wrong actually instead you can do it like…

in :file_folder:public / :file_folder: js

  • create a file like YOUR_APP_NAME.bundle.js
  • create other file with your logic like row_highlight.js

then in YOUR_APP_NAME.bundle.js import custom file,

import “./row_highlight“

and in hooks add like

app_include_js = “YOUR_APP_NAME.bundle.js“

then build your app once if not works.

2 Likes
3

Above solution is not working. Giving error while building the app.
after_datatable_render: function (datatable) {

    frappe.query_reports["Report Name"] = {                                   const $wrapper = $(datatable.wrapper);

    // Remove old handlers
    $wrapper.off("click", ".show-item-popup");
    $wrapper.off("click", ".dt-cell");
        $wrapper.on("click", ".dt-cell", function (e) {
            const rowIndex = $(this).closest(".dt-row").data("row-index");

            if (rowIndex !== undefined) {
                highlight_row_by_index(datatable, rowIndex);
            }
        });
    }
};

function highlight_row_by_index(datatable, rowIndex) {

    const $wrapper = $(datatable.wrapper);

    // Remove previous highlights
    $wrapper.find(".dt-row--highlight").removeClass("dt-row--highlight");

    // Try native API (works in newer versions)
    if (datatable.rowmanager?.highlightRow) {
        datatable.rowmanager.highlightRow(rowIndex, true);
    }

    // Fallback for versions lacking highlightRow()
    const rowEl = $wrapper.find(`.dt-row[data-row-index="${rowIndex}"]`)[0];
    if (rowEl) {
        rowEl.classList.add("dt-row--highlight");
    }
}



// ⭐ Styling (once)
frappe.dom.set_style(`
    .dt-row--highlight {
        background-color: #fff4b8 !important;   /* soft yellow */
        transition: background-color 0.2s ease;
    }

    /* Remove default cell border highlight */
    .dt-cell--focus {
        box-shadow: none !important;
        border: none !important;
    }
`);

This is the code I am using in report_name.js

Now this is localised solution. How do I use this to make it a global solution
4

I am not sure but you can do something like…

  1. Check route
  2. If it is a report get report name
  3. then add this
5

Thank you!!