jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Filter row on grid with XML binding
Tagged: datagrid xml filtering
This topic contains 8 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 10 months ago.
-
Author
-
Hi
I have used your grid with XML binding with success. Grid is showing the data I need. But now I am trying to apply filter row to that grid but can’t seem to get it to work. The expample you have does not apply to XML? How do I do this?
My Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example shows how to create a Grid from XML data.</title>
<link rel=”stylesheet” href=”/Nordicon/jqwidgets/styles/jqx.base.css” “text/css” />
<script type=”text/javascript” src=”/Nordicon/scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”/Nordicon/scripts/gettheme.js”></script><script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”/Nordicon/jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script><script type=”text/javascript”>
$(document).ready(function () {
var theme = getDemoTheme();var url = “/Nordicon/xml-files/sailinglist.xml”;
var source ={
datatype: “xml”,
datafields: [
{ name: ‘FromPortDescription’, map: ‘ROUTE>FromPortDescription’ },
{ name: ‘ToPortDescription’, map: ‘ROUTE>ToPortDescription’ },
{ name: ‘Vessel’, map: ‘ROUTE>Vessel’ },
{ name: ‘VoyNo’, map: ‘ROUTE>VoyNo’ },
{ name: ‘Closing’, map: ‘ROUTE>Closing’ },
{ name: ‘ETD’, map: ‘ROUTE>ETD’ },
{ name: ‘ETA’, map: ‘ROUTE>ETA’ },],
root: “SAILINGLIST”,
record: “ROUTE”,
id: ‘ROUTE>FromPortDescription’,
url: url
};// Create jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 900,
showfilterrow: true,
filterable: true,
theme: theme,
columnsresize: true,
selectionmode: ‘multiplecellsextended’,
columns: [
{ text: ‘FromPortDescription’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘FromPortDescription’, width: 200 },
{ text: ‘ToPortDescription’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘ToPortDescription’, width: 200 },
{ text: ‘Vessel’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘Vessel’, width: 150 },
{ text: ‘VoyNo’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘VoyNo’, width: 50 },
{ text: ‘Closing’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘Closing’, width: 100 },
{ text: ‘ETD’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘ETD’, width: 100 },
{ text: ‘ETA’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘ETA’, width: 100 }
]
});
$(‘#clearfilteringbutton’).jqxButton({ height: 25, theme: theme });
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
<input style=”margin-top: 10px;” value=”Remove Filter” id=”clearfilteringbutton” type=”button” />
</div>Hi andreasnissmark,
The datafields array in the provided code is not initialized correctly. The “type” member of each data field is not set. In addition, the jqxgrid.filter module is not referenced.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks!
I am seriously new to this, could you point me in the right direction in the code?Kind Regards
Hi andreasnissmark,
Just look at the initialization of this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filterrow.htm. Each datafield has “type” member – “string”, “number”, “date”, “bool”. The jqxgrid.filter.js is referenced, too.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHave added the reference and the grid now shows with filter boxes. Also added type: ‘string’ to all my datafields . The grid now shows but is empty, no values to display?
I have used your XML binding example as base and get all data in that one. It’s after I try to apply the filter that the data does not show. Do you see anything else that might screw this up? Checked all references as weel, all in both filtering example and XML binding exemple are present.var url = “/Nordicon/xml-files/sailinglist.xml”;
var source ={
datatype: “xml”,
datafields: [
{ name: ‘FromPortDescription’, map: ‘ROUTE>FromPortDescription’, type: ‘string’},
{ name: ‘ToPortDescription’, map: ‘ROUTE>ToPortDescription’, type: ‘string’ },
{ name: ‘Vessel’, map: ‘ROUTE>Vessel’, type: ‘string’ },
{ name: ‘VoyNo’, map: ‘ROUTE>VoyNo’, type: ‘string’ },
{ name: ‘Closing’, map: ‘ROUTE>Closing’, type: ‘string’ },
{ name: ‘ETD’, map: ‘ROUTE>ETD’, type: ‘string’ },
{ name: ‘ETA’, map: ‘ROUTE>ETA’, type: ‘string’ },],
root: “SAILINGLIST”,
record: “ROUTE”,
id: ‘ROUTE>FromPortDescription’,
url: url
};Hi andreasnissmark,
A syntax error in the provided code: “{ name: ‘ETA’, map: ‘ROUTE>ETA’, type: ‘string’ },“. After last array item, you should not have ‘,’.
In addition, it would be useful if you provide a full sample which demonstrates your scenario. That will allow us to test your code.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks, trid the comma but same result. Pls see below HTML and XML files, is that enough to check if I paste it in here?
This example shows how to create a Grid from XML data.
$(document).ready(function () {
var theme = getDemoTheme();var url = “/Nordicon/xml-files/sailinglist.xml”;
var source ={
datatype: “xml”,
datafields: [
{ name: ‘FromPortDescription’, map: ‘ROUTE>FromPortDescription’, type: ‘string’},
{ name: ‘ToPortDescription’, map: ‘ROUTE>ToPortDescription’, type: ‘string’ },
{ name: ‘Vessel’, map: ‘ROUTE>Vessel’, type: ‘string’ },
{ name: ‘VoyNo’, map: ‘ROUTE>VoyNo’, type: ‘string’ },
{ name: ‘Closing’, map: ‘ROUTE>Closing’, type: ‘string’ },
{ name: ‘ETD’, map: ‘ROUTE>ETD’, type: ‘string’ },
{ name: ‘ETA’, map: ‘ROUTE>ETA’, type: ‘string’ }],
root: “SAILINGLIST”,
record: “ROUTE”,
id: ‘ROUTE>FromPortDescription’,
url: url
};// Create jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 900,
showfilterrow: true,
filterable: true,
theme: theme,
selectionmode: ‘multiplecellsextended’,
columns: [
{ text: ‘FromPortDescription’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘FromPortDescription’, width: 200 },
{ text: ‘ToPortDescription’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘ToPortDescription’, width: 200 },
{ text: ‘Vessel’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘Vessel’, width: 150 },
{ text: ‘VoyNo’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘VoyNo’, width: 50 },
{ text: ‘Closing’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘Closing’, width: 100 },
{ text: ‘ETD’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘ETD’, width: 100 },
{ text: ‘ETA’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘ETA’, width: 100 }
]});
$(‘#clearfilteringbutton’).jqxButton({ height: 25, theme: theme });
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});
});XML FILE
SE
GOTHENBURG
TTT
TAICHUNG
YM UNANIMITY
0005E
20130910
20130912
20131030SE
GOTHENBURG
SHC
SHUNDE RONGQI GUANGDONG
COSCO FAITH
0009E
20130923
20130926
20131110SE
GOTHENBURG
SHC
SHUNDE RONGQI GUANGDONG
COSCO FRANCE
0002E
20130826
20130829
20131013SE
GOTHENBURG
SHC
SHUNDE RONGQI GUANGDONG
COSCO HARMONY
0012.E
20130909
20130912
20131027SE
GOTHENBURG
SHC
SHUNDE RONGQI GUANGDONG
COSCO HOPE
0008E
20130916
20130919
20131103SE
GOTHENBURG
SHC
SHUNDE RONGQI GUANGDONG
COSCO PRIDE
0012E
20130902
20130905
20131020SE
GOTHENBURG
LBH
LABUAN
COSCO ASIA
0025E
20130903
20130905
20131024SE
GOTHENBURG
LBH
LABUAN
COSCO ENGLAND
0001E
20130924
20130926
20131114SE
GOTHENBURG
LBH
LABUAN
HELSINKI BRIDGE
0007E
20130827
20130827
20131015<?xml version="1.0" encoding="UTF-8" ?><SAILINGLIST> </ROUTE> <ROUTE> <FromPort>SE</FromPort> <FromPortDescription>GOTHENBURG</FromPortDescription> <ToPort>TTT</ToPort> <ToPortDescription>TAICHUNG</ToPortDescription> <Vessel>YM UNANIMITY</Vessel> <VoyNo>0005E</VoyNo> <Closing>20130910</Closing> <ETD>20130912</ETD> <ETA>20131030</ETA> </ROUTE> <ROUTE> <FromPort>SE</FromPort> <FromPortDescription>GOTHENBURG</FromPortDescription> <ToPort>SHC</ToPort> <ToPortDescription>SHUNDE RONGQI GUANGDONG</ToPortDescription> <Vessel>COSCO FAITH</Vessel> <VoyNo>0009E</VoyNo> <Closing>20130923</Closing> <ETD>20130926</ETD> <ETA>20131110</ETA> </ROUTE> <ROUTE> <FromPort>SE</FromPort> <FromPortDescription>GOTHENBURG</FromPortDescription> <ToPort>SHC</ToPort> <ToPortDescription>SHUNDE RONGQI GUANGDONG</ToPortDescription> <Vessel>COSCO FRANCE</Vessel> <VoyNo>0002E</VoyNo> <Closing>20130826</Closing> <ETD>20130829</ETD> <ETA>20131013</ETA> </ROUTE> <ROUTE> <FromPort>SE</FromPort> <FromPortDescription>GOTHENBURG</FromPortDescription> <ToPort>SHC</ToPort> <ToPortDescription>SHUNDE RONGQI GUANGDONG</ToPortDescription> <Vessel>COSCO HARMONY</Vessel> <VoyNo>0012.E</VoyNo> <Closing>20130909</Closing> <ETD>20130912</ETD> <ETA>20131027</ETA> </ROUTE> <ROUTE> <FromPort>SE</FromPort> <FromPortDescription>GOTHENBURG</FromPortDescription> <ToPort>SHC</ToPort> <ToPortDescription>SHUNDE RONGQI GUANGDONG</ToPortDescription> <Vessel>COSCO HOPE</Vessel> <VoyNo>0008E</VoyNo> <Closing>20130916</Closing> <ETD>20130919</ETD> <ETA>20131103</ETA> </ROUTE> <ROUTE> <FromPort>SE</FromPort> <FromPortDescription>GOTHENBURG</FromPortDescription> <ToPort>SHC</ToPort> <ToPortDescription>SHUNDE RONGQI GUANGDONG</ToPortDescription> <Vessel>COSCO PRIDE</Vessel> <VoyNo>0012E</VoyNo> <Closing>20130902</Closing> <ETD>20130905</ETD> <ETA>20131020</ETA> </ROUTE> <ROUTE> <FromPort>SE</FromPort> <FromPortDescription>GOTHENBURG</FromPortDescription> <ToPort>LBH</ToPort> <ToPortDescription>LABUAN</ToPortDescription> <Vessel>COSCO ASIA</Vessel> <VoyNo>0025E</VoyNo> <Closing>20130903</Closing> <ETD>20130905</ETD> <ETA>20131024</ETA> </ROUTE> <ROUTE> <FromPort>SE</FromPort> <FromPortDescription>GOTHENBURG</FromPortDescription> <ToPort>LBH</ToPort> <ToPortDescription>LABUAN</ToPortDescription> <Vessel>COSCO ENGLAND</Vessel> <VoyNo>0001E</VoyNo> <Closing>20130924</Closing> <ETD>20130926</ETD> <ETA>20131114</ETA> </ROUTE> <ROUTE> <FromPort>SE</FromPort> <FromPortDescription>GOTHENBURG</FromPortDescription> <ToPort>LBH</ToPort> <ToPortDescription>LABUAN</ToPortDescription> <Vessel>HELSINKI BRIDGE</Vessel> <VoyNo>0007E</VoyNo> <Closing>20130827</Closing> <ETD>20130827</ETD> <ETA>20131015</ETA> </ROUTE> </SAILINGLIST>
Hi andreasnissmark,
In the provided code, you missed to set the Grid’s source property to an instance of jqxDataAdapter which is not initialized, too.
Here’s a working code:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to create a Grid from Array data.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); var url = "test.xml"; var source = { datatype: "xml", datafields: [ { name: 'FromPortDescription', map: 'ROUTE>FromPortDescription', type: 'string'}, { name: 'ToPortDescription', map: 'ROUTE>ToPortDescription', type: 'string' }, { name: 'Vessel', map: 'ROUTE>Vessel', type: 'string' }, { name: 'VoyNo', map: 'ROUTE>VoyNo', type: 'string' }, { name: 'Closing', map: 'ROUTE>Closing', type: 'string' }, { name: 'ETD', map: 'ROUTE>ETD', type: 'string' }, { name: 'ETA', map: 'ROUTE>ETA', type: 'string' } ], root: "SAILINGLIST", record: "ROUTE", id: 'ROUTE>FromPortDescription', url: url }; var dataAdapter = new $.jqx.dataAdapter(source); // Create jqxGrid $("#jqxgrid").jqxGrid( { width: 900, source: dataAdapter, showfilterrow: true, filterable: true, theme: theme, columns: [ { text: 'FromPortDescription', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'FromPortDescription', width: 200 }, { text: 'ToPortDescription', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'ToPortDescription', width: 200 }, { text: 'Vessel', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'Vessel', width: 150 }, { text: 'VoyNo', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'VoyNo', width: 50 }, { text: 'Closing', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'Closing', width: 100 }, { text: 'ETD', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'ETD', width: 100 }, { text: 'ETA', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'ETA', width: 100 } ] }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.