Wijmo Core | Value Filter's uniqueValues
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<h1>Show unique values in Value Filter</h1>
<p>
If server side paging is applied for FlexGrid, the value filter shows the unique values for current page. If you need to show all the values, you need to set the <b>uniqueValues</b> for valueFilter of the column. </p>
<!-- FlexGrid -->
<div id="theGrid" style="max-height:300px;"></div>
JavaScript
onload=function(){
// Create FlexGrid
var grid= new wijmo.grid.FlexGrid("#theGrid",{
itemsSource:new wijmo.collections.CollectionView(getData(100),{
})
});
var countries="Australia,China,Greece,Germany,Japan,India,Italy,US,UK".split(",");
var gridFilter= new wijmo.grid.filter.FlexGridFilter(grid);
//gridFilter.getColumnFilter(1).valueFilter.uniqueValues=countries;
gridFilter.filterChanging.addHandler(function(s,e){
setTimeout(function(){
var cb=document.querySelector('[wj-part="cb-select-all"]');
// Change indeterminate state on Filter Dialog open
if(cb.indeterminate){
cb.indeterminate=false;
cb.checked=false;
}
// Change Select All check box state
document.querySelector('[wj-part="div-values"]').onclick=function(){
if(cb.indeterminate){
cb.indeterminate=false;
cb.checked=false;
}
}
// Apply Button Click
document.querySelector('[wj-part="btn-apply"]').onmousedown=function(){
if(!cb.indeterminate && !cb.checked){
cb.checked=false;
cb.indeterminate=true;
}
}
},50);
});
}
// generate Random Data
function getData(count){
var countries= "US,Japan,UK,China,India,Italy,Greece".split(","),
data=[];
for(var i=0;i<count;i++){
data.push({
id:i,
country:countries[i%countries.length],
sales:Math.random()*1000,
downloads:Math.random()*1000,
active:i%4==0
});
}
return data;
}