Adding javascript to a module grid

[maldarol]

I am working on a module and I created a grid for it but the row actions are not working properly. After some searching I found that the onclick javascript methods are not imported. I found a topic in this forum which helped me.

The new problem was that npm could not resolve method names, but it was solved when I found a github thread about it.

Now when I load the given page my browser console displays the following error message: Uncaught ReferenceError: file_not_found is not defined. The row actions still does not work.

My code in the template is:

{% block javascripts %}

        {{ parent()}}
        <script src="{{ asset('../../js/customGrid.bundle.js') }}"></script>

{% endblock %}

And my javascript looks like this:

 var $ = window.$;
 var Grid = window.components.Grid;
 var ReloadListActionExtension = window.extensions.ReloadListActionExtension;
 var ExportToSqlManagerExtension = window.extensions.ExportToSqlManagerExtension;
 var FiltersResetExtension = window.extensions.FiltersResetExtension;
 var SortingExtension = window.extensions.SortingExtension;
 var LinkRowActionExtension = window.extensions.LinkRowActionExtension;
 var SubmitGridExtension = window.extensions.SubmitGridExtension;
 var SubmitBulkExtension = window.extensions.SubmitBulkExtension;
 var BulkActionCheckboxExtension = window.extensions.BulkActionCheckboxExtension;
 var SubmitRowActionExtension = window.extensions.SubmitRowActionExtension;
 
 $(function() {
   var customGrid = new Grid('employeeToCountry');
   customGrid.addExtension(new ReloadListActionExtension());
   customGrid.addExtension(new ExportToSqlManagerExtension());
   customGrid.addExtension(new FiltersResetExtension());
   customGrid.addExtension(new SortingExtension());
   customGrid.addExtension(new LinkRowActionExtension());
   customGrid.addExtension(new SubmitGridExtension());
   customGrid.addExtension(new SubmitBulkExtension());
   customGrid.addExtension(new BulkActionCheckboxExtension());
   customGrid.addExtension(new SubmitRowActionExtension());
 });

Can anybody tell me what is the source of this problem?

[SmartDataSoft]

Hello, if your grid in admin I suggest you use backofficeheader hook and for frontend use displayed hook to add js.

 

It is not best practice to add js from module tpl file.

 

Hope you understand.

Thank you

[maldarol]

Thank you for your help.

Yes, my grid is in the back office, I tried to include the npm generated stuff in the template because it was recommend in the official dev docs.

 

Update:

My Delete row action is still a useless icon in every row, the grid does not have any javascript method and based on the terminal and the window object doesn't have components or extensions (however based on the docs it should)

Edited July 20, 2021 by maldarol (see edit history)

[maldarol]

I've made a mistake by downloading the wrong release of presta and it had no package.json in the admin/themes/new-theme folder so the dependencies were incorrect and the npm build generated a ton of errors.