Identity Management - DataTable not displaying data #10691

4 Answer(s)

• 

  0

  AI-Bot created 4 months ago

  Support Team ABP Agent

  • Yes, this behavior is a known type of UI refresh/layout issue in Angular apps where the table is rendered before its container gets a final size (e.g., after route animation/layout calculations). A window resize triggers a reflow, so the datatable suddenly paints correctly. The same reason explains why clicking sort sometimes doesn’t redraw until resize.

  • In ABP Angular UIs, a practical workaround is to force a resize/reflow after the data arrives / after view init on the Users/Roles pages (or globally after navigation).

  Workaround (Angular)

  Add a small resize dispatch after the list loads or after the view is stable:

  import { AfterViewInit, Component, NgZone } from '@angular/core';
  
  @Component({...})
  export class UsersComponent implements AfterViewInit {
    constructor(private zone: NgZone) {}
  
    ngAfterViewInit() {
      // Let Angular finish rendering, then trigger a reflow for the datatable
      this.zone.runOutsideAngular(() => {
        setTimeout(() => window.dispatchEvent(new Event('resize')), 0);
        setTimeout(() => window.dispatchEvent(new Event('resize')), 100);
      });
    }
  }
  

  If you don’t want to touch module pages, you can do something similar once globally after each navigation ends (e.g., in your root layout component subscribing to Router events) and dispatch a resize.

  Recommended fix

  • Upgrade to the latest patch/minor version in the 9.x line (or newer) on both backend and Angular packages. These kinds of UI issues are typically addressed in later patch releases, and staying on 9.1.2 can keep you exposed to already-fixed frontend quirks.

  Sources

  No verified source available for this specific v9.1.2 Identity Users/Roles datatable-resize rendering issue (tooling could not access the ABP source repositories at the moment to confirm a specific fix/issue ID).

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 4 months ago

  Support Team Fullstack Developer

  Hi,

  I tried to reproduce this locally on a freshly generated 9.2.2 Angular template (Identity Roles and Users pages). The ExtensibleTable component code in 9.1.x and 9.2.x is the same, so it's a useful comparison but not proof your exact setup is unaffected. On my side both pages render correctly after data load, no resize needed — so this doesn't look like a generic 9.1.2 framework defect; it's more likely related to project-specific layout, theme customization, browser state, or timing in your environment.

  Could you share a bit more so we can narrow it down:

  1. A short GIF or screen recording showing the issue (enter the page → empty table → resize → data appears). The video helps a lot more than a text description — we want to see what the empty state actually looks like (header rendered? loading spinner stuck? rows present but blank cells?).
  2. Versions of @abp/ng.components, @abp/ng.theme.lepton-x, and @swimlane/ngx-datatable from your package.json.
  3. Browser, version, screen resolution, and zoom level.
  4. Any custom CSS or theme overrides on top of LeptonX.
  5. While the table is in the "empty" state, open browser DevTools → check console for errors/warnings, and inspect the ngx-datatable host element's computed width / height (often this kind of issue comes from the container being 0×0 at first render due to a hidden/flex parent).
  6. Does the issue still happen in an incognito window (rules out extensions / cached service worker), and on a fresh 9.1.2 template with no customizations (rules out something specific to your project).

  In the meantime, inside your existing root AppComponent you can add this to force a recalculate after every navigation:

  import { NgZone, OnInit, inject } from '@angular/core';
  import { NavigationEnd, Router } from '@angular/router';
  import { filter } from 'rxjs/operators';
  
  export class AppComponent implements OnInit {
    private router = inject(Router);
    private zone = inject(NgZone);
  
    ngOnInit() {
      this.router.events
        .pipe(filter(e => e instanceof NavigationEnd))
        .subscribe(() => {
          this.zone.runOutsideAngular(() => {
            setTimeout(() => window.dispatchEvent(new Event('resize')), 0);
            setTimeout(() => window.dispatchEvent(new Event('resize')), 100);
          });
        });
    }
  }
  

  This is the same mechanism your manual window resize is triggering today, dispatched programmatically. It's a temporary workaround while we narrow down the root cause from the details above.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  sserestyen created 4 months ago

  Thanks for your response. I'll look into these, and if none of these solve the issue I will provide more details.

  Thanks, S.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 4 months ago

  Support Team Fullstack Developer

  ok

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel