Grid Filtering

[GaryParticipant]

I have two issues with configuring the use of the grid widget.

•  When setting the column filter on the Date field I get “No data Loaded” but, the filter works if I go to the dropdown and select the filter button.

•  The aggregate value set on Amount only works when I set filter to “not null”. I also get value to show if I filter on some other column like date.

The input is a “csv”’ formatted file.  I have tried with both versions of Qjwidgets 2.6.1 and 2.7.0 and jquery-1.9.0.min.js.

Thanks, Gary

 

CODE:

var url = ‘Content/data/booktrans.csv’;

            var source =

            {

                url: url,

                datatype: ‘csv’,

                datafields:

                [

                    { name: ‘Date’, type: ‘date’ },

                    { name: ‘Account’, type: ‘string’ },

                    { name: ‘Num’, type: ‘string’ },

                    { name: ‘Description’, type: ‘string’ },

                    { name: ‘Memo’, type: ‘string’ },

                    { name: ‘Category’, type: ‘string’ },

                    { name: ‘Tag’, type: ‘string’ },

                    { name: ‘Clr’, type: ‘string’ },

                    { name: ‘Amount’, type: ‘string’ }

                ],

            };

            var addfilter = function () {

                var filtergroup = new $.jqx.filter();

                var filter_or_operator = 1;

                var filtervalue = ’12/31/2012′;

                var filtercondition = ‘GREATER_THAN’;

                var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);

                filtergroup.addfilter(filter_or_operator, filter1);

                // add the filters.

                $(“#jqxgrid”).jqxGrid(‘addfilter’, ‘Date’, filtergroup);

                // apply the filters.

                $(“#jqxgrid”).jqxGrid(‘applyfilters’);

            }

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

            $(“#jqxgrid”).jqxGrid(

            {

                width: 1215,

                height: 740,

                altrows: true,

                source: adapter,

                theme: theme,

                showstatusbar: true,

                statusbarheight: 60,

                filterable: true,

                sortable: true,

                autoshowfiltericon: false,

                showheader: true,

                showaggregates: true,

                editable: true,

                editmode: ‘dblclick’,

                ready: function () {

                    addfilter();

                },

                columns: [

                  { text: ‘Date’, datafield: ‘Date’, filtertype: ‘date’, width: 100, cellsformat: ‘MM/dd/yyyy’ },

                  { text: ‘Account’, datafield: ‘Account’, filtertype: ‘textbox’, width: 170 },

                  { text: ‘Num’, datafield: ‘Num’, filtertype: ‘textbox’, width: 100 },

                  { text: ‘Description’, datafield: ‘Description’, filtertype: ‘textbox’, width: 210, },

                  { text: ‘Memo’, datafield: ‘Meno’, filtertype: ‘textbox’, width: 80, },

                  { text: ‘Category’, columntype: ‘dropdownlist’, datafield: ‘Category’, filtertype: ‘textbox’, width: 250, },

                  { text: ‘Tag’, datafield: ‘Tag’, width: 80, },

                  { text: ‘Clr’, columntype: ‘dropdownlist’, datafield: ‘Clr’, filtertype: ‘textbox’, cellsalign: ‘center’, width: 50, },

                  { text: ‘Amount’, datafield: ‘Amount’, width: 155, cellsalign: ‘right’, filtertype: ‘number’, cellsformat: ‘d2’, aggregates: [‘sum’],

                    aggregatesrenderer: function (aggregates, column, element, summaryData) {

                        var renderstring = “<div class=’jqx-widget-content jqx-widget-content-” + theme + “‘ style=’float: left; width: 100%; height: 100%;’>”;

                        $.each(aggregates, function (key, value) {

                            var name = key == ‘sum’ ? ‘Balance’ : ‘Avg’;

                            var color = ‘green’;

                            if (key == ‘sum’ && summaryData[‘sum’] < 0) {

                                color = ‘red’;

                            }

                            renderstring += ‘<div style=”color: ‘ + color + ‘; position: relative; margin: 6px; text-align: right; overflow: hidden;”>’ + name + ‘: ‘ + value + ‘</div>’;

                        });

                        renderstring += “</div>”;

                        return renderstring;

                    }

                }

                ]

            });

[Peter StoevKeymaster]

Hi Gary,

To apply a Date filter via the apply, you should create a “datefilter” not a “stringfilter”. The Date filter works with JavaScript Date objects.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[GaryParticipant]

Peter,

Made change and filter on date works. :))

Thanks for pointing out the problem with my filter type.

Thanks,
Gary

[Author]

Posts