Excel like filter values when using values properties from columns.

Thread is closed for posting
1 posts, 0 answers
  1. Tom
    Tom avatar
    1 posts
    Member since:
    Nov 2017

    Posted 05 Dec 2017 Link to this post

    Requirements

    Telerik Product and Version

    v2017.3.1026

    Supported Browsers and Platforms

    IE10+, Chrome, Firefox

    Components/Widgets used (JS frameworks, etc.)

    Grid


     
    I encountered a problem when using the "Excel like filter" in combination with columns that use the values property for translating the raw column value to a given value from values. The Excel like filter only showed the raw value and not the translated value from the values properties. I searched everywhere for a solution but I couldn't find any, ending up making it myself.

    Demo: https://dojo.telerik.com/AxEYE

    Following code isn't mine, I found it on a different thread, couldn't find the thread to give credits. It is needed to remove the duplicated values from the Excel like filter.

    01.function removeDuplicates(items, field) {
    02.    var getter = function(item){return item[field]},
    03.        result = [],
    04.        index = 0,
    05.        seen = {};
    06. 
    07.    while (index < items.length) {
    08.      var item = items[index++],
    09.          text = getter(item);
    10. 
    11.      if(text !== undefined && text !== null && !seen.hasOwnProperty(text)){
    12.        result.push(item);
    13.        seen[text] = true;
    14.      }
    15.    }
    16. 
    17.    return result;
    18.}

     

    Following code is my solution.

    001.function checkboxFilter(column, data, checkboxes)
    002.{
    003.    var checkboxValues = {
    004.        value: '',
    005.        label: '',
    006.        checked: false
    007.    };
    008.     
    009.    if(data.hasOwnProperty(column.field)) {
    010.        var value = data[column.field];
    011.         
    012.        for(var x = 0; x < column.values.length; x++) {
    013.     
    014.            if(column.values[x].value === value) {               
    015.                checkboxValues.value = column.values[x].value;
    016.                checkboxValues.label = column.values[x].text;      
    017.                 
    018.                for(var z = 1; z < checkboxes.length; z++) {
    019.                    if(checkboxValues.value === checkboxes[z].value) {
    020.                        checkboxValues.checked = true;
    021.                        break;
    022.                    }
    023.                }
    024.                 
    025.                break;
    026.            }
    027.        }       
    028.    }
    029. 
    030.    return checkboxValues;
    031.}
    032. 
    033.var filterSource = new kendo.data.DataSource({
    034.    data: [{NAME: "John Doe", GENDER: "M"}, {NAME: "Jane Doe", GENDER: "F"}]
    035.});
    036. 
    037.$("#demo").kendoGrid({ 
    038.    dataSource: {
    039.        data: [{NAME: "John Doe", GENDER: "M"}, {NAME: "Jane Doe", GENDER: "F"}],
    040.        pageSize: 30,       
    041.        change: function(e) {               
    042.            filterSource.data(e.items);               
    043.        },      
    044.        schema: {
    045.            model: {
    046.                fields: {
    047.                    NAME: {
    048.                        type: "string"
    049.                    },
    050.                    GENDER: {
    051.                        type: "string"
    052.                    }                                                  
    053.                }
    054.            }
    055.        }                            
    056.    },
    057.    filterable: true,
    058.    filterMenuInit: function(e) {          
    059.        var grid = e.sender;
    060.         
    061.        e.container.data("kendoPopup").bind("open", function() {
    062.            filterSource.sort({field: e.field, dir: "asc"});
    063. 
    064.            var uniqueDsResult;
    065. 
    066.            if(grid.dataSource.filter() === undefined) {
    067.                uniqueDsResult = removeDuplicates(grid.dataSource.data(), e.field);
    068.            }
    069.            else {
    070.                var filters = grid.dataSource.filter();
    071.                     
    072.                var query = new kendo.data.Query(grid.dataSource.data()),
    073.                    data = query.filter(filters).data;
    074. 
    075.                uniqueDsResult = removeDuplicates(data, e.field);
    076.            }       
    077.                         
    078.            filterSource.data(uniqueDsResult);
    079.             
    080.            var column = grid.columns.find(function(v, i) {
    081.                return grid.columns[i].field === e.field;
    082.            });           
    083.             
    084.            if(column.hasOwnProperty('values')) {               
    085.                var helpTextElement = e.container.children(":first").children(":first"),
    086.                    checkboxes = e.container.find(":checkbox:checked");
    087.                 
    088.                helpTextElement.nextUntil(":has(.k-button)").remove();
    089. 
    090.                var javascriptTemplate = kendo.template($("#javascriptTemplate").html());
    091.                helpTextElement.append(javascriptTemplate(column, filterSource.data(), checkboxes));                            
    092.            }
    093.        });           
    094.    }, 
    095.  
    096.    columns: [{
    097.            field: "NAME",
    098.            title: "Name",
    099.            filterable: {
    100.                multi: true,
    101.                dataSource: filterSource,
    102.                search: true
    103.            }
    104.        }, {
    105.            field: "GENDER",
    106.            title: "Gender",
    107.            values: [{
    108.                    value: "M",
    109.                    text: "Male"
    110.                  }, {
    111.                    value: "F",
    112.                    text: "Female"
    113.                  }],
    114.            filterable: {
    115.                multi: true,
    116.                dataSource: filterSource,
    117.                search: false
    118.            }
    119.        }      
    120.    ]  
    121.});

     

    HTML

    01.<div id="demo"></div>
    02. 
    03.<script id="javascriptTemplate" type="text/x-kendo-template">       
    04.     # for(var i = 0; i < arguments[1].length; i++) { #                           
    05.         # var checkboxValues = checkboxFilter(arguments[0], arguments[1][i], arguments[2]); #
    06. 
    07.         <li class="k-item"><label class="k-label"><input
    08.           # if(checkboxValues.checked) { #
    09.               checked="checked"
    10.           # } #               
    11.             class="" value='#:checkboxValues.value#' type='checkbox' />#:checkboxValues.label#</label></li>
    12.     # } #           
    13.</script>
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.