jQWidgets Forums

jQuery UI Widgets Forums Grid Filter row on grid with XML binding

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Filter row on grid with XML binding #27763

    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>

     

     

     

    Filter row on grid with XML binding #27765

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Filter row on grid with XML binding #27766

    Thanks!
    I am seriously new to this, could you point me in the right direction in the code?

    Kind Regards

    Filter row on grid with XML binding #27767

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Filter row on grid with XML binding #27768

    Have 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
    };

    Filter row on grid with XML binding #27769

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Filter row on grid with XML binding #27770

    Thanks, 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
    20131030

    SE
    GOTHENBURG
    SHC
    SHUNDE RONGQI GUANGDONG
    COSCO FAITH
    0009E
    20130923
    20130926
    20131110

    SE
    GOTHENBURG
    SHC
    SHUNDE RONGQI GUANGDONG
    COSCO FRANCE
    0002E
    20130826
    20130829
    20131013

    SE
    GOTHENBURG
    SHC
    SHUNDE RONGQI GUANGDONG
    COSCO HARMONY
    0012.E
    20130909
    20130912
    20131027

    SE
    GOTHENBURG
    SHC
    SHUNDE RONGQI GUANGDONG
    COSCO HOPE
    0008E
    20130916
    20130919
    20131103

    SE
    GOTHENBURG
    SHC
    SHUNDE RONGQI GUANGDONG
    COSCO PRIDE
    0012E
    20130902
    20130905
    20131020

    SE
    GOTHENBURG
    LBH
    LABUAN
    COSCO ASIA
    0025E
    20130903
    20130905
    20131024

    SE
    GOTHENBURG
    LBH
    LABUAN
    COSCO ENGLAND
    0001E
    20130924
    20130926
    20131114

    SE
    GOTHENBURG
    LBH
    LABUAN
    HELSINKI BRIDGE
    0007E
    20130827
    20130827
    20131015

    Filter row on grid with XML binding #27771
    <?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>
    Filter row on grid with XML binding #27796

    Peter Stoev
    Keymaster

    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 Stoev

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

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

You must be logged in to reply to this topic.