Author Topic: Filter header box  (Read 1323 times)

rebound.support

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 15
    • View Profile
Filter header box
« 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" }
                    ]
                },

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: Filter header box
« Reply #1 on: May 13, 2021, 04:35:58 pm »
[ Only Pro members may read this post. ]

rebound.support

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 15
    • View Profile
Re: Filter header box
« Reply #2 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.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: Filter header box
« Reply #3 on: May 14, 2021, 08:41:48 am »
[ Only Pro members may read this post. ]

rebound.support

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 15
    • View Profile
Re: Filter header box
« Reply #4 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.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: Filter header box
« Reply #5 on: May 18, 2021, 09:33:47 pm »
[ Only Pro members may read this post. ]

rebound.support

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 15
    • View Profile
Re: Filter header box
« Reply #6 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;
                        });
},

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: Filter header box
« Reply #7 on: May 19, 2021, 06:09:04 pm »
[ Only Pro members may read this post. ]

rebound.support

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 15
    • View Profile
Re: Filter header box
« Reply #8 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.



paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: Filter header box
« Reply #9 on: May 19, 2021, 10:58:46 pm »
[ Only Pro members may read this post. ]

rebound.support

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 15
    • View Profile
Re: Filter header box
« Reply #10 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.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: Filter header box
« Reply #11 on: May 20, 2021, 01:20:05 pm »
[ Only Pro members may read this post. ]

rebound.support

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 15
    • View Profile
Re: Filter header box
« Reply #12 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.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: Filter header box
« Reply #13 on: May 20, 2021, 03:22:19 pm »
[ Only Pro members may read this post. ]
« Last Edit: May 20, 2021, 03:25:43 pm by paramvir »

rebound.support

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 15
    • View Profile
Re: Filter header box
« Reply #14 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"}]