{"id":1026,"date":"2020-07-18T06:13:20","date_gmt":"2020-07-18T06:13:20","guid":{"rendered":"https:\/\/www.confianzit.com\/cit-blog\/?p=1026"},"modified":"2022-10-31T17:53:28","modified_gmt":"2022-10-31T17:53:28","slug":"tree-view-button-avoiding-the-blank-space-in-the-tree-header-for-corresponding-button","status":"publish","type":"post","link":"https:\/\/www.confianzit.com\/cit-blog\/tree-view-button-avoiding-the-blank-space-in-the-tree-header-for-corresponding-button\/","title":{"rendered":"Tree View Button: Avoiding the Blank Space in the Tree Header for Corresponding Button in Odoo"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”3.22″][et_pb_row _builder_version=”4.9.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ column_structure=”3_5,2_5″ sticky_enabled=”0″][et_pb_column type=”3_5″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.9.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ module_class=”blog-left-content” sticky_enabled=”0″]<\/p>\n

In a normal case, we can create a view by using the corresponding fields in the database table (Odoo model) i.e., the header value of the tree view will be the string value of these fields. But it will be entirely different in case of a button.<\/p>\n

<\/p>\n

In model view, the button will be an instance but not a field (not a column) in the database table. Because of this, in the tree header there will be a blank space for the corresponding button.<\/p>\n

<\/p>\n

Getting started<\/strong><\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

STEP 1:  ADD  \/static\/src\/xml\/{FILENAME}.xml\n\nodoo.define(ModuleName.EditableListRenderer', function (require) {\n\"use strict\";\n\nvar ListRenderer = require('web.ListRenderer');\n\nListRenderer.include({\n  _renderHeaderCell: function (node) {\n        const $th = this._super.apply(this, arguments);\n        if (node.attrs.class === 'custom_identifier'){\n            $th.text(node.attrs.string);\n        }\n        return $th;\n    },\n});\n});\n\n<\/code><\/pre>\n
<\/p>\n
<\/p>\n
STEP 2: Add custom class for identifying the button, the given string value is used to render the table header.\n\n<button name=\"{{ ACTIONNAME }}\"\ntype=\"{{ ACTIONTYPE }}\" \nicon=\"fa-truck\" \nstring=\"Procurement\"\n        class=\"custom_identifier\"\/>\n\n<\/code><\/pre>\n
<\/p>\n
<\/p>\n
STEP 3: Add the JS files in Odoo assets.\n\n<template id=\"assets_frontend\" inherit_id=\"web.assets_backend\" name=\"table style\">\n    <xpath expr=\".\" position=\"inside\">\n         <script type=\"text\/javascript\"\nsrc=\"\/ModuleName\/static\/src\/js\/{{ FILENAME }}.js\"><\/script>\n     <\/xpath>\n <\/template>\n\n<\/code><\/pre>\n
<\/p>\n
<\/p>\n
STEP 4:  __manifest__.py\n\n\u2018data: [\n\u201cviews\/assets.xml\u201d,\n]\n<\/code><\/pre>\n
<\/p>\n
<\/p>\n
STEP 5:  Server Restart\n<\/code><\/pre>\n
<\/p>\n
HIRE AN ODOO DEVELOPER <\/strong><\/a><\/p>\n
<\/p>\n
If you like us to help you with your next Odoo implementation<\/a> project please contact us! Also check out our\u00a0Odoo pricing<\/a>\u00a0page to know how much will it cost for a successful Odoo Implementation for your business.\u00a0<\/p>\n
<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_code _builder_version=”4.9.4″ _module_preset=”default” locked=”off” global_module=”2151″]<\/p>\n
  <\/p>\n
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n