Problem with 'Dynamic' row height in treetable


I am using 'adjustRowHeight()' inorder to make the row height dynamic in a treetable.
But the folder for treetable gets dislocated.
Last row demonstrates the issue.

Any suggestions for this?


  • edited March 2018

    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:

  • edited March 2018

    Thank you very much for your support.

    How to add custom styles for columns on drag and drop columns?

    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".

  • Hello @sujith,
    There is no need to use onBeforeColumnDrop, just customize css class .webix_dd_over_column of the header.

  • edited March 2018

    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!.

  • Any help on this @WebixTeam

  • Hello,
    Please, look at this sample:
    There was used css for header and onAfterColumnDrop event which fires after the column has been dragged and dropped to the target position.

  • edited March 2018

    Hello @Nastja,

    Thank you for helping me.
    Please find the modified snippet.

    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?

  • edited March 2018

    Please, try this

    onAfterColumnDrop:function(source, target, event){
              obj.css = "my_after_drop_class"

    There is getColumnConfig returns the configuration object of the specified column.

  • 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.

  • 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

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!