Posted 23 May 2024, 2:11 pm EST
In a grid with many results, where when performing a filter on a column, where the data in that column there are more than 250 different results, not all of them appear, there is a default setting set to 250.
In my example, the column has 2000 different results, when I click on filter, 250 appear, I deselect only one, and I order filter, the result only brings 249, not 1999!
In the attached video, I demonstrate it better.
I recorded the video on the website https://developer.mescius.com/wijmo/demos/Grid/FilteringSearching/Excel-likeFilter/Overview/vue, where I changed the code as below
<template>
<div class="container-fluid">
<!-- the grid -->
<wj-flex-grid :itemsSource="data" :initialized="initializeGrid">
<wj-flex-grid-filter />
</wj-flex-grid>
</div>
</template>
<script>
import "bootstrap.css";
import Vue from "vue";
import "@mescius/wijmo";
import "@mescius/wijmo.vue2.grid.grouppanel";
import "@mescius/wijmo.vue2.grid";
import "@mescius/wijmo.vue2.grid.filter";
import "@mescius/wijmo.vue2.viewer";
import "@mescius/wijmo.vue2.grid.detail";
import "@mescius/wijmo.vue2.grid.search";
import "@mescius/wijmo.input";
import "@mescius/wijmo.cultures/wijmo.culture.pt";
import * as wjGridFilter from '@mescius/wijmo.grid.filter';
import "@mescius/wijmo.styles/wijmo.css";
import * as wjcCore from "@mescius/wijmo";
import * as wjcGrid from "@mescius/wijmo.grid";
let App = Vue.extend({
name: "app",
data: function() {
return {
objGrid: {},
colunas: [
{ binding: "id" },
{ binding: "country" },
{ binding: "downloads" },
{ binding: "sales" },
{ binding: "expenses" }
],
data: this.getData()
};
},
methods: {
initializeGrid(flex) {
console.log('initializeGrid#01');
this.objGrid = flex;
try {
console.log('initializeGrid#02');
var filter = new wjGridFilter.FlexGridFilter(this.objGrid);
console.log('initializeGrid#03');
this.colunas.forEach( (obj) => {
console.log('initializeGrid#04');
console.log('before', obj.binding, filter.getColumnFilter(obj.binding).valueFilter.maxValues);
console.log('initializeGrid#05');
filter.getColumnFilter(obj.binding).valueFilter.maxValues = 100000;
console.log('initializeGrid#06');
console.log('after', obj.binding, filter.getColumnFilter(obj.binding).valueFilter.maxValues);
console.log('----');
});
} catch (err) {
console.log("ERRO", err)
}
console.log('initializeGrid#FIM');
},
getData: function() {
// create some random data
let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
data = [];
for (let i = 0; i < 2000; i++) {
data.push({
id: i+1,
country: countries[i % countries.length],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
data.push({
id: i+1,
country: countries[i % countries.length],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
}
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>
<style>
.wj-flexgrid {
max-height: 500px;
margin: 10px 0;
}
body {
margin-bottom: 20px;
}
/* show images on filtered columns */
.custom-icons .wj-glyph-filter {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABKUlEQVQ4ja2QP0vDQBiHf/cndzQhJKGGK6HQHFnsII4h4GfQqas4+zGcXDs5dNRPYj+EoFt316CDPZcrhNY0Mb0HnuV43+e4AxxhjKF1XU+bZ3MANwOdH9wghHgAYIZod/8OKqWWRVHc9VEptWwNJklyBeCbUrrRWs8Wi4U4ptZ6RindAPiyu4cEQXALYMsYM57nHZUxZgBs7U47vu/3/ks72wlhjL10xRhjz31iAICqqkac83VbjHO+rqpq1DsIAGEYjoUQH1JK01QI8R6G4fhfsR15nk+SJLlomuf5ZFAMANI0fcTec+3ZacEoilZRFK2cBQGcW90EpZT3ToJKqWtCyCcA43ne28lBAMiy7ExK+UQI+XES3BHH8aWU8tVZ0ELKspx2jznkF5WQhrjMdSwdAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: bottom right;
margin-top: 2px;
width: 20px;
height: 20px;
border: none;
}
.custom-icons .wj-glyph-filter:after {
display: none;
}
/* make active filter images 25% larger */
.custom-icons .wj-filter-on .wj-glyph-filter {
transform: scale(1.25);
}
/* change the color of the filter glyphs */
.custom-colors .wj-glyph-filter {
color: red;
font-size: 125%;
}
</style>How to solve?
