kogrid filter not working - with plunker

Question

I'm trying to use the filter functionality of the knockoutjs ko grid. There are two problems:

1. the drop-down for the filter shows "Choose columns" but the end of the column names are overwritten by a table symbol
2. the filter functionality isn't working. As I type the data is not filtered

I have a plunkr for this here: https://plnkr.co/edit/Ibc0WZwyb4melgNDzcUo?p=preview

I have also tried with the most basic of grid options:

this.gridOptions = {
    data: self.myData,
    enablePaging: true,
    pagingOptions: self.pagingOptions,
    filterOptions: self.filterOptions
};

Can anyone see where I went wrong please?

Answer 1

The problem with the filter ui is because of insufficient spacing between the field name and a table symbol. This can be fixed by changing the kogrid css file. Unfortunately my css skills are limited so I'm not able to share the fix here.

Answer 2

li.kgColListItem {
    width: 100% !important;
}
li.kgColListItem label{ width:100%; float:left;}
.kgColList{ margin:0; padding:0 0 0 20px;}
.kgGroupIcon{ cursor:pointer;}

Below is the updated Plnkr

https://plnkr.co/edit/1jN4kc0yGZZX5bk0as1t?p=preview