Some questions about filtering

[kbloemParticipant]

Hello, i use the code below for my grid.

        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                { name: 'taal', type: 'string'},
                { name: 'titel', type: 'string'},
                { name: 'sitenaam', type: 'string'},
                { name: 'gamer_int', type: 'string'},
				{ name: 'url', type: 'string'},
				{ name: 'siteurl', type: 'string'},
                { name: 'datum', type: 'string'}
                ],
                url: 'http://www.site.nl/code_games/nieuws_windows_archief_data.php',  
                cache: false
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
			
            var imagerenderer = function (row, datafield, value) {
                return '<img src="../../images/' + value + '" />';
            }
			
			var profilerenderer = function(row, cell, value) {
            return '<a href="http://www.site.nl/index.php/component/comprofiler/userprofile/'+value+'" vertical-align="middle"/>'+value+'</a>'
			}
			
			var paginalinkrenderer = function(row, column, value, defaultHtml, columnSettings, rowData) {
			return '<a href="' + rowData.url + '" target="_blank" data-rokbox="">' + value + '</a>';
			}
		
			var sitelinkrenderer = function(row, column, value, defaultHtml, columnSettings, rowData) {
			return '<a href="' + rowData.siteurl + '" target="_blank">' + value + '</a>';
			}
		
			var linkrenderer = function (row, column, value) {
                if (value.indexOf('#') != -1) {
                    value = value.substring(0, value.indexOf('#'));
                }
                var format = { target: '"_blank" data-rokbox=""' };
                var html = $.jqx.dataFormat.formatlink(value, format);
                return html; 
            }
			
			var columnrenderer = function (value) {
                return '<div style="text-align: left; margin-top: 2px; vertical-align: center;font-weight:bold;font-size:13px;">' + value + '</div>';
            }

			var datumrenderer = function (row, column, value) {
                return '<div style="text-align: left; margin-top: 0px; vertical-align: center;">' + value + '</div>';
            }
			
			$("#jqxgrid").jqxGrid(
            {
                pagesize : 20,
				pagesizeoptions: ['20', '50', '100'],
				width : 1170,
				theme:"black",
				source: dataAdapter,
				filterable: true,
				pageable: true, 
				autoheight: true,
				filtermode: 'excel',
				selectionmode: 'multiplecellsextended',
				columns: [
                { text: '', datafield: 'taal' , width: 30, cellsrenderer: imagerenderer, renderer: columnrenderer,filterable: false},
                { text: 'Titel', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'titel' ,  width: 700, cellsrenderer: paginalinkrenderer, renderer: columnrenderer,filterable: false}, 
                { text: 'Website', datafield: 'sitenaam', width: 190, cellsrenderer: sitelinkrenderer, renderer: columnrenderer },
                { text: 'Ingezonden Door', datafield: 'gamer_int', width: 150, cellsrenderer: profilerenderer, renderer: columnrenderer },
                { text: 'Datum', datafield: 'datum', filtertype: 'date', width: 100, renderer: columnrenderer, cellsrenderer: datumrenderer,filterable:false} 
                ]
            }); 
			

        }); 

I am not very happy with the way i did i right now. When i set the showfilterrow: true, to get the page to display like the “Filter Row” Demo, the site will not load the page. When i remove the showfilterrow, truevalue the page will display the grid again.

How can i make sure that doesn’t happen?

Thank You!

Regards,
Kenny

[Peter StoevKeymaster]

Hi kbloem,

I did not understand your question. jqxGrid has 2 filtering modes – with filter row and with filter menu. The option that you use right now is with filter menu.

Best Regards,
Peter Stoev

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

[kbloemParticipant]

When i set showfilterrow: true, the page will not load anymore. When i remove that option there are no issues.

But i need that option….

[Peter StoevKeymaster]

Hi kbloem,

Which version of jQWidgets do you use? Could you provide full example which we would be able to run?

We cannot reproduce the behavior which you describe. Below is a sample based on your initialization.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Enter some data into the Filter Row.</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.pager.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: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };

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

            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                filtermode: 'excel',
                pagesize: 20,
                pagesizeoptions: ['20', '50', '100'],
                showfilterrow: true,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
                  {
                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                  },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number',  cellsalign: 'right' }
                ]
            });
            $('#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>

Best Regards,
Peter Stoev

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

[kbloemParticipant]

Peter,

on the url below you can see what happens when i set the value showfilterrow: true,

http://www.gamepedia.nl/index.php/archief-xbox

When i remove that value the page will load correctly again. The link below is the exact same code without the showfilterrow: true, value.

http://www.gamepedia.nl/index.php/algemeen

[Peter StoevKeymaster]

Hi kbloem,

The browser debugger says: Uncaught Error: jqxGrid: Missing references to the following module(s): jqxdatetimeinput.js(requires: jqxcalendar.js) which means that you missed to add jqxdatetimeinput.js or jqxcalendar.js. Note that jqxCalendar and jqxDateTimeInput require a reference to globalize.js as well. It would be helpful for you if you work with the web browser’s debugger when you develop web applications. It is very useful for debugging things like that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts