jQWidgets Forums

Tagged: column, date, event, filter, grid, jqxgrid, range

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 7 months ago.

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

Author

Is there any event for jqxgrid when DateRange filter is selected Posts

October 30, 2014 at 8:11 am Is there any event for jqxgrid when DateRange filter is selected #61851

rani

Participant

Hello Team,

I have a problem with Jqxgrid Filtering.I am using DateRange filter and stringfilter for Jqxgrid.Is there any events for jqxgrid when DateRange filter is selected with start and end date other than filter event.Here in my requirement, on change of daterange i am implementing some logic.I want the logic to be called only on change of Date Range not when i filter the other column with string filter.So filter event of jqxgrid is called for both date range filter and string filter.So i am looking for a specific event to be raised only when date range is changed.

Can you please look in to this.

Regards,
Rani.

October 31, 2014 at 7:12 am Is there any event for jqxgrid when DateRange filter is selected #61919

Dimitar

Participant

Hello Rani,

There is no such specific event. However, here is a workaround using the filter event:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/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: 'range', map: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };

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

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: '30%' },
                  { text: 'Range', datafield: 'range', filtertype: 'range', cellsalign: 'right', width: '35%', cellsformat: 'd' },
                  { text: 'Date', datafield: 'date', filtertype: 'date', cellsalign: 'right', width: '35%', cellsformat: 'd' }
                ]
            });

            $('#events').jqxPanel({ width: 300, height: 80 });

            var from, to;

            $("#jqxgrid").on("filter", function (event) {
                $("#events").jqxPanel('clearcontent');
                var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');

                var eventData = "Triggered 'filter' event";
                for (i = 0; i < filterinfo.length; i++) {
                    var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                    if (filterinfo[i].filtercolumntext == "Range") {
                        if (!from && !to) {
                            from = filterinfo[i].filter.getfilters()[0].value;
                            to = filterinfo[i].filter.getfilters()[1].value;
                            $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div><div>From: ' + from + ', to: ' + to + '</div>');
                        } else {
                            var newFrom = filterinfo[i].filter.getfilters()[0].value;
                            var newTo = filterinfo[i].filter.getfilters()[1].value;

                            if (newFrom.getFullYear() != from.getFullYear() || newFrom.getMonth() != from.getMonth() || newFrom.getDate() != from.getDate() || newTo.getFullYear() != to.getFullYear() || newTo.getMonth() != to.getMonth() || newTo.getDate() != to.getDate()) {
                                from = newFrom;
                                to = newTo;
                                $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div><div>From: ' + from + ', to: ' + to + '</div>');
                            }
                        }
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <div style="float: left;">
        Event Log:
        <div style="border: none;" id="events">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 4, 2014 at 7:36 am Is there any event for jqxgrid when DateRange filter is selected #62080

rani

Participant

Hello Dimitar,

I actually wanted to know whether can we able to get the information regarding which column raised this filter event.
Like if i select a date range then filter event will be fired,here in this filter event there is a object called event.In this object can we able to get the information regarding date range filter is called.

$(“#jqxProgress”).on(“filter”, function (event) {

});

Can you please look in to this.

Regards,
rani.

November 4, 2014 at 7:44 am Is there any event for jqxgrid when DateRange filter is selected #62081

Dimitar

Participant

Hi rani,

No, there is no direct way to get the last filtered column. The only solution is the one we provided. Please check our example out. If you need to check for other columns, you would have to implement a similar solution to the one for the date range column.

Best Regards,
Dimitar

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.