JavaScript code not working properly in Odoo v14

Question

Good day, I hope you are doing well.

I am developing a new module in odoo, it's simple Parc Module.

I want to disable the checkboxes when the value of Stock is 0.

I wrote this code :

odoo.define('de_alfa_parc.CustomListRenderer', function (require) {
"use strict";
    var ListRenderer = require('web.ListRenderer');
    ListRenderer.include({
        _renderRow: function (record) {
            var self = this;
            var tr = this._super(record);
            var categ = ['Maintenance','Installation','Transport',"Volume d'impression"]
            console.log(record.data.small_category_name_field);
            tr.find("input[type='checkbox']").prop('disabled', record.data.stock <= 0 && !categ.includes(record.data.small_category_name_field) == true);
            return tr;
        },
    });
});

it's working well when I open the view and the checkboxes are disabled when the stock value is 0

BUT !!

When I touch any line, or modify any value, all the checkboxes become automatically enabled and I need to refresh the page so the script works again, can you please assit ?

Please to see the screnshots for more details

The code is working here on first load of the page I try to update the line The code stops working After refreshing the page, the code works again

Thank you in advance.

Answer 1

When you click on a row to edit, Odoo will set the row mode and change the selectors state depending on the edit mode

To keep the selectors disabled, you need to change how the _disableRecordSelectors and _enableRecordSelectors functions behave

They are defined inside the editable list renderer as follows:

_disableRecordSelectors: function () {
    this.$('.o_list_record_selector input').attr('disabled', 'disabled');
},

_enableRecordSelectors: function () {
    this.$('.o_list_record_selector input').attr('disabled', false);
},

Instead of overriding the list renderer, you can define a new list renderer that you can apply only on a specific list using the js_class attribute

Example:

odoo.define('MODULE_NAME.custom_tree_renderer', function (require) {
"use strict";
    // var core = require('web.core');
    var ListRenderer = require('web.ListRenderer');
    var ListView = require('web.ListView');
    var viewRegistry = require('web.view_registry');

    var CustomListRenderer = ListRenderer.extend({
        _renderRow: function (record) {
            ...
        },

        _disableRecordSelectors: function () {
            ...
        },

        _enableRecordSelectors: function () {
            ...
        },

    });

    var CustomListView = ListView.extend({
        config: _.extend({}, ListView.prototype.config, {
            Renderer: CustomListRenderer,
        }),
    });

    viewRegistry.add('custom_tree_renderer', CustomListView);
});

To use the custom list render, you need to set the js_class attribute on the tree tag:

<tree js_class="custom_tree_renderer">