autoheight и height у treetable

edited August 2018 in Technical questions

Добрый день!
Есть такой пример: https://snippet.webix.com/dczg3obj

Хотел бы сделать treetable с таким поведением: когда все элементы свёрнуты высота treetable подобрана согласно "autoheight: true", а когда осуществляется разворачивание элементов, то "autoheight: true" менялся бы на, например, "height: 270". В примере так и сделано. Но при разворачивании всех элементов не появляется скроллинг справа и самые нижние элементы оказываются недоступны. В идеале нужен скроллинг.

Т.е. когда все элементы свёрнуты высота treetable должна быть подобрана по содержимому, а когда разворачиваются элементы, то высота должна быть ограничена и должна быть возвожность скроллинга.

Comments

  • Здравствуйте @Dmitriy !

    Как вариант, когда данные пришли - выставить высоту в соответсвии с количеством айтемов ( treetable.data.getTopRange().length ) на первом уровне. Но если "ограничение" больше суммарной высоты этих айтемов, то тут можно использовать методы TreeStore (ссылка на методы тут).

    Количество видимых сейчас (открытых, на текущей странице и с учётом фильтрации, если она применена)
    treetable.data.count()
    Высоту одной строки, которая нужна для подсчёта общей высоты грида, можно прописать как
    treetable.config.rowHeight

    Cтандратная высота одной строки header'a - 47 пикселей

    Высоту придётся в любом случае делать кастомной, поэтому лучше не использовать autoheight, а прописать изменение высоты с помощью
    define + resize.

    Если количество видимых айтемов равно количеству айтемов на верхнем уровне - то выставляем одну высоту.
    Если видимых больше - считаем свои лимиты.

    Если очень нужно убрать скролл, то

    this.define({scrollY:true});
    this.refreshColumns();
    

    Но если его видимость критична, использовать лучше CustomScroll - его видно только по наведении курсора и только когда есть, что скроллить.

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!

In this Discussion