{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/filter-number/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Number filters allow you to filter number data."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/filter-provided/"},"children":[{"type":"text","value":"Provided Filters"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/filter-provided-simple/"},"children":[{"type":"text","value":"Simple Filters"}]},{"type":"text","value":" pages explain the parts of the Number Filter that are the same as the other Provided Filters. This page builds on that and explains some details that are specific to the Number Filter."}]},{"type":"element","tagName":"h2","properties":{"id":"number-filter-parameters","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#number-filter-parameters","ariaLabel":"number filter parameters permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Number Filter Parameters"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Number Filters are configured though the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams"}]},{"type":"text","value":" attribute of the column definition. All of the parameters from Provided Filters are available:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IProvidedFilterParams","names":"[\"buttons\",\"closeOnApply\",\"debounceMs\",\"readOnly\"]","config":"{\"description\":\"\"}","overridesrc":"filter-provided/resources/provided-filters.json"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition, the following parameters are also available for number filters:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"INumberFilterParams","names":"[\"alwaysShowBothConditions\",\"filterOptions\",\"defaultOption\",\"defaultJoinOperator\",\"suppressAndOrCondition\",\"caseSensitive\",\"textFormatter\",\"trimInput\",\"inRangeInclusive\",\"includeBlanksInEquals\",\"includeBlanksInLessThan\",\"includeBlanksInGreaterThan\",\"includeBlanksInRange\",\"allowedCharPattern\",\"numberParser\",\"comparator\",\"browserDatePicker\"]","config":"{\"description\":\"\"}","overridesrc":"filter-number/resources/number-filter-params.json"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-number-support","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-number-support","ariaLabel":"custom number support permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Custom Number Support"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, the Number Filter uses HTML5 "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"number"}]},{"type":"text","value":" inputs. However, these have mixed browser support, particularly around locale-specific nuances, e.g. using commas rather than periods for decimal values. You might also want to allow users to type other characters e.g. currency symbols, commas for thousands, etc, and still be able to handle those values correctly."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For these reasons, the Number Filter allows you to control what characters the user is allowed to type, and provide custom logic to parse the provided value into a number to be used in the filtering. In this case, a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"text"}]},{"type":"text","value":" input is used with JavaScript controlling what characters the user is allowed (rather than the browser)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Custom number support is enabled by specifying configuration similar to the following:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'age',\n            filter: 'agNumberColumnFilter',\n            filterParams: {\n                allowedCharPattern: '\\\\d\\\\-\\\\,', // note: ensure you escape as if you were creating a RegExp from a string\n                numberParser: text => {\n                    return text == null ? null : parseFloat(text.replace(',', '.'));\n                }\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"allowedCharPattern"}]},{"type":"text","value":" is a regex of all the characters that are allowed to be typed. This is surrounded by square brackets "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[]"}]},{"type":"text","value":" and used as a character class to be compared against each typed character individually and prevent the character from appearing in the input if it does not match, in supported browsers (all except Safari)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"numberParser"}]},{"type":"text","value":" should take the user-entered text and return either a number if one can be interpreted, or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" if not."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows custom number support in action:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The first column shows the default behaviour, and the second column uses commas for decimals and allows a dollar sign ($) to be included."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Floating filters are enabled and also react to the configuration of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"allowedCharPattern"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Number Filter","name":"number-filter","type":"generated"},"children":[]}]}]},"frontmatter":{"title":"Number Filter","version":null,"enterprise":null,"description":null},"headings":[{"id":"number-filter-parameters","depth":2,"value":"Number Filter Parameters"},{"id":"custom-number-support","depth":2,"value":"Custom Number Support"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"angular","srcPath":"/filter-number","pageName":"filter-number"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}