igGrid - excel style filter contains condition
by georgianastasov
HTML
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/nw-products"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<table id="grid"></table>
<div id="combo" style="margin-top:1rem;"></div>
JavaScript
$(function () {
let uniqueCategoriesSet = new Set();
let uniqueCategories = [];
northwindProducts.forEach(function (product) {
uniqueCategoriesSet.add(product.CategoryName)
});
uniqueCategories.push('All');
uniqueCategoriesSet.forEach(function (item) {
uniqueCategories.push(item);
});
$.ig.CustomComboEditorProvider = $.ig.CustomComboEditorProvider || $.ig.EditorProviderCombo.extend({
setSize: function (width, height) {
this.editor.element.css({
width: width,
height: height
});
},
getValue: function () {
for(let i = 0; i < this.editor.value().length; i++){
if(this.editor.value()[i] === "All"){
this.editor.selectAll();
}
}
return this.editor.value();
},
destroy: function () {
this.editor.element.remove();
}
});
$("#grid").igGrid({
autoGenerateColumns: false,
width: '100%',
height: '500px',
columns: [
{ headerText: "Product Name", key: "ProductName", dataType: "string" },
{ headerText: "Units In Stock", key: "InStock", dataType: "number" },
{ headerText: "Category", key: "CategoryName", dataType: "string" }
],
dataSource: northwindProducts,
autoCommit: true,
features: [
{
name: "Filtering",
type: "local",
columnSettings: [
{
columnKey: "CategoryName",
...