jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
79 lines (74 loc) • 4.46 kB
HTML
<html lang="en">
<head>
<title id='Description'>This example illustrates the Grid's Date and Range Filters. The Range filter in the second column requires two clicks in the Calendar to select the range's start and end. The Date filter in the third column requires a single click to filter by the selected date.</title>
<meta name="description" content="JavaScript Grid Filtering by Date" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = generatedata(500);
var source =
{
localdata: data,
datafields:
[
{ name: 'name', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'date', type: 'date'},
{ name: 'range', map: 'date', type: 'date' },
{ name: 'quantity', type: 'number' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#grid").jqxGrid(
{
width: getWidth('Grid'),
source: dataAdapter,
showfilterrow: true,
filterable: true,
selectionmode: 'multiplecellsextended',
columns: [
{ text: 'Name', columntype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: '30%' },
{ text: 'Range', datafield: 'range', filtertype: 'range', cellsalign: 'right', width: '35%', cellsformat: 'd' },
{ text: 'Date', datafield: 'date', filtertype: 'date', cellsalign: 'right', width: '35%', cellsformat: 'd' }
]
});
$('#clearfilteringbutton').jqxButton({ height: 25});
$('#clearfilteringbutton').click(function () {
$("#grid").jqxGrid('clearfilters');
});
});
</script>
</head>
<body class='default'>
<div id="grid">
</div>
<input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" />
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>