Problem with 'Dynamic' row height in treetable

Webix JS
#1

Hi,

I am using ‘adjustRowHeight()’ inorder to make the row height dynamic in a treetable.
But the folder for treetable gets dislocated.
https://snippet.webix.com/d5j1qh2r
Last row demonstrates the issue.

Any suggestions for this?

#2

Folder icon is defined as a background image, so the only way is to apply the CSS position:

  .webix_tree_folder, .webix_tree_folder_open {
    background-position:0px 7px;
  }

Or you can replace the default folder icons via custom type: https://snippet.webix.com/qqi7okb3

#3

Thank you very much for your support.

How to add custom styles for columns on drag and drop columns?
https://snippet.webix.com/f0olscu8

In the example above when i drag “Film title” to “Mode” column, “Film Title” header should become Bold and Italic.

Is there a way to do this?
I am using “onBeforeColumnDrop”.

#4

Hello @sujith,
There is no need to use onBeforeColumnDrop, just customize css class .webix_dd_over_column of the header.
Example: https://snippet.webix.com/eu0wbwj4

#5

Hi @Nastja thank you for your time once again.

I was looking for a method to change column header style permanently on drop.
In this example the column header which we drag and dropped, should turn bold and italic.
Here the style is getting removed once we drop!.

#6

Any help on this @WebixTeam

#7

Hello,
Please, look at this sample: https://snippet.webix.com/9m9s0vtd
There was used css for header and onAfterColumnDrop event which fires after the column has been dragged and dropped to the target position.

#8

Hello @Nastja,

Thank you for helping me.
Please find the modified snippet.
https://snippet.webix.com/8os36yhv

On dropping the column, we are adding styles to the column header.
But once we drag and drop another column, the previous column header styles are getting removed.
Is it possible to persist the previous styles(italic and bold) for all columns that are dragged and dropped until we refresh the page?

#9

Please, try this

onAfterColumnDrop:function(source, target, event){
        this.getColumnConfig(target).header.forEach(obj=>{
          obj.css = "my_after_drop_class"
        });
        this.refreshColumns();
      }

Example: https://snippet.webix.com/0rumk2ej
There is getColumnConfig returns the configuration object of the specified column.

#10

Great, That solved half of my problem.
Is there any webix function to fetch all Datatable ‘header columns’, similar to getHeaderNode() or getColumnConfig(). Because i have to loop through headers and add style to some nodes.

#11

You can iterate through all columns via grid.config.columns or eachColumn method, define to all headers css property and then call refreshColumns to render the datatable with new changes