Display progress indicator or call external fn while FlexGrid filter/sort works

Posted by: ssmith on 26 January 2018, 9:39 am EST

    • Post Options:
    • Link

    Posted 26 January 2018, 9:39 am EST

    We’re using Wijmo 5 (v405) in an Angular 2 (v5.x) application, and load large amounts of data into FlexGrid’s on a number of components.

    Performance is acceptable, however when a user clicks on a header to sort, or to bring up the filter dialog, there’s a long delay before anything happens, and no indication that anything is going on.

    Is there a progress indicator that we can display to the user while this is happening, or can we call an Angular function when the FlexGrid starts setting up the sort/filter etc., and again when it finishes so that we can display a Spinner to the user while the FlexGrid is processing?

  • Posted 29 January 2018, 12:59 am EST

    Hi,

    This an expected behavior as your dataset may have unique values and it takes filter and sort function some time to create the value based filters/sort and also apply them.

    In this case it’s recommend to enable virtualization by setting the Height of the FlexGrid and then also try using paging on the FlexGrid if you are still facing issues.

    You can enable virtualization by setting height of FlexGrid using following code :

    <wj-flex-grid [itemsSource]=”data” style=”height:500px;”></wj-flex-grid>
    
  • Posted 30 January 2018, 12:44 pm EST

    Thanks for your reply, however I think you’re misunderstanding the question.

    I expect some of these operations to take some time, however I need to show the user that processing is happening so they don’t assume the app has crashed, and so they don’t keep clicking things, filling the event queue with expensive additional tasks.

    I’m looking at something like

    updatingView / updatedView
    or ```

    updatingLayout / updatedLayout

    
    These seem to log out the start and end of the events I want to catch, but the page doesn't seem to update to actually display the spinner until after the grid has updated, even on long updates so I'm not sure if the grid process is blocking, or if there is some way to force the Angular 2 component to update after one of these methods fires.
  • Posted 31 January 2018, 9:37 pm EST

    Hi,

    Thanks for the update. I am working on it. Should be able to get back to you on this tomorrow.

  • Posted 1 February 2018, 5:41 pm EST

    Hi,

    #1 Delay in Filter dialog opening

    As you click on Filter Icon, Filter dialog gets opened and started fetching unique values for that column.

    You need to handle filterChanging event and click event for Filter Icon. In FilterChanging event, you may start spinner and in click event for filter icon you may stop spinner. Please find the following code snippet:

    this.grid.hostElement.addEventListener("click",function(e){
          var ht= grid.hitTest(e);
           	if(e.target.className=="wj-glyph-filter" || e.target.className=="wj-elem-filter"){
             console.log("Filter Items Displayed")          ;
            }
          },true);
        }
      });
    this.filter.filterChanging.addHandler(function(s,e){
          	console.log("Filter Items fetching");
          });
    
    

    #2

    Delay in Sorting large Items:

    You need to handle sortingColumn event and loadedRows event for getting process. You may add spinner here. Please refer to the code snippet:

    this.grid.sortingColumn.addHandler(function(s,e){
    				console.log("Sorting Begin");
    });
    this.grid.loadedRows.addHandler(function(s,e){
       console.log("Sorting End");
    });
    

    Hope it helps !

    ~Manish

  • Posted 2 February 2018, 3:11 am EST

    Hi Manish,

    Thanks for getting back to me. Is this code complete, and is it for Wijmo 5 in an Angular 2 (v5) application? I’m trying to use it, but it’s throwing errors all over.

    I’m using the following:

      @ViewChild('flex') flex: wijmo.grid.FlexGrid;
    
      @ViewChild('filter') filter: wjcGridFilter.FlexGridFilter;
    

    And the wj-flex-grid has an id of #flex, and the wj-flex-grid-filter has an id of #filter.

    See the attached screenshot - I would then call this.addFlexGridProgressHandlers() in ngOnInit.

    Can you clarify what the issue here is?

    Thanks!

  • Posted 4 February 2018, 7:37 pm EST

    Hi Smith,

    First of all, you have to write this code snippet into ngAfterViewInit method instead of ngOnInit method.

    You may also need to change the function written for handler to the arrow function. Also, for FlexGrid click event, you need to specify the event args to the HTMLElement.

    Please refer to the following updated code snippet:

    @ViewChild('flex') flex: wijmo.grid.FlexGrid;
    @ViewChild('filter') filter: wjcGridFilter.FlexGridFilter;
    this.flex.hostElement.addEventListener("click",[b](e:HTMLElement)=>[/b]{
          var ht= grid.hitTest(e);
           	if(e.target.className=="wj-glyph-filter" || e.target.className=="wj-elem-filter"){
             console.log("Filter Items Displayed") ;
             this.stateSvc.setCurrentSpinner(false);
            }
          },true);
        }
      });
    this.filter.filterChanging.addHandler((s,e)=>{
          	console.log("Filter Items fetching");
             this.stateSvc.setCurrentSpinner(true);
          });
    
    this.flex.sortingColumn.addHandler((s,e)=>{
    	console.log("Sorting Begin");
             this.stateSvc.setCurrentSpinner(true);
    });
    this.flex.loadedRows.addHandler((s,e)=>{
            console.log("Sorting End");
             this.stateSvc.setCurrentSpinner(false);
    });
    
    

    This should not show any error now.

    ~Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels