[jdhParticipant]

Thanks, I had looked there, but when I use the search to look for “filtertype” it turns up nothing. Which method or property is this info found under?

[jdhParticipant]

Well, so much for that. While adding the declaration was definitely needed, it seems there’s still something wonky going on with the entire component being seen by the unit test. Even though the whole thing displays on screen, with list items, querying for it in-test returns null:

let item = fixture.debugElement.query(By.css('.jqx-listitem-element')) returns null

But if I debug and pause on that line, in the Chrome console using jquery, $('.jqx-listitem-element') returns the DOM element.

[jdhParticipant]

Finally figured it out when I googled the right thing: “Angular 3rd party component not rendering during test”

Being new at this, my assumption is that if the page/component works when I do ng serve it should work in test, but you have to import and declare in your TestBed any third-party components:

import { jqxListBoxComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxlistbox';
...
      beforeEach( async(() => {
        TestBed.configureTestingModule({
          declarations: [EduComponent, jqxListBoxComponent, TextBoldDirective],
          providers: [],
          schemas: [],
          imports: [
            NgbModule.forRoot(),
            ReactiveFormsModule,
            FormsModule
          ]
        })

[jdhParticipant]

This “beginupdate” and “endupdate” definitely helped, but for updating a single field on about 40 rows, it still taking around 500ms.

Instead, if I just get a pointer to the row and change properties, it takes about 2ms for the batch, even without begin/endupdate:

rowsToUpdate.forEach((rowIndex: number) => {
   let row = this.myGrid.getrowdata(rowIndex); //since getrowdata returns an object, we're just creating a pointer, not a copy
   row.myField = myFieldsNewValue;   
});

[jdhParticipant]

Never mind, just had something else wrong. It’s working now!

[jdhParticipant]

Thank you, that property looks like what I’m looking for. I’m using version 5.4, and I’ve included jqxMenu, but still the menu button only pops in when I hover over the column title. Are there any other dependencies in order to use this?

[jdhParticipant]

autoshowfiltericon is just the funnel icon that doesn’t do anything except indicate whether a list is filtered. I think what OP is asking, and the question I have, is how to make the filter menu button always show instead of showing up on hover? Because sometimes between fields I’ve noticed that you the arrow won’t pop in from the right until you click around the page or move the mouse a bit, during which time the user may assume that the field just can’t be filtered.

[jdhParticipant]

Is it because of all the jqwidgets scripts I had to add to my .angular-cli.json file?

"scripts": [
        "../node_modules/jqwidgets-framework/jqwidgets/jqxcore.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdata.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxbuttons.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxscrollbar.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxmenu.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxcheckbox.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxlistbox.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdropdownlist.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.sort.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.pager.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.selection.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.edit.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.filter.js"
      ],

Do those not get used when unit testing?

[jdhParticipant]

I believe I finally discovered the answer.

The problem is that getselectedrowindexes() returns Number[] which, according to Typescript’s Do’s and Dont’s, should never be used because “they are almost never used appropriately in JavaScript” which is the case here, as though you get an array of indices, you can’t use single values in a forEach to access that array since array accessors need to be number and not Number.

The odd thing is that getselectedrowindex just returns number so this appears to be a bug in the jqxGridComponent code that needs to be fixed.

My solution then is to explicitly cast to number in my forEach loop:

const rowsToReject = this.daGrid.getselectedrowindexes();
rowsToReject.forEach((rowIndex:number) => {
...
}); 

[jdhParticipant]

Is there a way to rebind in the course of action? Taking the above example, if the Available column changes programatically, how to make the computed column update?

[jdhParticipant]

Thanks, that’s helpful.
I took the liberty of simplifying that example for anyone else that finds this post later: http://jsfiddle.net/jdhines/o77ytroy/

The link above had some irrelevant code and was duplicating every row, but also only applying Yes/No every 5th row.

[jdhParticipant]

@hristo: it appears that computed columns are not filterable; can you confirm that? If that’s true, it’s not much use to me, since I would use it to make a 3-option field just 2 options, e.g. a field that can be Yes, No, or null, but No and null should be considered equivalent.
http://jsfiddle.net/p8nLudph/

[jdhParticipant]

I’m having this issue too. In my data, a field can be Y or it can be N or null, those last two should be considered equivalent, so a filter set up for “does not contain Y” should match everything except that value, but it’s also filtering out empty values, which is not the expected default behavior.

[jdhParticipant]

I had already gone down that route, and I guess I’ll have to keep trying it; it just seemed like the wrong path to need 15 lines of code just to say “filter column X by value Y.”

I had tried something like this, which is the interface I want and that makes sense intuitively, but this didn’t work:

    let filteredData = Object.apply({}, this.source);
    filteredData.localData = this.source.localData.filter(rec => {
      if(status) {
        return rec.rejected === 'Y';
      } else {
        return rec.reject !== 'Y';
      }
    });
    this.dataAdapter = new jqx.dataAdapter(filteredData);

[jdhParticipant]

I think I found it. It’s just under the Javascript/jQuery page, and I’m using Angular. A link on the Angular pages to this page would be much appreciated!

[Author]

Posts