ParamQuery

General Category => Help for ParamQuery Pro => Topic started by: rebound.support on May 13, 2021, 04:15:48 pm

Title: Filter header box
Post by: rebound.support on May 13, 2021, 04:15:48 pm
Hi,

I have added the following code for filter header data but text box below the header box is not showing. only blank box is showing.
Could you please guide me which part of code I did not added.
var obj=

filterModel: { on: true, mode: "AND", header: true }

ColModel:

 {
                    title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName",
                    filter: { type: 'textbox', condition: 'begin', listeners: ['change'] },
                    validations: [
                        { type: 'minLen', value: 1, msg: "Required" },
                        { type: 'maxLen', value: 40, msg: "length should be <= 40" }
                    ]
                },
Title: Re: Filter header box
Post by: paramvir on May 13, 2021, 04:35:58 pm
Please follow this example on filter header row

https://paramquery.com/pro/demos/filter_header_local

and correct column.filter property in your code:

Code: [Select]
filter: { crules: [{ condition: 'begin' }] },
Title: Re: Filter header box
Post by: rebound.support on May 13, 2021, 06:02:27 pm
Hi,

Any link for Dynamic filter header with drop down.

=> I want a header filter on the basis of dropdown value but with the following condition.

1. Header drop down value should be dynamic means that when I click on the dropdown all drop down value will display not from the existing grid and user will select one.
2. Once the user will select the value, Dynamic filter will apply.
Title: Re: Filter header box
Post by: paramvir on May 14, 2021, 08:41:48 am
Please check "(Shipped - Order) Days" column in this example: https://paramquery.com/pro/demos/filter_custom

BTW all the filtering examples are here: https://paramquery.com/pro/demos -> Filter
Title: Re: Filter header box
Post by: rebound.support on May 18, 2021, 06:02:18 pm
Hi,

I have some query for binding data to header drop down.

1. I have a drop down for year and I have used the following code.

 filter: {
                                crules: [{ condition: 'range' }],

                                //options can also be created dynamically inside a callback.     
                                options: [
                                 //$.getJSON("controls/Common.ashx?Action=Month", function (response) {
                                    //    (response);
                                    //}),
                                    { "1": "January" },
                                    { "2": "Febuary" }
                                   
                                ],
                            },

And controls/Common.ashx?Action=Month is returning

[{"ID":1,"Name":"January"},{"ID":2,"Name":"February"},{"ID":3,"Name":"March"},{"ID":4,"Name":"April"},{"ID":5,"Name":"May"},{"ID":6,"Name":"June"},{"ID":7,"Name":"July"},{"ID":8,"Name":"August"},{"ID":9,"Name":"September"},{"ID":10,"Name":"October"},{"ID":11,"Name":"November"},{"ID":12,"Name":"December"}]

Issue: Should I change the data format as same to the red mark.
Title: Re: Filter header box
Post by: paramvir on May 18, 2021, 09:33:47 pm
yes it would be easier if converted into this format:

Code: [Select]
{ "1": "January" },
 { "2": "Febuary" }
Title: Re: Filter header box
Post by: rebound.support on May 19, 2021, 04:08:53 pm
Hi,

Can you guide me to how to bind filter options dynamic?
Following code I have added but not working.

create: function (evt, ui) {
$.getJSON("Common.ashx?Action=MonthNew", function (response) {
                            var column = grid.getColumn({ dataIndx: 'MonthName' });
                            column.filter.options = response;
                        });
},
Title: Re: Filter header box
Post by: paramvir on May 19, 2021, 06:09:04 pm
your code looks fine. Please try to debug your code.

Do you get any error in the console.

What's the value of response?
Title: Re: Filter header box
Post by: rebound.support on May 19, 2021, 06:48:59 pm
Hi,

Code:
================
For DropDown:

{
                            title: "Month", dataIndx: "MonthName", width: 110, valueIndx: "Month", align: "center",
                            filter: {
                                crules: [{ condition: 'range' }], 
                                options: [
                                ],
                            },
                            editor: {
                                type: 'select',
                                valueIndx: "ID",
                                labelIndx: "Name",
                                mapIndices: { "Name": "MonthName", "ID": "Month" },
                                options: [
                                ]
                            },
                            validations: [{ type: 'minLen', value: 1, msg: "Required" }]
                        },
========================

For Filling data to filter:

create: function (evt, ui) {
$.getJSON("Common.ashx?Action=MonthNew", function (response) {
                            var column = grid.getColumn({ dataIndx: 'MonthName' });
                            column.filter.options = response;
                        });
},

===================
Response from  Handler is:

{1:"January"},{2:"February"},{3:"March"},{4:"April"},{5:"May"},{6:"June"},{7:"July"},{8:"August"},{9:"September"},{10:"October"},{11:"November"},{12:"December"}

==============================

Value in Filter dropdown:

No row to display.

==================================

Console Error:
 No Error.


Title: Re: Filter header box
Post by: paramvir on May 19, 2021, 10:58:46 pm
response is supposed to be an array.

Checked your code, it works fine: https://stackblitz.com/edit/paramquery-demo-filter-dropdown?file=index.js
Title: Re: Filter header box
Post by: rebound.support on May 20, 2021, 12:34:06 pm
Hi,

Yes I am agree with the given example but the issue is still same.

Could you please share the header filter with any dynamic data instead of hard code.
Title: Re: Filter header box
Post by: paramvir on May 20, 2021, 01:20:05 pm
That's a Proof of concept where asynchronous Ajax call is replaced with setTimeout.

Please share a test case on stackblitz if you are still facing issues so that I can check what's wrong in your implementation.
Title: Re: Filter header box
Post by: rebound.support on May 20, 2021, 01:46:15 pm
Hi,

==========================
Below code not working:

  var column = grid.getColumn({ dataIndx: 'MonthName' });
                        $.getJSON("Common.ashx?Action=MonthNew", function (response) {
                            column.filter.options = [{ 1: "January" }, { 2: "February" }, { 3: "March" }, { 4: "April" }, { 5: "May" }, { 6: "June" }, { 7: "July" }, { 8: "August" }, { 9: "September" }, { 10: "October" }, { 11: "November" }, { 12: "December" }];
                        });

=================
Below code working:

  var column = grid.getColumn({ dataIndx: 'MonthName' });
                        $.getJSON("Common.ashx?Action=MonthNew", function (response) {

                        });
                        column.filter.options = [{ 1: "January" }, { 2: "February" }, { 3: "March" }, { 4: "April" }, { 5: "May" }, { 6: "June" }, { 7: "July" }, { 8: "August" }, { 9: "September" }, { 10: "October" }, { 11: "November" }, { 12: "December" }];

===============

In the above code how I set the handler response to column filter options.
Title: Re: Filter header box
Post by: paramvir on May 20, 2021, 03:22:19 pm
It means there is an issue with your remote request:

Code: [Select]
$.getJSON("Common.ashx?Action=MonthNew", function (response) {
   console.log(response);
   debugger
 });

Put a debugger and verify response value inside it.
Title: Re: Filter header box
Post by: rebound.support on May 20, 2021, 03:51:45 pm
Hi,

Following response is showing in the console.

[{1:"January"},{2:"February"},{3:"March"},{4:"April"},{5:"May"},{6:"June"},{7:"July"},{8:"August"},{9:"September"},{10:"October"},{11:"November"},{12:"December"}]
Title: Re: Filter header box
Post by: paramvir on May 20, 2021, 04:03:39 pm
It's supposed to work.

Please share a complete test case on stackblitz.
Title: Re: Filter header box
Post by: rebound.support on May 20, 2021, 07:27:31 pm
Hi,

I want to bind dynamic header data into to dropdown in filter section. Please help or provide me example of code to binding dynamic data in filter section.
===============================================

filter: function () {
                        $.getJSON("controls/Nuggets/KPITargetMainInfoNew/KPITargetMainInfoNew.ashx?Action=MonthNew", function (response) {
                            grid.getColumn({ dataIndx: "MonthName" }).filter.options = [{ 1: "January" }, { 2: "February" }, { 3: "March" }, { 4: "April" }, { 5: "May" }, { 6: "June" }, { 7: "July" }, { 8: "August" }, { 9: "September" }, { 10: "October" }, { 11: "November" }, { 12: "December" }];
                            alert(response);
                        });
                    },
Title: Re: Filter header box
Post by: paramvir on May 21, 2021, 10:52:28 pm
Since $.getJSON fetches data from remote serve asynchronously, it can't be used directly in filter.options callback.

Please check this example for loading filter dropdown options dynamically from remote data source:

https://paramquery.com/pro/demos/filter_remote_options