Is it possible to filter data in a dgrid like you can in a datagrid? If so, how?
http://stackoverflow.com/questions/12010731/is-it-possible-to-filter-data-in-a-dgrid-like-you-can-in-a-datagrid-if-so-how
by schlomm
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<script src="https://cdn.rawgit.com/phusick/cdn/jsfiddle/amd-packages.js"></script>
<div id="filter-wrapper">
<input
id="filter"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="
placeHolder: 'filter by name',
intermediateChanges:true
"
style="padding:2px;margin:3px;width:20em;"
/>
</div>
<div id="grid"></div>
CSS
html, body {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 11px;
}
#filter-wrapper {
background-color: lightyellow;
font-size: 14px;
}
#grid {
position: absolute;
top: 32px;
bottom: 0;
left: 0;
right: 0;
height: auto;
}
JavaScript
require([
"dojo/ready",
"dojo/_base/declare",
"dojo/store/Memory",
"dgrid/OnDemandGrid",
"data/dtuned",
"dijit/registry",
"dijit/form/TextBox",
"dojo/domReady!"
], function(
ready,
declare,
Memory,
Grid,
data,
registry
) {
ready(function() {
var timeoutId;
var filter = registry.byId("filter");
var store = new Memory({ data: data});
var filterQuery = function(item, index, items) {
var filterString = filter ? filter.get("value") + "" : "";
// early exists
if (filterString.length < 2) return true;
if (!item.Name) return false;
var name = (item.Name + "").toLowerCase();
if (~name.indexOf(filterString.toLowerCase())) { return true;}
return false;
}
var grid = new Grid({
store: store,
query: filterQuery,
columns: {
Name: "Name",
Year: "Year",
Artist: "Artist",
Album: "Album",
Genre: "Genre"
}
}, "grid");
filter.watch("value", function(name, oldValue, newValue) {
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
};
timeoutId = setTimeout(function() {
grid.refresh();
}, 300);
});
});
});