jQuery UI Widgets Forums Angular Angular2 not fire onFilter event in jqxgrid

This topic contains 2 replies, has 2 voices, and was last updated by  Lukas16 7 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • Lukas16
    Participant

    Hi, I am struggling with event when user wants to filter data in the filter row in jqxgrid.
    template: (onFilter)=”onFilter()”

    and in the code I have
    onFilter() :void
    {
    console.log(‘onFilter executed’);
    //here I want to do some magic.. like get values from the filter and refresh data from the server with specific values
    }

    This combo is absolutelly not working for me. (source of inspiration, section Events)

    Thanks for any help 🙂


    Hristo
    Participant

    Hello Lukas16,

    Please, take a look the example below:
    app.component.html

    <jqxGrid #myGrid
                 (onFilter)="filterGrid($event)"
                 [width]="850"
                 [source]="dataAdapter"
                 [columnsresize]="true"
                 [filterable]="true"
                 [columns]="columns"
                 [ready]="ready">
    </jqxGrid>

    app.component.ts

    
    import { Component, ViewChild } from '@angular/core';
    
    import { jqxGridComponent } from '../assets/jqwidgets-ts/angular_jqxgrid';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    
    export class AppComponent {
        @ViewChild('myGrid') myGrid: jqxGridComponent;
    
        data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
        
        source: any =
        {
            datatype: "json",
            datafields: [
                { name: 'CompanyName', type: 'string' },
                { name: 'ContactName', type: 'string' },
                { name: 'ContactTitle', type: 'string' },
                { name: 'Address', type: 'string' },
                { name: 'City', type: 'string' },
                { name: 'Country', type: 'string' }
            ],
            localdata: this.data
        };
    
        dataAdapter: any = new $.jqx.dataAdapter(this.source);
        
        columns: any[] = [
            { text: 'Company Name', datafield: 'CompanyName', width: 250 },
            { text: 'Contact Name', datafield: 'ContactName', width: 150 },
            { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
            { text: 'City', datafield: 'City', width: 120 },
            { text: 'Country', datafield: 'Country' }
        ];
    
        ready(): void {
            console.log('The Grid is ready.');
        };
    
        filterGrid(event: any): void {
            console.log('filtered');
            // Do something
        };
    }

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    Lukas16
    Participant

    Hello Hristo,
    thank you for your reply 🙂 I had everything done but my webpack needed to rebuild all, not just watched files. And also I refreshed browser 15x 🙂
    Now it’s working as I had it before 🙂
    Thanks again for support,
    Lukas16

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.