jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts

  • jdh
    Participant

    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?


    jdh
    Participant

    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.


    jdh
    Participant

    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
              ]
            })
    

    jdh
    Participant

    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;   
    });

    jdh
    Participant

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


    jdh
    Participant

    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?


    jdh
    Participant

    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.

    in reply to: How to Unit Test with jqxGrid? How to Unit Test with jqxGrid? #97062

    jdh
    Participant

    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?


    jdh
    Participant

    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.

    Typescript signature for getselectedrowindexes function

    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) => {
    ...
    }); 
    

    jdh
    Participant

    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?


    jdh
    Participant

    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.


    jdh
    Participant

    @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/


    jdh
    Participant

    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.


    jdh
    Participant

    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);
    
    

    jdh
    Participant

    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!

Viewing 15 posts - 1 through 15 (of 17 total)