Selecting default value on Excel (CheckBox) column filter

[James Plautz]

Hi, I'm trying to load a default filter for a data grid using a specific column. To explain further, I have one column that describes whether there is an active or inactive entity using true or false. There are multiple columns in the data grid. On load, the grid filter defaults to showing both active and inactive entries due to the nature of the filter type: "Excel". I would still like to use type: "Excel" for the entire data grid. Is there a property/ custom template option I can change to set it to load only active (true) or only inactive (false) entries when the grid is loaded? Thank you.

[Balaji Sekar]

Hi James, 

 

Greetings from the Syncfusion support, 

 

We have analyzed your requirement and we suggest you to use the checkbox “itemTemplate” property of the Grid filter to achieve this requirement. With this you can customize the displaying text of the Grid checkbox filter items. You can display the custom data in checkbox items and the processing will be based on the original column values. In the below code, we will display the “active” column values as checkbox items text for the “Active” and “Inactive” values. And when filtering, the filter will be based on the customized text(“Active”,”Inactive”) value. As well as we have modified the “isVerified” column checkbox items text also. Please refer the code example below, 

 

[featch.vue.html] 

        <ejs-grid ref='grid' :dataSource="data" allowFiltering="true" :filterSettings="filterOption" allowPaging="true" :toolbar="toolbar" :editSettings="editSettings" :actionBegin="actionBegin" :created="created"> 

            <e-columns> 

                <e-column field='OrderID' headerText='Order ID' :isPrimaryKey=true textAlign='Right' width=90></e-column> 

                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 

                <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 

                <e-column field='ShipCity' headerText='Ship City' textAlign='Right' width=120></e-column> 

                <e-column field='active' headerText='IsActive' textAlign='Right' filter="activeFilter" :valueAccessor="actionStateChange" width=120></e-column> 

                <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right' width=120></e-column> 

                <e-column field='isVerified' headerText='Verified' filter="verifiedFilter" :valueAccessor="actionStateChange1" textAlign='Right' width=120></e-column> 

            </e-columns> 

        </ejs-grid> 

 

[index.html] 

 

<script id='filteritem' type="text/x-jsrender"> 

    <span>${getItemTemplate(data)}</span> 

</script> 

<script id='filteritem1' type="text/x-jsrender"> 

    <span>${getItemTemplate1(data)}</span> 

</script> 

<script> 

    function getItemTemplate1(data) { 

        return data.isVerified; 

    } 

    function getItemTemplate(data) { 

        return data.active; 

        

    } 

</script> 

 

[featchdata.ts] 

 

export default Vue.extend({ 

 

data: () => {  

        return { 

            activeFilter: { itemTemplate: "#filteritem" }, 

            verifiedFilter: { itemTemplate: "#filteritem1" },             

            filterOption: {type:"CheckBox"}, 

        }; 

    }, 

    methods: {         

        actionStateChange(field, data, column) {             

            var text = data[field] ? "Active" : "Inactive"; 

            return text; 

        }, 

        actionStateChange1(field, data, column) {             

            var text = data[field] ? "Yes" : "No"; 

            return text; 

        }, 

        actionBegin(args) {             

            if (args.requestType === 'filterbeforeopen' && args.columnName == "isVerified") {                  

                args.filterModel.options.dataSource = [{ isVerified: "Yes" }, { isVerified: "No" }]; 

                args.filterModel.options.filteredColumns = args.filterModel.options.filteredColumns.filter(function (col:any) { 

                    if (col.field == 'isVerified') { 

                        return true; 

                    } 

                    return false; 

                });                 

            }         

            if ( args.requestType === 'filterbeforeopen' && args.columnName == "active") { 

                args.filterModel.options.dataSource = [{ active: "Active" }, { active: "Inactive" }]; 

                args.filterModel.options.filteredColumns = args.filterModel.options.filteredColumns.filter(function (col:any) { 

                    if (col.field == 'active') { 

                        return true; 

                    } 

                    return false; 

                })  

            } 

            if (args.requestType == "filtering") { 

                var predicates = args.columns; 

                for (var i = 0, len = predicates.length; i < len; i++) { 

                    if (predicates[i].field == "active" && predicates[i].properties.value == "Active") { 

                        args.columns[i].properties.value = true; 

                    } else if (predicates[i].field == "active" && predicates[i].properties.value == "Inactive") { 

                        args.columns[i].properties.value = false; 

                    } else if (predicates[i].field == "isVerified" && predicates[i].properties.value == "Yes") { 

                        args.columns[i].properties.value = true; 

                    } else if (predicates[i].field == "isVerified" && predicates[i].properties.value == "No") { 

                        args.columns[i].properties.value = false; 

                    } 

                } 

            } 

        }, 

}) 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Filter_data_Customization-Vue852951218.zip 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar.