jQWidgets Forums

Tagged: filter, filter menu, filter widget, grid, jqxgrid, modify, updatefilterpanel, Widget

This topic contains 16 replies, has 4 voices, and was last updated by Peter Stoev 10 years, 4 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

createfilterwidget in column level filtering Posts

November 25, 2014 at 1:51 pm createfilterwidget in column level filtering #63283

arunthatham

Participant

Hi All,

I need the equivalent of createfilterwidget at the column level. Right now i’m able to do createfilterwidget only if i have showfilterrow:true. I need the same functionality to be done for the date picker in the filter which supports conditions and operators (And, Or, less_than,greater_than etc). Please advice.

November 26, 2014 at 6:42 am createfilterwidget in column level filtering #63335

Dimitar

Participant

Hello arunthatham,

You can see how to modify the filter menu in the demo Filter Conditions.

Best Regards,
Dimitar

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

November 26, 2014 at 8:13 am createfilterwidget in column level filtering #63352

arunthatham

Participant

thanks dimitar. You saved a lot of time. I have one more issue. I select the date in the datepicker as dd/mm/yyyy but after i apply filter it is changed to mm/dd/yyyy. I’m not sure why it is getting changed

November 26, 2014 at 11:55 am createfilterwidget in column level filtering #63382

Dimitar

Participant

Hi arunthatham,

Please share how you implemented your modification so that we may tell you if there is anything wrong with it.

Best Regards,
Dimitar

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

November 26, 2014 at 12:25 pm createfilterwidget in column level filtering #63383

arunthatham

Participant

updatefilterpanel: function () {
if ($(“.jqx-datetimeinput”).length > 0) {
$(“.jqx-datetimeinput”).jqxDateTimeInput({ formatString: ‘dd/MM/yyyy’ });
}
}
I select ’10/08/2014′(10th Aug 2014) and click on filter. After i get the records and i again open the filter i see ’08/10/2014′(8th Oct 2014) being selected.

November 27, 2014 at 7:08 am createfilterwidget in column level filtering #63426

Dimitar

Participant

Hi arunthatham,

Your code is not correct. Here is a working example:

<!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/globalization/globalize.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="../../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: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                datatype: "array"
            };

            var addfilter = function () {
                var filtergroup = new $.jqx.filter();

                var filter_or_operator = 1;
                var filtervalue = 'Beate';
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

                filtervalue = 'Andrew';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            var adapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: adapter,
                filterable: true,
                sortable: true,
                ready: function () {
                    addfilter();
                },
                updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
                 columnfilter, filtertype, filterconditions) {
                    if (filtertype == "datefilter") {
                        filterinputfield1.jqxDateTimeInput({ formatString: "dd-MMMM-yyyy" });
                        filterinputfield2.jqxDateTimeInput({ formatString: "dd-MMMM-yyyy" });
                    }
                },
                autoshowfiltericon: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 160 },
                  { text: 'Last Name', datafield: 'lastname', width: 160 },
                  { text: 'Product', datafield: 'productname', width: 170 },
                  { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 250, cellsformat: 'dd-MMMM-yyyy HH:mm' },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

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

            $("#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;
                    $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                }
            });

            $('#clearfilteringbutton').jqxButton({ height: 25 });
            $('#filterbackground').jqxCheckBox({ checked: true, height: 25 });
            $('#filtericons').jqxCheckBox({ checked: false, height: 25 });
            // clear the filtering.
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            // show/hide filter background
            $('#filterbackground').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
            });
            // show/hide filter icons
            $('#filtericons').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="eventslog" style="margin-top: 30px;">
            <div style="width: 200px; float: left; margin-right: 10px;">
                <input value="Remove Filter" id="clearfilteringbutton" type="button" />
                <div style="margin-top: 10px;" id='filterbackground'>
                    Filter Background</div>
                <div style="margin-top: 10px;" id='filtericons'>
                    Show All Filter Icons</div>
            </div>
            <div style="float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

December 5, 2014 at 8:17 am createfilterwidget in column level filtering #63817

arunthatham

Participant

thanks dimitar, it is working

December 29, 2014 at 11:19 am createfilterwidget in column level filtering #64776

Ram

Participant

Hi Dimitar,

We are also facing the same problem and the above solution is worked fine but only problem we are facing is that because of the formatting inside the “updatefilterpanel” method, after filtering the data the filter value in the filter text box is not retained i.e. we could only see empty text box if we open the filter panel again after filtering.

Is this an existing issue or any workaround to overcome this. Please help

Many thanks

December 29, 2014 at 11:39 am createfilterwidget in column level filtering #64779

Peter Stoev

Keymaster

Hi Ram,

updatefilterpanel is called each time the filter panel is opened which means that you can set the values of the widgets which you wish.

Best Regards,
Peter Stoev

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

December 30, 2014 at 6:45 am createfilterwidget in column level filtering #64811

Ram

Participant

Hi Peter,

Thanks for the reply. You meant to say that the above code will clear the filter text box value after filtering because of the format we are applying.

If so then what could be done to retain the filter text box value after filtering has been applied?

December 30, 2014 at 9:28 am createfilterwidget in column level filtering #64821

Peter Stoev

Keymaster

Hi Ram,

Check whether you have or not filters using “getfilterinformation” method and if you have, don’t set properties.

Best Regards,
Peter Stoev

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

December 30, 2014 at 10:58 am createfilterwidget in column level filtering #64834

Ram

Participant

Hi Peter,

We have tried as you suggested but still it’s not working as we expected. We have created jsfiddle demo to help you understand our expectation.

Please have a look at this demo: http://jsfiddle.net/xjuo0ayo/

In the above demo try to apply a filter on the “Order Date” column and after applying filter, open the “Order Date” filter panel and there will be no date in the filter text box. The same is not happening with the “Product” column.

Kindly help to avoid this behavior as we are stuck with this issue for quite a some time now.

Many thanks

December 30, 2014 at 3:01 pm createfilterwidget in column level filtering #64841

Peter Stoev

Keymaster

Hello Ram,

Your issue seems to be related to the fact that “globalize.js” is not included. If you use jqxDateTimeInput or jqxCalendar, you should include that file. Updated Example: http://jsfiddle.net/5qmpmpwd/

Best Regards,
Peter Stoev

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

December 31, 2014 at 1:52 pm createfilterwidget in column level filtering #64879

Ram

Participant

Hello Peter,

We have included the mentioned JS file but still we are not able to get things done. PFB for the exact steps we are following

1. Getting the date from the server.
2. Applying the “dd/MM/yyyy hh:mm tt” on “bindingcomplete” event

$("#jqxgrid").bind('bindingcomplete', function () {

      $("#jqxgrid").jqxGrid('setcolumnproperty', 'date', 'cellsformat', "dd/MM/yyyy hh:mm tt");
  });

3. Formatting the filter input value in “updatefilterpanel”

 updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
            columnfilter, filtertype, filterconditions) {
          if (filtertype == "datefilter") {
                filterinputfield1.jqxDateTimeInput({ formatString:"dd/MM/yyyy" });
                 filterinputfield2.jqxDateTimeInput({ formatString:"dd/MM/yyyy" });
            }
        },

4. Apply the filter and open the filter panel again then the applied filtervalue will not be retained

Please have a look at updated example : http://jsfiddle.net/5qmpmpwd/1/

clarifications:
—————-
1. By default jqxgrid will interpret the datetime format in “MM/dd/yyyy” when it receives from the server? If not what is the default format will JqxGrid interprets if no format is specified in the datafield?

Could you please help.

Many thanks

December 31, 2014 at 2:19 pm createfilterwidget in column level filtering #64882

Peter Stoev

Keymaster

Hello Ram,

I suggest you to use the Approach which I suggested you and I also posted you a working sample. The sample again: http://jsfiddle.net/wo3sgcdz/ – with cellsformat set. Also the default format in the Grid is dd/MM/yyyy, not MM/dd/yyyy as you state. Let’s be correct, please.

Best Regards,
Peter Stoev

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

Author

Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

You must be logged in to reply to this topic.