2

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

enter image description here

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?

Rob Bowman
  • 7,632
  • 22
  • 93
  • 200
  • Have you looked at your console output? for a start, `vm is not defined`. You should be applying your bindings to `ViewModel`. – brianlmerritt Apr 06 '16 at 07:00
  • Sorry Brian, I am confused. Line 24 of index.html is "var vm = new ViewModel();" – Rob Bowman Apr 06 '16 at 07:20
  • I was looking at script.js, not the .html. However, I still get that error on the plunkr... – brianlmerritt Apr 06 '16 at 07:26
  • You appear to have bindings in both script.js and the .html. Sorry, I am off to work, but you might want to have a look. If I get a chance later I will come back and have another look – brianlmerritt Apr 06 '16 at 07:29

2 Answers2

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

krishna
  • 508
  • 2
  • 8
0

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.

Rob Bowman
  • 7,632
  • 22
  • 93
  • 200