Arjan
December 15, 2025, 8:33am
1
Product: PowerShell Universal
Version: 5.6.8
Hi,
I’m trying to get a datagrid (New-UDDataGrid) to use -AutoSizeColumns but it won’t resize the columns on load.
I use -LoadRows to create the dataset and prepare the dataset with Out-DataGirdData.
But when the grid is shown on the page all the colums are displayed without the proper sizes.
I’ve added a button ‘Refresh’ to the page that will use Sync-UDElement -Id 'id-of-the-grid' which will now trigger the grid to reload and auto size the columns.
Is there a way to trigger the autosize of the columns so that it will show properly at the first load,without having to use Sync-UDElement or do I miss something
Here are the corresponding code snippets:
$defaultGridArgs = @{
AutoHeight = $true
AutoSizeColumns = $true
CheckboxSelection = $true
DisableRowSelectionOnClick = $true
HideExport = $true
PageSize = 25
RowsPerPageOptions = @(10, 25, 50, 100)
ShowPagination = $true
ShowQuickFilter = $true
StripedRows = $true
}
New-UDDataGrid @defaultGridArgs -Id 'gridAppRegistrations' -LoadRows {
$Cache:appData = (Get-PsuMwAppRegistration -SolutionId $solutionId).Where{ @(5, 6) -notcontains $_.State }
$Cache:appData.ForEach{
$appReg = $_
$appReg | Add-Member -MemberType NoteProperty -Name 'StateDescription' -Value ($Cache:states.Where{ $_.Value -ieq $appReg.State }).DisplayName
}
$Cache:appData | Out-UDDataGridData -Context $EventData -TotalRows $Cache:appData.Count
} -Columns @(
New-UDDataGridColumn -Field Id -Title 'ID' -Hide
New-UDDataGridColumn -Field DisplayName -Title 'Display Name' -Editable
New-UDDataGridColumn -Field SignInAudience -Title 'Sign In Audience' -Editable -Type singleSelect -ValueOptions $audiences.Value
New-UDDataGridColumn -Field ServicePrincipal -Title 'Service Principal' -Editable -Type Boolean
New-UDDataGridColumn -Field RetainOwner -Title 'Retain Owner' -Editable -Type Boolean
New-UDDataGridColumn -Field CertificateRollover -Title 'Managed Certificate' -Editable -Type Boolean
New-UDDataGridColumn -Field CertificateVaultName -Title 'Certificate Vault Name' -Editable
New-UDDataGridColumn -Field StateDescription -Title 'State'
New-UDDataGridColumn -Field ObjectId -Title 'Object ID'
)
Hi Arjan,
Thank you for sharing the reproduction details. Based on your post, it looks like -AutoSizeColumns is not recalculating on the initial render when the rows are provided via -LoadRows and Out-UDDataGridData, but it does recalculate after a manual refresh with Sync-UDElement.
To narrow this down, could you confirm the following?
Is the grid rendered inside any container that may start hidden or size later (tabs, accordion, modal, or a collapsible region)? This can affect the initial width measurement.
Does it happen on a cold load (F5) as well as when navigating to the page from another page in the app?
Can you reproduce with a minimal grid (2 to 3 simple text columns and a small dataset) to rule out interactions with column types like boolean, singleSelect, or editable columns?
As a first step, please try the same script on PSU 5.6.12 to confirm whether the behavior is still present. If it still reproduces there with a minimal example, I can help package the repro for a bug report.
As a short-term workaround, if you need a stable layout on first render, you may want to define explicit sizing for the columns that tend to be long (for example using flexible columns and minWidth) rather than relying on autosize.
Best regards,
Arjan
January 5, 2026, 9:02am
3
Hi Ruben,
sorry for the delay, holiday season
The behavior is the same with PSU 5.6.12.
The grid is rendered inside a Tab. Below the code snippet (removed the content of the other tabs)
New-UDTabs -Tabs {
#region: Solution Tab
New-UDTab -Text 'Solution' -Content {
}
#endregion: Solution Tab
#region: AzureDevOps Tab
New-UDTab -Text 'Azure DevOps' -Content {
}
#endregion: AzureDevOps Tab
#region: App Registrations Tab
New-UDTab -Text 'App Registrations' -Content {
New-UDGrid -Container -Content {
New-UDGrid -Item -LargeSize 12 -MediumSize 12 -SmallSize 12 -ClassName 'button-header' -Content {
New-UDButton -Text 'New App Registration ...' -OnClick {
Show-UDModal -Header {
New-UDTypography -Text 'New App Registration' -Variant h6
} -Content {
New-UDTextbox -Label 'Display Name' -Id 'display_name' -Type Text -FullWidth -ClassName 'text-control'
New-UDSelect -Label 'Sign In Audience' -Id 'sign_in_audience' -ClassName 'select-control' -Option {
$Cache:SignInAudiences.ForEach{
New-UDSelectOption -Name $_.DisplayName -Value $_.Value
}
} -FullWidth -DefaultValue $Cache:SignInAudiences.Where{ $_.Value -eq 'AzureADMyOrg' }.Value
New-UDCard -Title 'Options' -Content {
New-UDRow -Columns {
New-UDColumn -LargeSize 12 -MediumSize 12 -SmallSize 12 -Content {
New-UDSwitch -Label 'Service Principal' -Id 'service_principal' -LabelPlacement right -ClassName 'switch-control' -Checked $false
}
New-UDColumn -LargeSize 12 -MediumSize 12 -SmallSize 12 -Content {
New-UDSwitch -Label 'Retain Owner' -Id 'retain_owner' -LabelPlacement right -ClassName 'switch-control' -Checked $false
}
New-UDColumn -LargeSize 12 -MediumSize 12 -SmallSize 12 -Content {
New-UDSwitch -Label 'Managed Certificate' -Id 'certificate_rollover' -LabelPlacement right -ClassName 'switch-control' -Checked $false -OnChange {
if ($EventData) {
Set-UDElement -Id 'certificate_vault_name' -Properties @{
Disabled = $false
Style = @{}
}
} else {
Set-UDElement -Id 'certificate_vault_name' -Properties @{
Disabled = $true
Style = @{ 'display' = 'none' }
}
}
}
}
New-UDTextbox -Label 'Certificate Vault Name' -Id 'certificate_vault_name' -Type Text -FullWidth -Disabled -ClassName 'text-control' -Style @{ 'display' = 'none' }
}
}
New-UDButton -Id 'saveButtonAppReg' -Text 'Save' -OnClick {
$newAppRegArgs = @{
SolutionId = $Cache:SolutionId
DisplayName = (Get-UDElement -Id 'display_name').Value
SignInAudience = (Get-UDElement -Id 'sign_in_audience').Value
ServicePrincipal = (Get-UDElement -Id 'service_principal').Checked
RetainOwner = (Get-UDElement -Id 'retain_owner').Checked
CertificateRollover = (Get-UDElement -Id 'certificate_rollover').Checked
}
if ($newAppRegArgs.CertificateRollover) {
$newAppRegArgs.Add('CertificateVaultName', (Get-UDElement -Id 'certificate_vault_name').Value)
}
$Id = (New-PsuMwAppRegistration @newAppRegArgs -Verbose).Id
Show-UDToast -Message "App Registration [$Id] created successfully." -Duration 5000
Start-Sleep -Seconds 1
Sync-UDElement -Id 'gridAppRegistrations'
Hide-UDModal
}
New-UDButton -Id 'cancelButtonAppReg' -Text 'Cancel' -OnClick {
Hide-UDModal
}
}
}
New-UDButton -Id 'removeButtonAppReg' -Disabled -Text 'Remove selected' -OnClick {
Show-UDModal -Header {
New-UDTypography -Text 'Delete row(s)' -Variant h6
} -Content {
$selection = (Get-UDElement -Id 'gridAppRegistrations').Selection
$data = $Cache:appData.Where{ $_.id -in $selection }
New-UDTable -Id 'tableRemove' -Data $data -Columns @(
New-UDTableColumn -Property Id -Title 'ID' -Hidden
New-UDTableColumn -Property DisplayName -Title 'Display Name'
New-UDTableColumn -Property SignInAudience -Title 'Sign In Audience'
New-UDTableColumn -Property ServicePrincipal -Title 'Service Principal'
New-UDTableColumn -Property RetainOwner -Title 'Retain Owner'
New-UDTableColumn -Property CertificateRollover -Title 'Managed Certificate'
New-UDTableColumn -Property CertificateVaultName -Title 'Certificate Vault Name'
New-UDTableColumn -Property StateDescription -Title 'State'
)
New-UDButton -Id 'deleteAppReg' -Text 'Delete' -OnClick {
$data.ForEach{
$updateArgs = @{
Id = $_.Id
State = 6
}
Update-PsuMwAppRegistration @updateArgs > $null
}
Show-UDToast -Message "Deleted [$($data.Count)] app registrations successfully." -Duration 5000
Start-Sleep -Seconds 1
Sync-UDElement -Id 'gridAppRegistrations'
Hide-UDModal
}
New-UDButton -Id 'cancelAppRegDelete' -Text 'Cancel' -OnClick {
Hide-UDModal
}
}
}
New-UDButton -Id 'refreshButtonAppReg' -Text 'Refresh' -OnClick {
Sync-UDElement -Id 'gridAppRegistrations'
}
}
New-UDGrid -Item -LargeSize 12 -MediumSize 12 -SmallSize 12 -Content {
New-UDDataGrid @Cache:defaultGridArgs -Id 'gridAppRegistrations' -LoadRows {
$Cache:appData = (Get-PsuMwAppRegistration -SolutionId $Cache:SolutionId).Where{ @(5, 6) -notcontains $_.State }
$Cache:appData.ForEach{
$appReg = $_
$appReg | Add-Member -MemberType NoteProperty -Name 'StateDescription' -Value ($Cache:States.Where{ $_.Value -ieq $appReg.State }).DisplayName
$appReg | Add-Member -MemberType NoteProperty -Name 'SignInAudienceDescription' -Value ($Cache:SignInAudiences.Where{ $_.Value -ieq $appReg.SignInAudience }).DisplayName
}
$Cache:appData | Out-UDDataGridData -Context $EventData -TotalRows $Cache:appData.Count
} -Columns @(
New-UDDataGridColumn -Field Id -Title 'ID' -Hide -Type string
New-UDDataGridColumn -Field DisplayName -Title 'Display Name' -Type string
New-UDDataGridColumn -Field SignInAudienceDescription -Title 'Sign In Audience' -Type string
New-UDDataGridColumn -Field ServicePrincipal -Title 'Service Principal' -Type Boolean
New-UDDataGridColumn -Field RetainOwner -Title 'Retain Owner' -Type Boolean
New-UDDataGridColumn -Field CertificateRollover -Title 'Managed Certificate' -Type Boolean
New-UDDataGridColumn -Field CertificateVaultName -Title 'Certificate Vault Name' -Type string
New-UDDataGridColumn -Field StateDescription -Title 'State' -Type string
New-UDDataGridColumn -Field ObjectId -Title 'Object ID' -Type string
New-UDDataGridColumn -DisableColumnMenu -Title 'Edit' -Align center -HideSortIcons -Width 75 -Resizable $false -Render {
New-UDButton -Icon (New-UDIcon -Icon 'Pen') -Size Small -Variant contained -ClassName 'edit-button' -OnClick {
$appReg = $Cache:appData.Where{ $_.Id -eq $EventData.Id }
Show-UDModal -Header {
New-UDTypography -Text "Edit App Registration [$($appReg.DisplayName)]" -Variant h6
} -Content {
New-UDTextbox -Label 'Display Name' -Id 'edit_display_name' -Type Text -FullWidth -ClassName 'text-control' -Value $appReg.DisplayName
New-UDSelect -Label 'Sign In Audience' -Id 'edit_sign_in_audience' -ClassName 'select-control' -Option {
$Cache:SignInAudiences.ForEach{
New-UDSelectOption -Name $_.DisplayName -Value $_.Value
}
} -FullWidth -DefaultValue ($Cache:SignInAudiences.Where{ $_.Value -ieq $appReg.SignInAudience }).Value
New-UDCard -Title 'Options' -Content {
New-UDRow -Columns {
New-UDColumn -LargeSize 12 -MediumSize 12 -SmallSize 12 -Content {
New-UDSwitch -Label 'Service Principal' -Id 'edit_service_principal' -LabelPlacement right -ClassName 'switch-control' -Checked $appReg.ServicePrincipal
}
New-UDColumn -LargeSize 12 -MediumSize 12 -SmallSize 12 -Content {
New-UDSwitch -Label 'Retain Owner' -Id 'edit_retain_owner' -LabelPlacement right -ClassName 'switch-control' -Checked $appReg.RetainOwner
}
New-UDColumn -LargeSize 12 -MediumSize 12 -SmallSize 12 -Content {
New-UDSwitch -Label 'Managed Certificate' -Id 'edit_certificate_rollover' -LabelPlacement right -ClassName 'switch-control' -Checked $appReg.CertificateRollover -OnChange {
if ($EventData) {
Set-UDElement -Id 'edit_certificate_vault_name' -Properties @{
Disabled = $false
Style = @{}
}
} else {
Set-UDElement -Id 'edit_certificate_vault_name' -Properties @{
Disabled = $true
Style = @{ 'display' = 'none' }
}
}
}
}
New-UDTextbox -Label 'Certificate Vault Name' -Id 'edit_certificate_vault_name' -Type Text -FullWidth -ClassName 'text-control' -Value $appReg.CertificateVaultName
}
}
New-UDButton -Id 'saveEditButtonAppReg' -Text 'Save' -OnClick {
$updateAppRegArgs = @{
CertificateRollover = (Get-UDElement -Id 'edit_certificate_rollover').Checked
DisplayName = (Get-UDElement -Id 'edit_display_name').Value
Id = $appReg.Id
RetainOwner = (Get-UDElement -Id 'edit_retain_owner').Checked
ServicePrincipal = (Get-UDElement -Id 'edit_service_principal').Checked
SignInAudience = (Get-UDElement -Id 'edit_sign_in_audience').Value
SolutionId = $Cache:SolutionId
}
if ($newAppRegArgs.CertificateRollover) {
$newAppRegArgs.Add('CertificateVaultName', (Get-UDElement -Id 'edit_certificate_vault_name').Value)
}
$Id = (Update-PsuMwAppRegistration @updateAppRegArgs).Id
Show-UDToast -Message "App Registration [$Id] updated successfully." -Duration 5000
Start-Sleep -Seconds 1
Sync-UDElement -Id 'gridAppRegistrations'
Hide-UDModal
}
New-UDButton -Id 'cancelEditButtonAppReg' -Text 'Cancel' -OnClick {
Hide-UDModal
}
}
}
}
) -OnSelectionChange {
Set-UDElement -Id 'removeButtonAppReg' -Properties @{
Disabled = (Get-UDElement -Id 'gridAppRegistrations').selection.Count -eq 0
}
}
}
}
}
#endregion: App Registrations Tab
#region: Security Groups Tab
New-UDTab -Text 'Security Groups' -Content {
}
#endregion: Security Groups Tab
#region: Approvals Tab
New-UDTab -Text 'Approvals' -Content {
}
#endregion: Approvals Tab
}
When navigating to the ‘AppRegistrations’ tab, the auto sizing fails. Then press ‘F5’ will return to the first tab, then navigating to the ‘AppRegistrations’ tab will show the proper sizing for the columns:
after:
Created a simple page with the content of the tab. On this page the auto sizing works properly.
?
, but here are the requested answers:
