JqxGrid @Inputs Not Updating on Change – v9.0.0

[mbombergerParticipant]

Good afternoon,

I noticed that when I would update my grid’s source through some user action (filter changes, etc), the grid would not reflect the new data. It works fine on initial load, but never updates after.

Some background – I’ve made a generic component that wraps the jqxGridComponent. The template accepts all jqx grid @Inputs. Below is the relevant template code.

<jqxGrid *ngIf="(gridConfig | async) as config" #jqxGrid
			 
			 [source]="config.source"
	         [columns]="config.columns"

	         [altrows]="config.altrows"
	         [altstart]="config.altstart"
	         [altstep]="config.altstep"
	         [autoshowloadelement]="config.autoshowloadelement"
	         [autoshowfiltericon]="config.autoshowfiltericon"
	         [autoshowcolumnsmenubutton]="config.autoshowcolumnsmenubutton"
	         [adaptive]="config.adaptive"
	         [adaptivewidth]="config.adaptivewidth"
	         [clipboard]="config.clipboard"
	         [closeablegroups]="config.closeablegroups"
	         [columnsmenuwidth]="config.columnsmenuwidth"
	         [columnmenuopening]="config.columnmenuopening"
	         [columnmenuclosing]="config.columnmenuclosing"
	         [cellhover]="config.cellhover"
	         [enablehover]="config.enablehover && config.selectionmode?.indexOf('cell') > -1"
	         [enablekeyboarddelete]="config.enablekeyboarddelete"
	         [enableellipsis]="config.enableellipsis"
	         [enablemousewheel]="config.enablemousewheel"
	         [enableanimations]="config.enableanimations"
	         [enabletooltips]="config.enabletooltips"
	         [enablebrowserselection]="config.enablebrowserselection"
	         [everpresentrowposition]="config.everpresentrowposition"
	         [everpresentrowheight]="config.everpresentrowheight"
	         [everpresentrowactions]="config.everpresentrowactions"
	         [everpresentrowactionsmode]="config.everpresentrowactionsmode"
	         [filterrowheight]="config.filterrowheight"
	         [filtermode]="config.filtermode"
	         [groupsrenderer]="config.groupsrenderer"
	         [groupcolumnrenderer]="config.groupcolumnrenderer"
	         [groupsexpandedbydefault]="config.groupsexpandedbydefault"
	         [handlekeyboardnavigation]="config.handlekeyboardnavigation"
	         [pagerrenderer]="config.pagerrenderer"
	         [rtl]="config.rtl"
	         [showdefaultloadelement]="config.showdefaultloadelement"
	         [showfiltercolumnbackground]="config.showfiltercolumnbackground"
	         [showfiltermenuitems]="config.showfiltermenuitems"
	         [showpinnedcolumnbackground]="config.showpinnedcolumnbackground"
	         [showsortcolumnbackground]="config.showsortcolumnbackground"
	         [showsortmenuitems]="config.showsortmenuitems"
	         [showgroupmenuitems]="config.showgroupmenuitems"
	         [showrowdetailscolumn]="config.showrowdetailscolumn"
	         [showheader]="config.showheader"
	         [showgroupsheader]="config.showgroupsheader"
	         [showaggregates]="config.showaggregates"
	         [showgroupaggregates]="config.showgroupaggregates"
	         [showeverpresentrow]="config.showeverpresentrow"
	         [showfilterrow]="config.showfilterrow"
	         [showemptyrow]="config.showemptyrow"
	         [showstatusbar]="config.showstatusbar"
	         [statusbarheight]="config.statusbarheight"
	         [showtoolbar]="config.showtoolbar"
	         [selectionmode]="config.selectionmode"
	         [theme]="config.theme"
	         [toolbarheight]="config.toolbarheight"
	         [autoheight]="config.autoheight"
	         [autorowheight]="config.autorowheight"
	         [columnsheight]="config.columnsheight"
	         [deferreddatafields]="config.deferreddatafields"
	         [groupsheaderheight]="config.groupsheaderheight"
	         [groupindentwidth]="config.groupindentwidth"
	         [height]="config.height"
	         [pagerheight]="config.pagerheight"
	         [rowsheight]="config.rowsheight"
	         [scrollbarsize]="config.scrollbarsize"
	         [scrollmode]="config.scrollmode"
	         [scrollfeedback]="config.scrollfeedback"
	         [width]="config.width"
	         [autosavestate]="config.autosavestate"
	         [autoloadstate]="config.autoloadstate"
	         [columngroups]="config.columngroups"
	         [columnsmenu]="config.columnsmenu"
	         [columnsresize]="config.columnsresize"
	         [columnsautoresize]="config.columnsautoresize"
	         [columnsreorder]="config.columnsreorder"
	         [disabled]="config.disabled"
	         [editable]="config.editable"
	         [editmode]="config.editmode"
	         [filter]="config.filter"
	         [filterable]="config.filterable"
	         [groupable]="config.groupable"
	         [groups]="config.groups"
	         [horizontalscrollbarstep]="config.horizontalscrollbarstep"
	         [horizontalscrollbarlargestep]="config.horizontalscrollbarlargestep"
	         [initrowdetails]="config.initrowdetails"
	         [keyboardnavigation]="config.keyboardnavigation"
	         [pagesize]="config.pagesize"
	         [pagesizeoptions]="config.pagesizeoptions"
	         [pagermode]="config.pagermode"
	         [pagerbuttonscount]="config.pagerbuttonscount"
	         [pageable]="config.pageable"
	         [rowdetails]="config.rowdetails"
	         [rowdetailstemplate]="config.rowdetailstemplate"
	         [ready]="config.ready"
	         [rendered]="config.rendered"
	         [renderstatusbar]="config.renderstatusbar"
	         [rendertoolbar]="config.rendertoolbar"
	         [sortable]="config.sortable"
	         [sortmode]="config.sortmode"
	         [selectedrowindex]="config.selectedrowindex"
	         [selectedrowindexes]="config.selectedrowindexes"
	         [sorttogglestates]="config.sorttogglestates"
	         [updatedelay]="config.updatedelay"
	         [verticalscrollbarstep]="config.verticalscrollbarstep"
	         [verticalscrollbarlargestep]="config.verticalscrollbarlargestep"
	         (onBindingcomplete)="onBindingComplete()"
	         (onColumnresized)="onColumnResized($event)"
	         (onColumnreordered)="onColumnReordered($event)"
	         (onColumnclick)="onColumnClick($event)"
	         (onCellclick)="onCellClick($event)"
	         (onCelldoubleclick)="onCellDoubleClick($event)"
	         (onCellselect)="onCellSelect($event)"
	         (onCellunselect)="onCellUnselect($event)"
	         (onCellvaluechanged)="onCellValueChanged($event)"
	         (onCellbeginedit)="onCellBeginEdit($event)"
	         (onCellendedit)="onCellEndEdit($event)"
	         (onFilter)="onFilter()"
	         (onGroupschanged)="onGroupsChanged($event)"
	         (onGroupexpand)="onGroupExpand($event)"
	         (onGroupcollapse)="onGroupCollapse($event)"
	         (onPagechanged)="onPageChanged($event)"
	         (onPagesizechanged)="onPageSizeChanged($event)"
	         (onRowclick)="onRowClick($event)"
	         (onRowdoubleclick)="onRowDoubleClick($event)"
	         (onRowselect)="onRowSelect($event)"
	         (onRowunselect)="onRowUnselect($event)"
	         (onRowexpand)="onRowExpand($event)"
	         (onRowcollapse)="onRowCollapse($event)"
	         (onSort)="onSort($event)">
	</jqxGrid>

And here is the code in the component that updates the config

finalOptions.source = new jqx.dataAdapter({
	localdata: sourceDataArray,
	type: 'array',
	datafields: finalDatafields
});
//Finally, bind
this.gridConfigSubject.next(finalOptions);

I’ve only included that part for brevity. Basically, my wrapper component takes an observable of data as input and subscribes to it to initialize/update the grid. I do some logic to build the final configuration object, and the structure of that object adheres to the grid’s interface. It then updates the grid as shown in the template snippet.

I believe I’ve tracked down the issue, and it boils down to the jqxgrid ngOnChanges hook. I’m not sure how specific I can be due to EULA, but I will say it breaks out of the loop prematurely (in my case before it reaches the source attribute). If you’d like some more detail, I’d be happy to share.

Using v9.0.0

Thanks!

Mark

[mbombergerParticipant]

Anyone available to take a look? The workaround I need to use to get around this has some undesirable side effects

[HristoParticipant]

Hello Mark,

It is not a good practice to set all properties again and again.
You should use its methods to update it.
It is not a whole example but as I understand you update the jqxGrid and using customization to update it.
For the jqxDataAdapter, I saw that you use a new instance but are you sure your data and fields are from the correct type.
Please, check for any error message in the console.
Also, I recommend using the methods of the jqxGrid to update it.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[mbombergerParticipant]

Hi Hristo,

No errors in the console. I am positive the data and fields are correct.

All properties are not updated again and again. For the vast majority of cases in the app so far, the configuration is set once, and when data changes, it updates the source. If anything in the configuration changes, it needs to ensure all properties are updated accordingly. Angular should handle which inputs actually changed (and it does). This is a generic component, meaning anyone can configure any set of properties, and they can change them at any time.

Here is an example of how the component may be used for some more context

<my-jqx-grid [loading$]="loading$"
              [config$]="gridConfig$"
              [data$]="expenses$"
              [noDataMessage]="'No Data Found'"></my-jqx-grid>

loading$, config$, and data$ are all observables that can be pushed to by any action (loading$ isn’t very interesting in this case). config$ represents the settings for the grid, data$ represents the data returned from the service call.

As I mentioned, through debugging, I found the issue is that the jqxGridComponent bails out of updating properties before it reaches the source property. It would work otherwise. I would paste the relevant code, but I am not sure if I will break the EULA since I’d need to post JqxGrid source code to demonstrate. Is there another medium in which I can show this? I can maybe see if I can put together a quick fiddle.

If I can avoid using the methods, that would be my preference. Otherwise, I would just use jQuery directly. At the moment, my workaround involves setting the source through the source method.

I forgot to mention that my app currently uses Angular 8.2.14.

Thank you for your time,
Mark

[HristoParticipant]

Hello Mark,

This is a strange scenario and we do not feedback for such kind of issue before.
I think it is possible to not all actions were finished at the moment when you update it.
Please, check the topics about the bindingcomplete event in our forum.
The appropriate approach to update many properties is to use the setOptions method.

Also, you could contact the Technical Support (support@jqwidgets.com) with this scenario.
I would like to mention it is not appropriate if you try to change the source code provided from us.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[mbombergerParticipant]

Thanks, Hristo. My intention is not to change the source code. That always scares me and opens another can of worms :). I’ll give that topic a look just in case there is a relation. My fallback to this will probably end up being setOptions.

I’ll send an email out. Just so I do not end up breaking the rules, am I allowed to paste Jqx source code into a support email? If I could, that would make things so much clearer I think. I am also aware of the Github repo. Does that accept tickets from the community?

Your time is much appreciated.

Mark

[HristoParticipant]

Hello Mark,

You could contact the Technical Support Team without embarrassing.
Also, if you want you could add some comments in the GitHub repository if you prefer.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts