Edit this page

Hide Unselected Items in Spreadsheet Filter Popup

Environment

Product Progress Kendo UI Spreadsheet
Operating System All
Browser All
Preferred Language JavaScript

Description

How can I hide the unselected items in the filter popup of the Spreadsheet?

Solution

  1. Add the click handler to the Arrow button.
  2. Find the unchecked checkboxes and hide them.
<div id="spreadsheet" style="width: 100%"></div>
<script>
    $(function() {
        $("#spreadsheet").kendoSpreadsheet({
            sheets: [
            {
                name: "OrdersLog",
                mergedCells: [
                    "A1:G1",
                    "A2:F2"
                ],
                filter: {
                    ref: "A3:G49",
                    columns:[]
                },
                columns: [
                    { width: 80 },
                    { width: 100 },
                    { width: 100 },
                    { width: 150 },
                    { width: 150 },
                    { width: 130 },
                    { width: 130 }
                ],
                rows: [
                {
                    height: 50,
                    cells: [
                    {
                        value: "ORDERS LOG", background: "rgb(144,164,174)", textAlign: "center",
                        color: "white", fontSize: 18
                    }
                    ]
                },
                {
                    cells: [
                    {
                        value: "REPORT", background: "rgb(176,190,197)", color: "white", textAlign: "right"
                    },
                    {
                        format: "MMM-dd", formula: "TODAY()", background: "rgb(176,190,197)", color: "white", index: 6
                    }
                    ]
                },
                {
                    cells: [
                    {
                        value: "ID", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
                    },
                    {
                        value: "DATE", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
                    },
                    {
                        value: "TIME", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
                    },
                    {
                        value: "CLIENT", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
                    },
                    {
                        value: "COMPANY", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
                    },
                    {
                        value: "SHIPPING", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
                    },
                    {
                        value: "DISCOUNT", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
                    }
                    ]
                },
                {
                    cells: [
                    {
                        value: 10223, textAlign: "center"
                    },
                    {
                        value: new Date("6/30/2014"), textAlign: "center"
                    },
                    {
                        value: new Date("6/30/2014 9:30"), format: "hh:mm", textAlign: "center"
                    },
                    {
                        value: "Terry Lawson", textAlign: "left"
                    },
                    {
                        value: "Excella", textAlign: "left"
                    },
                    {
                        value: "1 day", textAlign: "center"
                    },
                    {
                        value: 0.02, format: "0%", textAlign: "center"
                    }
                    ]
                },
                {
                    cells: [
                    {
                        value: 10247, textAlign: "center"
                    },
                    {
                        value: new Date("7/1/2014"), textAlign: "center"
                    },
                    {
                        value: new Date("7/1/2014 15:15"), format: "hh:mm", textAlign: "center"
                    },
                    {
                        value: "Charles Miller", textAlign: "left"
                    },
                    {
                        value: "Complete Tech", textAlign: "left"
                    },
                    {
                        value: "2 days", textAlign: "center"
                    },
                    {
                        value: 0.08, format: "0%", textAlign: "center"
                    }
                    ]
                },
                {
                    cells: [
                    {
                        value: 10251, textAlign: "center"
                    },
                    {
                        value: new Date("7/1/2014"), textAlign: "center"
                    },
                    {
                        value: new Date("7/1/2014 14:13"), format: "hh:mm", textAlign: "center"
                    },
                    {
                        value: "Jennie Walker", textAlign: "left"
                    },
                    {
                        value: "Plan Smart", textAlign: "left"
                    },
                    {
                        value: "2 days", textAlign: "center"
                    },
                    {
                        value: 0.10, format: "0%", textAlign: "center"
                    }
                    ]
                },
                {
                    cells: [
                    {
                        value: 10226, textAlign: "center"
                    },
                    {
                        value: new Date("6/30/2014"), textAlign: "center"
                    },
                    {
                        value: new Date("6/30/2014 17:43"), format: "hh:mm", textAlign: "center"
                    },
                    {
                        value: "Samuel Green", textAlign: "left"
                    },
                    {
                        value: "Excella", textAlign: "left"
                    },
                    {
                        value: "regular", textAlign: "center"
                    },
                    {
                        value: 0.08, format: "0%", textAlign: "center"
                    }
                    ]
                },                    
                {
                    cells: [
                    {
                        value: 10268, textAlign: "center"
                    },
                    {
                        value: new Date("7/2/2014"), textAlign: "center"
                    },
                    {
                        value: new Date("7/2/2014 10:49"), format: "hh:mm", textAlign: "center"
                    },
                    {
                        value: "Agnes Hill", textAlign: "left"
                    },
                    {
                        value: "Integra Design", textAlign: "left"
                    },
                    {
                        value: "1 day", textAlign: "center"
                    },
                    {
                        value: 0, format: "0%", textAlign: "center"
                    }
                    ]
                }
                ]
            }]
        });

        $('.k-icon.k-i-arrow-60-down').click(function(){        
            setTimeout(function(){
                var checkboxes = $('.k-checkbox');

                for(var p=0; p < checkboxes.length; p++){
                        var checked = checkboxes[p].checked;
                    if(!checked){                      
                            $(checkboxes[p]).closest('.k-item').not('.k-first').hide()
                    }
                }                           
            }, 0)
        })

    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy