Essentials JS 2 - Grid - FilterBarTemplate

[Kyle Crabtree]

I am working on implementing a filter bar template so that I can have a textbox with just a date selection (nothing else in there) for my filter.  There was no documentation at https://ej2.syncfusion.com/16.1.24/javascript/demos/#/material/grid/default.html to show how to use the Filter Template.  FilterBarTemplate just takes "object", but doesn't specify how to do it.  Would someone show me how to implement that with MVC?

@(Html.EJS().Grid("transactionDetails")
        .DataSource(Model.InvestmentTransactions)
        .AllowFiltering(true)
        .FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.FilterBar); })
        .Columns(col =>
        {
            col.Field("TradeDate")
                .HeaderText("Trade Date")
                .TextAlign(tradeDateAlign)
                .Width("100")
                .Format("yMd")
                .FilterBarTemplate() ?????????
                .Add();
            col.Field("TransactionDescription")
                .HeaderText("Transaction Description")
                .TextAlign(transactionDescriptionAlign)
                .Width("150")
                .Add();
        })
    )

[Ramdhas Ueikattan]

Hi Kyle Crabtree, 

Thanks for contacting syncfusion supports. 

We have validated your query and we have achieved your requirement in grid Load event. In the below code example, we have added a DatePicker component as a filterbar template in OrderDate Column. 

Please refer the below sample code to use filterbar template. 

Code snippet: 

 

@Html.EJS().Grid("check").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("ShipCity").HeaderText("Ship City").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Width("150").Add(); 

    col.Field("OrderDate").Format("yMd").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

 

}).AllowPaging().AllowFiltering().PageSettings(page => page.PageCount(5)).Load("CreateFilterBarTemplate").Render() 

Script Code:  

<script> 

function CreateFilterBarTemplate() { 

        var datePicker; 

        this.columns[2].filterBarTemplate = { 

            create: function (args) { 

                var element = document.createElement('input'); 

                element.id = 'OrderDate'; 

                datePicker = new ej.calendars.DatePicker({ placeholder: 'Enter date', change: change }); 

                return element; 

            }, 

            write: function () { 

                datePicker.appendTo('#OrderDate'); 

            } 

        }; 

 

        function change () { 

            var grid = document.getElementById('check').ej2_instances[0]; 

            if (datePicker.element.value) { 

                grid.filterByColumn('OrderDate', 'equal', datePicker.element.value); 

            } else { 

                grid.removeFilteredColsByField('OrderDate'); 

            } 

        } 

    } 

</script> 

We have also prepared a sample for your reference which can be download from following link, 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/FilterbarTemplate508457595.zip  

Regards, 

Ramdhas  Ueikattan 

[Steven Metalheart]

Ramdhas Ueikattan,

Please can you point to a location which helps understand us how to use .FilterBarTemplate()  and what object to pass to it with what options?

[Madhu Sudhanan P]

Hi Steven, 

 

Please go through the below documentation link for using filter bar template in grid. 

 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/filtering#filter-bar-template-with-custom-component 

 

Regards, 

Madhu Sudhanan P