jQWidgets Forums

Tagged: javascript grid plugin, jquery grid filtering plugin

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Issues with FilterRow example Posts
April 8, 2014 at 7:37 pm Issues with FilterRow example #52736

gweber
Participant

I’m a newb to jqwidgets and my knowledge of jquery is very basic.

I am having a problem getting JQWGrid to work properly. I’m trying to implement the “Filter Row” example, modified to use my own datasource.

It’s mostly working, but I’m having several issues:

A bunch of my fields are dates, which instead of displaying as dates, show as [Object object]: http://gardencalc.drivingpeace.com/grid.htm
I’ve also set up filters on each column, but I can’t actually select anything from the checkboxes. Not sure why that is.

Also, is it possible to NOT have filters for the dates? I really only want the checkbox filters on the first 3 columns.

I’m pulling data out of mySQL using PHP. Here’s my raw data:
http://gardencalc.drivingpeace.com/grid_data.php

Here’s the source code for the “grid.htm” file:
<`!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this example is demonstrated how to bind jqxGrid to MySQL Database.</title>
<link rel=”stylesheet” href=”css/jqx/jqx.base.css” />
<script type=”text/javascript” src=”js/jqx/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxcore.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxdata.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxbuttons.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxlistbox.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxmenu.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxgrid.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxpanel.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxcalendar.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”js/jqx/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”js/jqx/globalize.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

var source =
{
datatype: “json”,
datafields: [
{ name: ‘Type’, type: ‘string’},
{ name: ‘Method’, type: ‘string’},
{ name: ‘Crop’, type: ‘string’},
{ name: ‘SowDirect’, type: ‘date’},
{ name: ‘SowTransplant’, type: ‘date’},
{ name: ‘Transplant’, type: ‘date’},
{ name: ‘BeginHarvest’, type: ‘date’},
{ name: ‘EndHarvest’, type: ‘date’}
],
url: ‘grid_data.php’,
cache: false
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 820,
source: source,
showfilterrow: true,
filterable: true,
selectionmode: ‘multiplecellsextended’,

columns: [
{ text: ‘Type’, filtertype: ‘checkedlist’, datafield: ‘Type’, width: 100},
{ text: ‘Method’, filtertype: ‘checkedlist’, datafield: ‘Method’, width: 100 },
{ text: ‘Crop’, filtertype: ‘checkedlist’, datafield: ‘Crop’, width: 100 },
{ text: ‘Sow Direct’, datafield: ‘SowDirect’, filtertype: ‘date’, width: 100, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Sow Transplant’, datafield: ‘SowTransplant’, filtertype: ‘date’, width: 100, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Transplant’, datafield: ‘Transplant’, filtertype: ‘date’, width: 100, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Begin Harvest’, datafield: ‘BeginHarvest’, filtertype: ‘date’, width: 100, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘End Harvest’, datafield: ‘EndHarvest’, filtertype: ‘date’, width: 100, cellsalign: ‘right’, cellsformat: ‘d’ }
]
});
$(‘#clearfilteringbutton’).jqxButton({ height: 25});
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”></div>
<input style=”margin-top: 10px;” value=”Remove Filter” id=”clearfilteringbutton” type=”button” />
</body>
</html>`

Any suggestions would be welcome.

Thanks!

April 8, 2014 at 8:12 pm Issues with FilterRow example #52737

Peter Stoev
Keymaster

Hi gweber,

Actually, you are asking that for a 2nd time. The response would be the same.
That happens because the Dates in your data source are stored in this way: {“date”:”2014-05-26 00:00:00″,”timezone_type”:3,”timezone”:”America\/Los_Angeles”} i.e the Date is actually an Object.

I think that the following: { name: ‘EndHarvest’, type: ‘date’} should be { name: ‘EndHarvest’, map: ‘EndHarvest>date’, type: ‘date’}

Best Regards,
Peter Stoev

April 9, 2014 at 8:05 pm Issues with FilterRow example #52811

gweber
Participant

Thank you Peter, that did the trick.

Can you also tell me why I can’t select anything from the checkbox filters on the first 3 columns?

And how do I NOT display filters for the date fields? I only want the checkbox filters on the first 3 columns.

Thank you!

April 10, 2014 at 2:15 am Issues with FilterRow example #52819

Peter Stoev
Keymaster

Hi gweber,

1. The Images used by our Themes are missing on your side. I suppose that you did not add the folder. That’s the reason you will not see the Calendar Icon, the CheckBox checks which are images, etc.
2. To disable the Filters of some columns, set their “filterable” property to false.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.