Hide Vertical Lines in Datatable

How to hide vertical lines in datatable. Here is snippet:- http://webix.com/snippet/37ef9685

I need to hide gray vertical lines for each column. (In header, column name should contain vertical lines but not in table)




  • you can create custom style like that and set datatable's css

      .myGrid .webix_cell{
      border-right:0 none !important;

    or remove .myGrid to change cell style globally

  • Thanks again @intregal. Just one question, Can we add Filter in menu of column.
    In webix we show filters below column name. But can we add column filters in menu like this snippet ? http://screencast.com/t/WjOby7sus


  • yes, it is possible. though not 'out of the box', but you can create custom filter to implement this kendo-styled menu.

  • Perhaps a custom menu will be a simpler solution than a new filter. Please check the related topic, there are several useful tips for such task.

    Also, here's a sample:


  • edited November 2016

    yes, it has to be a contextmenu. but implementation should be related to custom filter, IMO. if you want to create an extended filter, basic button click is not enough.

  • Hello,
    I can use contextmenu but problem is I need to create custom filter for every column where I need filters. So how can I use serverSelectFilter in contextmenu?

    Like in this snippet http://webix.com/snippet/1740833b On click of "Film Title`"menu appears. But what I need is serverSelectFiler OR richSelectFilter in that menu like Kendo-UI. Is it possible in Webix ?


  • edited November 2016


    The simplest way to mimic serverSelectFilter is to create a ui.select within ui.context and then connect it to the datatable. At the same time, the onChange event of the ui.select will get you the necessary parameter for data reloading.

    Check the following snippet, please: http://webix.com/snippet/3496ad6d

  • @Helga, It seems to be working fine. But there are cases where menu filter
    will not help. Like,

    1) Remote Sorting - To apply sorting I need to click on column header but eventually
    menu will also appear because I have implemented above solution for filters. So I need
    to find other solution for it.

    2) If I have filters in menu then by looking on data table, anybody would not able to identify whether data is filtered or not. IMO, internally webix should apply css on column header so that user will know table is filtered. Though we can apply css manually but I have to manage each time when filter is remove.

    Anyway thanks for the response.



  • edited April 2018

    Hi, what if I want to hide the header vertical line as well? I tried

    .myGrid .webix_cell {
            border-right:0 none !important;

    But it doesn't work

  • try td[role=presentation] instead of .webix_cell

Sign In or Register to comment.