We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

I want gridview filter example in angular js

Thread ID:

Created:

Updated:

Platform:

Replies:

120223 Sep 11,2015 09:12 AM Sep 14,2015 01:54 AM JavaScript 1
loading
Tags: ejGrid
Bharat Buddhadev
Asked On September 11, 2015 09:12 AM

Technology must be angular js and mvc

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


Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 14, 2015 01:54 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;