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 vusan
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<script src="http://amd.egoworx.com/jsfiddle-dojo-require.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);
});
});
});