Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

agGrid searching data using angular2 and typescript

How can I set filtering in my agGrid component. I saw a example from agGrid but it is written in javascript. https://www.ag-grid.com/angular-grid-filtering/index.php

But it seems I can't make this one work using my ts code below.

agGrid.component.ts

import {Component} from 'angular2/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';

import 'ag-grid-enterprise/main';

@Component({
    selector: 'app',
    templateUrl: 'app/partials/agGrid/agGrid.html',
    directives: [AgGridNg2]
})
export class AgGridComponent {

    columnDefs = [
        { headerName: "Contact Name", field: "make" },
        { headerName: "Company Name", field: "model" },
        {
            headerName: "Last Event",
            field: "price",
            cellClass: 'rightJustify',
            cellRenderer: function (params: any) {
                return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
            }
        },
        { headerName: "Contact Email", field: "model" },
        { headerName: "Work Phone", field: "model" }
    ];
    // put data directly onto the controller
    rowData = [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxter", price: 72000 }
    ];

    gridOptions = {
        columnDefs: this.columnDefs,
        rowData: null,
        enableFilter: true
    };



    values='';
    onKey(event:any) {
        this.values = event.target.value;
        this.gridOptions.columnDefs.setQuickFilter(this.values);
    }

    searchValue='';

}

grid.html

<input placeholder="Filter..." type="text"
	   [value]="searchValue"
	   (input)="searchValue = $event.target.value"
/>

<ag-grid-ng2
		class="ag-fresh"
		enable-sorting
		enable-filter
		style="height: 300px" 
		[gridOptions]="gridOptions" 
		(cellClicked)="onCellClicked()" 
		[columnDefs]="columnDefs"
		[rowData] = "rowData"> 
</ag-grid-ng2>
like image 337
spicykimchi Avatar asked Mar 31 '16 16:03

spicykimchi


People also ask

How do I test AG grid with the angular CLI?

We will walk through how you can use testing AG Grid as part of your Angular application, using default build tools provided when using the Angular CLI. The first thing we need to do is to add AG Grid's AgGridModule to the TestBed.configureTestingModule (: Now that the test bed is aware of AG Grid we can continue with our testing.

What is AG-grid in angular?

ag-Grid is a fully-featured and highly customizable JavaScript data grid. It is providing outstanding performance, has no third-party dependencies and integrates smoothly with Angular as Angular Component. Check out documentation for complete detail about ag-grid.

What are the advantages of using TypeScript generics in AG grid?

AG Grid supports Typescript Generics for row data and cell values. This leads to greatly improved developer experience via code completion and compile time validation of row data and cell value properties.

How to add typescript interface for row data to the grid?

Provide a Typescript interface for row data to the grid to enable auto-completion and type-checking whenever properties are accessed from a row data variable. There are multiple ways to configure the generic interface: via the GridOptions<TData> interface, via other individual interfaces and finally via framework components.


2 Answers

Bind the ngModel variable to "quickFilterText" attribute. "quickFilterText" is supposed to change to "quickFilter" in the future.

<input type="text" 
    [(ngModel)]="searchValue" placeholder="quick filter..." /> 
<ag-grid-angular  
    class="data-grid ag-theme-balham"
    [rowData]="rowData | async" 
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [quickFilterText]="searchValue"
    >
</ag-grid-angular>
like image 122
Sriharsha Avatar answered Sep 24 '22 02:09

Sriharsha


I'm guessing you already solved this but for those who are currently looking, you can 2-way bind your input box to a variable in your code.

Your HTML would look like this:

<input type="text" (keyup)="onQuickFilterChanged()" 
    [(ngModel)]="quickSearchValue" placeholder="quick filter..." /> 

and your TS code like this:

quickSearchValue: string = '';

private onQuickFilterChanged() {
    this.gridOptions.api.setQuickFilter(this.quickSearchValue);
}

Hope this helps.

like image 26
azmrtwo Avatar answered Sep 25 '22 02:09

azmrtwo