Grid For Blazor Data Virtualisation and UI Virtualisation

4 posts, 1 answers
  1. Ross
    Ross avatar
    9 posts
    Member since:
    Jul 2011

    Posted 25 Apr Link to this post

    Hi i am die hard WPF developer taking a peek at the grid component of Blazor.

    I use data and UI virtualisation features of radgridview heavily in my existing WPF apps, and it would be great to have these features available in Blazor.

    A couple of references here.

    https://docs.telerik.com/devtools/wpf/controls/radgridview/features/ui-virtualization.

    https://docs.telerik.com/devtools/wpf/controls/radgridview/populating-with-data/populating-datavirtualization.

     

    Is this something that may be considered?

    Thanks

    Ross

  2. Answer
    Joana
    Admin
    Joana avatar
    205 posts

    Posted 26 Apr Link to this post

    Hi Ross,

    Thank you for the suggestion. 

    Currently, the Grid supports paging which is actually fetching the data on demand. You could test the functionality in the following link:

    https://demos.telerik.com/blazor/grid/paging

    https://docs.telerik.com/blazor/components/grid/paging
     
    Indeed, what I could get from the WPF virtualization articles, endless scrolling would be a nice improvement of the user experience. We will definitely revise it and track the demand for such virtual capabilities.

    Regards,
    Joana
    Progress TelerikUI for Blazor
  3. Ross
    Ross avatar
    9 posts
    Member since:
    Jul 2011

    Posted 29 Apr Link to this post

    Further to this just as a point of reference it may be interesting to look at the relatively recent Angular 7 virtual scroll viewport.

    https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c

    I was able to get some rudementry virtual data by listening to the scrolled index changed event which fired everytime the record at the top of the grid changed as it scrolled passed. I then loaded up a page of data as the record count got close to the end and added it to the end of the array. It then appeared nicely when scrolled to.

    My template implementation is as follows

    <cdk-virtual-scroll-viewport itemSize="35" fxFlex (scrolledIndexChange)="handler($event)">
      <li *cdkVirtualFor="let hero of heroes">
        <a routerLink="/detail/{{hero.id}}">
          <span class="badge">{{hero.id}}</span> {{hero.name}}
        </a>
      </li>
    </cdk-virtual-scroll-viewport>

     

    I use these types of grids a lot and find it really nice being able to scroll through the data. Im sure lots of other people do too and thats why its in Angular 7.

    Thanks,

    Ross

  4. Joana
    Admin
    Joana avatar
    205 posts

    Posted 29 Apr Link to this post

    Hi Ross,

    Thank you for the follow up and for sharing these resources.

    We highly appreciate such feedback. Once the feature is considered for implementation, we will review all suggestions and the functional specification will cover the use cases.

    Regards,
    Joana
    Progress TelerikUI for Blazor
Back to Top