Search results

Customize filter UI in foreign key column in Vue Grid component

24 Sep 2021 / 2 minutes to read

You can create your own filtering UI by using column.filter property. The following example demonstrates the way to create a custom filtering UI in the foreign column.

In the following example, The Employee Name is a foreign key column. DropDownList is rendered using Filter UI.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :allowFiltering='true' :filterSettings='filteroption' height='270px' >
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
               <e-column field='EmployeeID' headerText='Employee Name' :dataSource='employeeData' foreignKeyValue='FirstName' :filter='filter' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Center' format='C2' width=80></e-column>
                 <e-column field='ShipCity' headerText='Ship City' width=130></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { createElement } from '@syncfusion/ej2-base';
import { GridPlugin, Edit, Toolbar, ForeignKey, Filter  } from "@syncfusion/ej2-vue-grids";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import { DataManager } from '@syncfusion/ej2-data';
import { data,fEmployeeData } from './datasource.js';

let dropInstance;

Vue.use(GridPlugin);
export default {
      data: () => {
        return {
          data: data,
          employeeData: fEmployeeData,
          filteroption: { type: 'Menu' },
          filter: {
            ui: {
              create: (args) => {
                let flValInput = createElement('input', { className: 'flm-input' });
                args.target.appendChild(flValInput);
                dropInstance = new DropDownList({
                  dataSource: new DataManager(fEmployeeData),
                  fields: { text: 'FirstName', value: 'EmployeeID' },
                  placeholder: 'Select a value',
                  popupHeight: '200px'
                });
                dropInstance.appendTo(flValInput);
              },
              write: (args) => {
                dropInstance.text = args.filteredValue || '';
              },
              read: (args) => {
                args.fltrObj.filterByColumn(args.column.field, args.operator,dropInstance.text);
              }
            }
          },
        };
      },
      provide: {
        grid: [Filter, ForeignKey, Edit, Toolbar]
      }
    }
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
           "OrderID":10248,
           "EmployeeID": 1,
           "CustomerID":"VINET",
           "OrderDate":"1996-07-04T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":32.38,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10249,
           "EmployeeID": 2,
           "CustomerID":"TOMSP",
           "OrderDate":"1996-07-05T00:00:00.000Z",
           "ShippedDate":"1996-07-10T00:00:00.000Z",
           "Freight":11.61,
           "ShipName":"Toms Spezialitäten",
           "ShipAddress":"Luisenstr. 48",
           "ShipCity":"Münster",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10250,
           "EmployeeID": 3,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-12T00:00:00.000Z",
           "Freight":65.83,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10251,
           "EmployeeID": 4,
           "CustomerID":"VICTE",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":41.34,
           "ShipName":"Victuailles en stock",
           "ShipAddress":"2, rue du Commerce",
           "ShipCity":"Lyon",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10252,
           "EmployeeID": 5,
           "CustomerID":"SUPRD",
           "OrderDate":"1996-07-09T00:00:00.000Z",
           "ShippedDate":"1996-07-11T00:00:00.000Z",
           "Freight":51.3,
           "ShipName":"Suprêmes délices",
           "ShipAddress":"Boulevard Tirou, 255",
           "ShipCity":"Charleroi",
           "ShipRegion":null,
           "ShipCountry":"Belgium"
        },
        {
           "OrderID":10253,
           "EmployeeID": 6,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-10T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":58.17,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10254,
           "EmployeeID": 7,
           "CustomerID":"CHOPS",
           "OrderDate":"1996-07-11T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":22.98,
           "ShipName":"Chop-suey Chinese",
           "ShipAddress":"Hauptstr. 31",
           "ShipCity":"Bern",
           "ShipRegion":null,
           "ShipCountry":"Switzerland",
           "Verified": true
        },
        {
           "OrderID":10255,
           "EmployeeID": 8,
           "CustomerID":"RICSU",
           "OrderDate":"1996-07-12T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":148.33,
           "ShipName":"Richter Supermarkt",
           "ShipAddress":"Starenweg 5",
           "ShipCity":"Genève",
           "ShipRegion":null,
           "ShipCountry":"Switzerland"
        },
        {
           "OrderID":10256,
           "EmployeeID": 9,
           "CustomerID":"WELLI",
           "OrderDate":"1996-07-15T00:00:00.000Z",
           "ShippedDate":"1996-07-17T00:00:00.000Z",
           "Freight":13.97,
           "ShipName":"Wellington Importadora",
           "ShipAddress":"Rua do Mercado, 12",
           "ShipCity":"Resende",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10257,
           "EmployeeID": 2,
           "CustomerID":"HILAA",
           "OrderDate":"1996-07-16T00:00:00.000Z",
           "ShippedDate":"1996-07-22T00:00:00.000Z",
           "Freight":81.91,
           "ShipName":"HILARION-Abastos",
           "ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
           "ShipCity":"San Cristóbal",
           "ShipRegion":"Táchira",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10258,
           "EmployeeID": 3,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-17T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":140.51,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10259,
           "EmployeeID": 4,
           "CustomerID":"CENTC",
           "OrderDate":"1996-07-18T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":3.25,
           "ShipName":"Centro comercial Moctezuma",
           "ShipAddress":"Sierras de Granada 9993",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico",
           "Verified": true
        },
        {
           "OrderID":10260,
           "EmployeeID": 5, 
           "CustomerID":"OTTIK",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-29T00:00:00.000Z",
           "Freight":55.09,
           "ShipName":"Ottilies Käseladen",
           "ShipAddress":"Mehrheimerstr. 369",
           "ShipCity":"Köln",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10261,
           "EmployeeID": 6,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-30T00:00:00.000Z",
           "Freight":3.05,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10262,
           "EmployeeID": 7,
           "CustomerID":"RATTC",
           "OrderDate":"1996-07-22T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":48.29,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA",
           "Verified": true
        },
        {
           "OrderID":10263,
           "EmployeeID": 8,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-23T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":146.06,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "Verified": true,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10264,
           "EmployeeID": 2,
           "CustomerID":"FOLKO",
           "OrderDate":"1996-07-24T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":3.67,
           "ShipName":"Folk och fä HB",
           "ShipAddress":"Åkergatan 24",
           "ShipCity":"Bräcke",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10265,
           "EmployeeID": 3,
           "CustomerID":"BLONP",
           "OrderDate":"1996-07-25T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":55.28,
           "ShipName":"Blondel père et fils",
           "ShipAddress":"24, place Kléber",
           "ShipCity":"Strasbourg",
           "ShipRegion":null,
           "ShipCountry":"France"
        }],
exports.fEmployeeData = [{
            'EmployeeID': 1,
            'LastName': 'Davolio',
            'FirstName': 'Nancy',
            'Title': 'Sales Representative',
            'TitleOfCourtesy': 'Ms.',
            'BirthDate': new Date(-664743600000),
            'HireDate': new Date(704692800000),
            'Address': '507 - 20th Ave. E.\r\nApt. 2A',
            'City': 'Seattle',
            'Region': 'WA',
            'PostalCode': '98122',
            'Country': 'USA',
            'HomePhone': '(206) 555-9857',
            'Extension': '5467',
            'Photo': { 'Length': 21626 },
        
            'Notes': 'Education includes a BA in psychology from Colorado State University in 1970.  She also completed\
            \'The Art of the Cold Call.\'  Nancy is a member of Toastmasters International.',
            'ReportsTo': 2,
            'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
        },
        {
            'EmployeeID': 2,
            'LastName': 'Fuller',
            'FirstName': 'Andrew',
            'Title': 'Vice President, Sales',
            'TitleOfCourtesy': 'Dr.',
            'BirthDate': new Date(-563828400000),
            'HireDate': new Date(713764800000),
            'Address': '908 W. Capital Way',
            'City': 'Tacoma',
            'Region': 'WA',
            'PostalCode': '98401',
            'Country': 'USA',
            'HomePhone': '(206) 555-9482',
            'Extension': '3457',
            'Photo': { 'Length': 21626 },
        
            'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
            Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, \
            was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the \
            Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
            'ReportsTo': 0,
            'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
        },
        {
            'EmployeeID': 3,
            'LastName': 'Leverling',
            'FirstName': 'Janet',
            'Title': 'Sales Representative',
            'TitleOfCourtesy': 'Ms.',
            'BirthDate': new Date(-200088000000),
            'HireDate': new Date(702104400000),
            'Address': '722 Moss Bay Blvd.',
            'City': 'Kirkland',
            'Region': 'WA',
            'PostalCode': '98033',
            'Country': 'USA',
            'HomePhone': '(206) 555-3412',
            'Extension': '3355',
            'Photo': { 'Length': 21722 },
        
            'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
             She has also completed a certificate program in food retailing management.\
             Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
            'ReportsTo': 2,
            'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
        },
        {
            'EmployeeID': 4,
            'LastName': 'Peacock',
            'FirstName': 'Margaret',
            'Title': 'Sales Representative',
            'TitleOfCourtesy': 'Mrs.',
            'BirthDate': new Date(-1018814400000),
            'HireDate': new Date(736401600000),
            'Address': '4110 Old Redmond Rd.',
            'City': 'Redmond',
            'Region': 'WA',
            'PostalCode': '98052',
            'Country': 'USA',
            'HomePhone': '(206) 555-8122',
            'Extension': '5176',
            'Photo': { 'Length': 21626 },
        
            'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
            Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
            'ReportsTo': 2,
            'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
        },
        {
            'EmployeeID': 5,
            'LastName': 'Buchanan',
            'FirstName': 'Steven',
            'Title': 'Sales Manager',
            'TitleOfCourtesy': 'Mr.',
            'BirthDate': new Date(-468010800000),
            'HireDate': new Date(750830400000),
            'Address': '14 Garrett Hill',
            'City': 'London',
            'Region': null,
            'PostalCode':
            'SW1 8JR',
            'Country': 'UK',
            'HomePhone': '(71) 555-4848',
            'Extension': '3453',
            'Photo': { 'Length': 21626 },
        
            'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as \
            a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
            post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses \'Successful \
            Telemarketing\' and \'International Sales Management.\'  He is fluent in French.',
            'ReportsTo': 2,
            'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
        },
        {
            'EmployeeID': 6,
            'LastName': 'Suyama',
            'FirstName': 'Michael',
            'Title': 'Sales Representative',
            'TitleOfCourtesy': 'Mr.',
            'BirthDate': new Date(-205185600000),
            'HireDate': new Date(750830400000),
            'Address': 'Coventry House\r\nMiner Rd.',
            'City': 'London',
            'Region': null,
            'PostalCode': 'EC2 7JR',
            'Country': 'UK',
            'HomePhone': '(71) 555-7773',
            'Extension': '428',
            'Photo': { 'Length': 21626 },
        
            'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
            (MBA, marketing, 1986).  He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\'  \
            He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
            'ReportsTo': 5,
            'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
        },
        {
            'EmployeeID': 7,
            'LastName': 'King',
            'FirstName': 'Robert',
            'Title': 'Sales Representative',
            'TitleOfCourtesy': 'Mr.',
            'BirthDate': new Date(-302731200000),
            'HireDate': new Date(757486800000),
            'Address': 'Edgeham Hollow\r\nWinchester Way',
            'City': 'London',
            'Region': null,
            'PostalCode': 'RG1 9SP',
            'Country': 'UK',
            'HomePhone': '(71) 555-5598',
            'Extension': '465',
            'Photo': { 'Length': 21626 },
        
            'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
            University of Michigan in 1992, the year he joined the company.  After completing a course entitled \'Selling in Europe,\' \
            he was transferred to the London office in March 1993.',
            'ReportsTo': 5,
            'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
        },
        {
            'EmployeeID': 8,
            'LastName': 'Callahan',
            'FirstName': 'Laura',
            'Title': 'Inside Sales Coordinator',
            'TitleOfCourtesy': 'Ms.',
            'BirthDate': new Date(-377982000000),
            'HireDate': new Date(762843600000),
            'Address': '4726 - 11th Ave. N.E.',
            'City': 'Seattle',
            'Region': 'WA',
            'PostalCode': '98105',
            'Country': 'USA',
            'HomePhone': '(206) 555-1189',
            'Extension': '2344',
            'Photo': { 'Length': 21626 },
        
            'Notes': 'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business \
            French.  She reads and writes French.',
            'ReportsTo': 2,
            'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
        },
        {
            'EmployeeID': 9,
            'LastName': 'Dodsworth',
            'FirstName': 'Anne',
            'Title': 'Sales Representative',
            'TitleOfCourtesy': 'Ms.',
            'BirthDate': new Date(-123966000000),
            'HireDate': new Date(784875600000),
            'Address': '7 Houndstooth Rd.',
            'City': 'London',
            'Region': null,
            'PostalCode': 'WG2 7LT',
            'Country': 'UK',
            'HomePhone': '(71) 555-4444',
            'Extension': '452',
            'Photo': { 'Length': 21626 },
        
            'Notes': 'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.',
            'ReportsTo': 5,
            'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
        }]
});