How to reference jqxGrid component in rendertoolbar callback function

[yongchen45@gmail.comParticipant]

I am trying to set a toolbar in jqxgrid with search input field using Angular 2 following the example in jqxgrid’s javascript/jQuery example (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/toolbar.htm)
However, I am struggling to get a reference of the jqxGridComponent in the callback function definition, here is my code segment:
in .html file I have defined:
<jqxGrid (onFilter)=”filterGrid($event)” #gridReference [auto-create]=’false’></jqxGrid>
in my componnent.ts, I have a reference to jqxGrid using ViewChild, but I tried many ways to reference the jqxGrid inside the rendertoolbar function all failed:
…
@ViewChild(‘gridReference’) assetGrid: jqxGridComponent;
…
settings: jqwidgets.GridOptions = {
width: 850,
autoheight: true,
source: this.assetGridDataAdapter,
…
rendertoolbar: function (toolbar) {
var me = this;
…
var oldVal = “”;
input.on(‘keydown’, function (event) {
if (input.val().length >= 2) {
if (me.timer) {
clearTimeout(me.timer);
}
if (oldVal != input.val()) {
me.timer = setTimeout(function () {
(<any>$(“#gridReference”)).jqxGrid(‘removefilter’, ‘Description’);
var filtergroup = $[‘jqx’].filter();
var filtervalue = input.val();
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
var filter_or_operator = 1;
filtergroup.addfilter(filter_or_operator, filter1);
// add the filters.
(<any>$(“#gridReference”)).jqxGrid(‘addfilter’, ‘firstname’, filtergroup);
// apply the filters.
(<any>$(“#gridReference”)).jqxGrid(‘applyfilters’);
}, 1000);
oldVal = input.val();
}
}
});
See the bold line.
I have also tried to use:
this.assetGrid.removefilter(‘Description’);
or
me.assetGrid.removefilter(‘Description’);
Can you help?

[Ivo ZhulevParticipant]

Hi yongchen45,

Here is the toolbar demo written in Angular:

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;

    myInput: any;
    oldVal: string = '';
    timer: any = setTimeout(_ => { });

    source: any =
    {
        datatype: 'jsonp',
        datafields: [
            { name: 'countryName' },
            { name: 'name' },
            { name: 'population', type: 'float' },
            { name: 'continentCode' },
            { name: 'adminName1' }
        ],
        async: false,
        url: 'http://api.geonames.org/searchJSON',
        data: {
            featureClass: 'P',
            style: 'full',
            maxRows: 20,
            username: 'jqwidgets'
        }
    };

    dataAdapter: any = new $.jqx.dataAdapter(this.source,
        {
            formatData: (data: any): any => {
                if (this.myInput) {
                    data.name_startsWith = this.myInput.val();
                    return data;
                }

            }
        }
    );

    columns: any[] =
    [
        { text: 'City', datafield: 'name', width: 170 },
        { text: 'Country Name', datafield: 'countryName', width: 200 },
        { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
        { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
    ];

    rendertoolbar = (toolbar: any): void => {
        let container = document.createElement('div');
        container.style.margin = '5px';

        let span = document.createElement('span');
        span.style.cssText = 'float: left; margin-top: 5px; margin-right: 4px;';
        span.innerHTML = 'Search City: ';

        let inputContainer = document.createElement('input');
        inputContainer.id = 'myInput';
        inputContainer.style.cssText = 'float: left';
        
        container.appendChild(span);
        container.appendChild(inputContainer);
        toolbar[0].appendChild(container);

        this.myInput = jqwidgets.createInstance('#myInput', 'jqxInput', { width: 220, height: 23 });

        this.myInput.addEventHandler('keydown', (): void => {
            if (this.myInput.val().length >= 2) {
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                if (this.oldVal !== this.myInput.val()) {
                    this.timer = setTimeout(() => {
                        this.myGrid.updatebounddata();
                    }, 1000);
                    this.oldVal = this.myInput.val();
                }
            }
            else {
                this.myGrid.updatebounddata();
            }
        });
    };
}

app.component.html:

<jqxGrid #myGrid
    [width]="850" [source]="dataAdapter" [columns]="columns"
    [showtoolbar]="true" [autoheight]="true" [rendertoolbar]="rendertoolbar">
</jqxGrid>

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[yongchen45@gmail.comParticipant]

That works like a charm!

Thanks Ivo.

[Grigoriy GrachevParticipant]

I have a several grids with toolbars on the page. They rendered dynamically. I mean – I don’t know the count of grids.
And there are buttons on the toolbars of each grid. For example, DeleteRowButton for each grid on the toolbar.

How can I get context for button handler of each grid? Should I make unique Id for buttons? How can I bind it? Rendertoolbar function is out of component context. So I can’t get Id of grid to connect grid and his button. How can I bind button of each grid with the corresponding deleting handler?

[StanislavParticipant]

Hello Grigoriy,

Can you please send us an example of how you define your dynamic grids with the buttons?

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts