I want gridview filter example in angular js

[Bharat Buddhadev]

Technology must be angular js and mvc

I want example of grid view with filtering. in angular js and mvc

[Prasanna Kumar Viswanathan]

Hi Bharat,

Thanks for contacting Syncfusion support.

We have three types of following filtering features in Grid,

1.       Filter Bar.

2.       Filter Menu.

3.       Excel Styled Menu.
Filter Bar

For Filter Bar in Grid view, we suggest you to enable the allowFiltering API and please find the following code example and sample,

<div ng-app="employeeView">

    <div ng-controller="GridCtrl">

        <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowsorting="true" e-allowpaging="true" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools" e-editsettings-allowdeleting=' true' e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowfiltering="true" >

            <div e-columns>

                <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textalign="right"></div>

                <div e-column e-field="LastName" e-headertext="Last Name" e-textalign="right"></div>

                <div e-column e-field="FirstName" e-headertext="First Name" e-textalign="right"></div>

                <div e-column e-field="Title" e-headertext="Title" e-textalign="right"></div>

                <div e-column e-field="City" e-headertext="City" e-textalign="right"></div>

                <div e-column e-field="Country" e-headertext="Country" e-textalign="right"></div>

            </div>

        </div>

    </div>
</div>

Sample Link: http://www.syncfusion.com/downloads/support/forum/120223/ze/ServerOperations-1707176580

Filter Menu

To get the Filter Menu in Grid view, enable the allowFiltering API and set the filter type as Menu in filterSettings.


Code example:

<div ng-app="employeeView">

    <div ng-controller="GridCtrl">

        <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowsorting="true" e-allowpaging="true" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools" e-editsettings-allowdeleting=' true' e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowfiltering="true" e-filtersettings-filtertype="menu">

            <div e-columns>

                <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textalign="right"></div>

                <div e-column e-field="LastName" e-headertext="Last Name" e-textalign="right"></div>

                <div e-column e-field="FirstName" e-headertext="First Name" e-textalign="right"></div>

                <div e-column e-field="Title" e-headertext="Title" e-textalign="right"></div>

                <div e-column e-field="City" e-headertext="City" e-textalign="right"></div>

                <div e-column e-field="Country" e-headertext="Country" e-textalign="right"></div>

            </div>

        </div>

    </div>
</div>

Excel Styled Menu

To get Excel styled filter Menu, enable the allowFiltering API and set the filtertype as Excel in filtersettings.

Code example:

<div ng-app="employeeView">

    <div ng-controller="GridCtrl">

        <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowsorting="true" e-allowpaging="true" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools" e-editsettings-allowdeleting=' true' e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowfiltering="true" e-filtersettings-filtertype="excel">

            <div e-columns>

                <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textalign="right"></div>

                <div e-column e-field="LastName" e-headertext="Last Name" e-textalign="right"></div>

                <div e-column e-field="FirstName" e-headertext="First Name" e-textalign="right"></div>

                <div e-column e-field="Title" e-headertext="Title" e-textalign="right"></div>

                <div e-column e-field="City" e-headertext="City" e-textalign="right"></div>

                <div e-column e-field="Country" e-headertext="Country" e-textalign="right"></div>

            </div>

        </div>

    </div>
</div>

Please refer to the UG Document for Filtering from the following link,


http://help.syncfusion.com/js/grid/filtering

Regards,
Prasanna Kumar N.S.V