Access 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?

[yongchen45@gmail.comParticipant]

I don’t see any response here, I am going to post it again in Angular forum.

[Ivo ZhulevParticipant]

Hi yongchen45,

Plese refer to: http://www.jqwidgets.com/community/topic/how-to-reference-jqxgrid-component-in-rendertoolbar-callback-function/

Best Regards,
Ivo

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

[Author]

Posts