CODEWITHSUNDEEP
javascriptjqueryhtmlslickgrid
Deepak Ahirwal
Deepak Ahirwal

Reputation: 113

How to get all the data into the slickgrid when user click on the slick-header-menuitem dropdown.?

I have a UI application to display business information. I have used slick grid to show all business data in tabular/grid structure by using all built-in properties of slick grid. I have used filter property to filter data on each column.

But I have a condition that i am getting 1k data from the Azure storage table and i set the pageSize to 10 and i pass the pageSize to set the pagination in dataView.setPagingOptions({pageSize:pageSize}); When we click on slick-header-menuitem in dropdown it displays (Sort Ascending,Sort Descending,Search and data whatever grid containing on the (filter div) ).

Now once I click on the checkbox to filter the data whatever the data i need to filter it will filter those data fine without any issue.Uptill here every thing is working as expected as here in my filter dropdown i have 4 option like (Select All , Blank , IT ,U.S.A ,USA ) which is shown in the image below.

But the problem starts form here once i again click on the slick-header-menuitem after the filteration dropdown (filter div) display few more data like (Select All , Blank , IT ,U.S.A ,USA ,UNITED STATES,US) because i have filtered data suppose (IT) so in grid all the data filter and get the data from the 1k records but it will also get the data appended in the filter div options which was not there in previously.

for refrence my grid is looking someting like this (below is the url) except search and pagination

http://danny-sg.github.io/slickgrid-spreadsheet-plugins/examples/example-2-everything.htm

I am also attaching two images

first image indicate when i click on the first time on slick-header-menuitem dropdown.enter image description here

And second image indicate when i again click on the slick-header-menuitem dropdown after the filtered data.

enter image description here

I have gone through the slickgrid library in which there is a plugin folder this folder contain filter folder and filter folder contain ext.headerfilter.js this file contain method called "function getFilterValues(dataView, column){...}", "function getFilterValuesByInput($input){...}" and "function getAllFilterValues(data, column){...}", i have debug it but won't get any success.

Upvotes: 4

Views: 2143

Answers (1)

Deepak Ahirwal
Deepak Ahirwal

Reputation: 113

finally a lots of debugging i got the solution for filtering the records here i am not bothering about the slick-grid library,it is an awsome library as per my experience so on the basis of my requirement i have done some changes in ext.headerfilter.js file go to the function called getFilterValues() and getFilterValuesByInput($input), inside these function i have done some changes in for loop and variable below is the code has been implemented for getFilterValues() and getFilterValuesByInput($input)

function getFilterValues(dataView, column) {
            var seen = [];
           // for (var i = 0; i < dataView.getLength() ; i++) {
            for (var i = 0; i < dataView.getItems().length ; i++) { 
               // var value = dataView.getItem(i)[column.field];
                var value = dataView.getItems()[i][column.field];

                if (!_.contains(seen, value)) {
                    seen.push(value);
                }
            }


            return _.sortBy(seen, function (v) { return v; });
        }

code for getFilterValuesByInput($input)

function getFilterValuesByInput($input) {
            var column = $input.data("column"),
                filter = $input.val(),
                dataView = grid.getData(),
                seen = [];

           // for (var i = 0; i < dataView.getLength() ; i++) {
            for (var i = 0; i < dataView.getItems().length ; i++) { 
               // var value = dataView.getItem(i)[column.field];
                var value = dataView.getItems()[i][column.field];

                if (filter.length > 0) {
                    var mVal = !value ? '' : value;
                    var lowercaseFilter = filter.toString().toLowerCase();
                    var lowercaseVal = mVal.toString().toLowerCase();
                    if (!_.contains(seen, value) && lowercaseVal.indexOf(lowercaseFilter) > -1) {
                        seen.push(value);
                    }
                }
                else {
                    if (!_.contains(seen, value)) {
                        seen.push(value);
                    }
                }
            }

            return _.sortBy(seen, function (v) { return v; });
        }

Upvotes: 3

Related Questions