Gijgo Grid filter on number column not working

I have a gijgo grid with a column Year(which has values 2011,2012,2013,etc). When I debug the json data returned in javascript, the typeof the year value is number but when I filter this grid on this column, I get an error -“Uncaught TypeError: f.toUpperCase is not a function at gijgo.min.js:1”

The javascript code is below

                 function CreateRegionChartGrid() {
                                var retrievedObject = JSON.parse(localStorage.getItem('stackedRegionChartSourceData'));
                                if (retrievedObject !== null) {
                                    ///Make Grid visible
                                    document.getElementById('regionChartGrid').style.visibility = "visible";
                                    regChartGrid = $('#regionChartGrid').grid({
                                        primaryKey: retrievedObject.salesByRegQuery.ProductCategoryKey,
                                        dataSource: retrievedObject.salesByRegQuery,
                                        responsive: true,
                                        columns: [
                                            { field: 'ProductCategoryKey', hidden: true },
                                            { field: 'EnglishProductCategoryName', sortable: true, title: 'Category' },
                                            { field: 'SalesTerritoryKey', hidden: true },
                                            { field: 'SalesTerritoryRegion', sortable: true, title: 'Region' },
                                            { field: 'CalendarYear', sortable: true, title: 'Year' },
                                            { field: 'Total_Sales', sortable: true, title: 'Total Sales' },
                                            { field: 'Total_cost', sortable: true, title: 'Total Cost' },
                                            { field: 'Total_Margin', sortable: true, title: 'Total Margin' }
                                        ],
                                        pager: { limit: 5 }
                                    });
                                    regChartGrid.render(retrievedObject.salesByRegQuery);

                                }
                            }

                            $('#btnRegionSearch').on('click', function () {
                                regChartGrid.reload({
                                    page: 1, EnglishProductCategoryName: $('#txtProductCategory').val(),
                                    SalesTerritoryRegion: $('#txtRegion').val(), CalendarYear: parseInt($('#txtCalendarYear').val(),10)
                                });
                            });
                            $('#btnRegionClear').on('click', function () {
                                $('#txtProductCategory').val('');
                                $('#txtRegion').val('');
                                $('#txtCalendarYear').val('');
                                regChartGrid.reload({ EnglishProductCategoryName: '', SalesTerritoryRegion: '', CalendarYear: '' });

                            });

Below is the code snippet.

                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>Example</title>
                    <script src="https://gijgo.com/Areas/Development/dist/libraries/jquery/jquery.js"></script>
                    <script src="https://gijgo.com/Areas/Development/dist/modular/js/core.js" type="text/javascript"></script>
                    <link href="https://gijgo.com/Areas/Development/dist/modular/css/core.css" rel="stylesheet" type="text/css">
                    <link href="https://gijgo.com/Areas/Development/dist/modular/css/grid.css" rel="stylesheet" type="text/css">
                    <script src="https://gijgo.com/Areas/Development/dist/modular/js/grid.js"></script>

                </head>
                <body style="padding: 8px;">
                    <div class="card">
                        <div class="card-body" style="position: relative;">

                            <div>

                                <input id="txtName" class='display-inline-block' style="float:left;" type="text" placeholder="Product Category" />
                                <input id="txtPlaceOfBirth" class='display-inline-block' style="float:left;" type="text" placeholder="Region" />
                                <input id="txtdYear" class='display-inline-block' style="float:left;" type="number" placeholder="Year" />
                                <button id="btnRegionSearch" style="float:left;" type="button" class="btn btn-default">Search</button>;
                                <button id="btnRegionClear" style="float:left;" type="button" class="btn btn-default">Clear</button>

                            </div>
                            <table id="grid"></table>
                        </div>
                    </div>


                    <script>
                        var grid, data = [
                            { 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria', CountryName: 'Bulgaria', dYear: '2011' },
                            { 'ID': 2, 'Name': 'Ronaldo Luís Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil', CountryName: 'Brazil', 'dYear': 2012 },
                            { 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England', CountryName: 'England', 'dYear': 2012 },
                            { 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany', CountryName: 'Germany', 'dYear': 2011 },
                            { 'ID': 5, 'Name': 'James Rodríguez', 'PlaceOfBirth': 'Cúcuta, Colombia', CountryName: 'Colombia', 'dYear': 2013 },
                            { 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria', CountryName: 'Bulgaria', 'dYear': 2014 }
                        ];

                        grid = $('#grid').grid({
                            dataSource: data,
                            columns: [{ field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' }, { field: 'dYear', type: 'number', cssClass: 'grid-number' }]
                        });

                        $('#btnRegionSearch').on('click', function () {
                            grid.reload({
                                page: 1, EnglishProductCategoryName: $('#txtName').val(),
                                SalesTerritoryRegion: $('#txtPlaceOfBirth').val(), CalendarYear: parseInt($('#txtdYear').val().toString(), 10)
                            });
                        });
                    </script>
                </body>
                </html>

In the snippet, I have given the column type explicitly as number for year, the filter on this column doesn’t work for this grid. I couldn’t find any gijgo example or post about filtering grid on a column which returns number. Please help me resolve this issue.

Answer

Since Gijgo Grid only allows filtering on fields which are bound with only string values, I converted my numeric field “CalendarYear” in javascript array object to string before binding the data to the grid, so now since “CalendarYear” is string, filter is working on it.