Hide Vertical Lines in Datatable

Webix JS
#1

Hello,
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)

Thanks

#2

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

<style>
  .myGrid .webix_cell{
  border-right:0 none !important;
  }
</style>
{
  view:"datatable",
  css:"myGrid"
}

or remove .myGrid to change cell style globally

#3

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

Thanks

#4

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

#5

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:

http://webix.com/snippet/87eb002a

#6

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.

#7

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 ?

Thanks

#8

Hi,

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

#9

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

Regards,

Sanket

#10

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

#11

try td[role=presentation] instead of .webix_cell