Hi,
I am using the IgGrid where at least one column is an object. When the user is editing that row I am using the IgCombo to change the object. The data source is set when iggrid updating event is triggered since I dont have the data for the combobox when the page loads. When the user has chosen an object from the list it displays the object.Name property in the grid. And that works, but my problem is:
The IgCombo should display multiple properties in the list, but not nearly all. And those properties that are visible, should the user be able to filter by. I have made four properties visible by using: itemTemplate: "${Name} | ${Id} | ${object1.Property1} | ${object2.property1}"
But as long as textKey is set to Name, it only filters by name. I want the filtering to behave as the user writes, it should check all four properties and if any is matching/containing the letter/word, then display those rows in the combolist.
I tried to make a hack by creating my own filtering ny binding to the IgCombo filtering event like this:
But it behaves strange when I set the datasource while filtering/having the combox open, so it was not an usable solution.
$(document).delegate($("#mainGrid").igGridUpdating("editorForKey", "Product"), "igcombofiltering", function (evt, ui) {
var combo = $("#mainGrid").igGridUpdating("editorForKey", "Product"); var text = combo.igCombo("text"); var list = []; if (!(text === undefined || text === null)) { $.each(scope.ProductList, function (value, key) {if (this.Name.toLowerCase().indexOf(text) > -1) {list.push(this); return true; }//Do similar checks for all properties that should be filtered }); }combo.igCombo("option", "dataSource", list); combo.igCombo("dataBind");});
Hello David,
Sorry for misunderstanding your initial post.
The way filtering works within the igCombo is by using text key. Given that you are using itemTemplate, you can modify the textKey to a property that contains the visible properties.
For example, in your data array, for every object you can create a property called AllProps that contains a string field that you want the user the be able to filter on. A basic example would be:
var data = [ { "ID":1, "Name": "John Smith", "Age": 45, "relationship": "single", "object": {"property1": "123", "propertyTwo": "random"}, "AllProps": "John Smith 45 single" }, { "ID":2, "Name": "Mary Johnson", "Age": 32, "relationship": "married", "object": {"property1": "firstValue", "propertyTwo": "secondValue"}, "AllProps": "Mary 32 married" }, { "ID":3, "Name": "Bob Ferguson", "Age": 27, "relationship": "single", "object": {"property1": "firstValue", "propertyTwo": "secondValue"}, "AllProps": "Bob 27 single" } ];
Then you can change your textKey option to this:
textKey: "AllProps",
Here is a modified jsfiddle demonstrating the expected behavior: http://jsfiddle.net/tn955t3s/
Let me know if I can be of further assistance.
Thanks for feedback, but you misunderstood my problem, I might have been a bit unclear.
It`s not grid filtering I am trying to achieve, but igCombo filtering, thats why I put it in this forum section.
So the question is actually unconnected to the grid although in my case I have my igCombo in a grid.
The question is why can I only filter the igCombo on one property?
Attached a fiddle to show my problem http://jsfiddle.net/cpnnkm5L/
This situation seems to be perfectly suited for a custom filter. You can check out our sample here on how to implement a custom filter: http://www.igniteui.com/grid/custom-conditions-filtering