Filter header box

[rebound.support]

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" }
                    ]
                },

[paramvir]

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' }] },


[rebound.support]

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.

[paramvir]

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

[rebound.support]

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.

[paramvir]

yes it would be easier if converted into this format:

Code: [Select]

{ "1": "January" },
 { "2": "Febuary" }


[rebound.support]

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;
                        });
},

[paramvir]

your code looks fine. Please try to debug your code.

Do you get any error in the console.

What's the value of response?

[rebound.support]

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.

[paramvir]

response is supposed to be an array.

Checked your code, it works fine: https://stackblitz.com/edit/paramquery-demo-filter-dropdown?file=index.js

[rebound.support]

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.

[paramvir]

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.

[rebound.support]

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.

[paramvir]

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.

[rebound.support]

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"}]