Problems with two Datagrids on one page

1

I have problems with two data grids on one page. In this situation there are problems in rendering columns. Mostly all rendered columns aren’t displayed.

$pages += New-UDPage -Name "Grid" -Content {
 
    $ci = Get-Process 

    New-UDDataGrid   -LoadRows {
        
        $Data = @()
        $ci.PsObject.Properties | select-object -last 20  | ForEach-Object {
            # Write-Host $_
            if ($_.name -like "*") {
                $Data += @{
                    Name   = $_.name
                    Value  = [String]$_.value
                    render = New-UDChip -Label $_.name -Color primary
                    link   = New-UDLink -url "http://192.178.178.50?$($_.name)" -OpenInNewWindow -Children {
                        New-UDicon -Icon "Info"                        
                    }
                }
            }
        }
        @{
            rows     = $Data 
            rowCount = $Data.Length
        }
    } -Columns @(
        @{ field       = "name" 
            HeaderName = "Bezeichner"
            Render     = { new-udelement -Tag "b" -Content { New-UDTypography $eventdata.name } }
            MinWidth   = 300
        }
        @{ field       = "value"
            HeaderName = "Wert"
            MinWidth   = 150
        }
        @{
            HeaderName = "Render"
            field      = "render"
            Render     = {$eventdata.render}
        }
        @{
            HeaderName = "..."
            field      = "link"
            width = 15
            align= "center"
            Render     = {$eventdata.link}
        }
    ) -AutoHeight 

    New-UDDataGrid -Language "en-US" -density "compact" -LoadRows {
        $Data1 = @()
        $ci.PsObject.Properties | select -first 10 |ForEach-Object {
            # Write-Host $_
            if ($_.name -like "**") {
                $Data1 += @{
                    Name   = $_.name
                    Value  = [String]$_.value
                    render = New-UDChip -Label $_.name -Color primary
                    link   = New-UDLink -url "http://192.178.178.50?$($_.name)" -OpenInNewWindow -Children {
                        New-UDicon -Icon "Info"                        
                    }
                }
            }
        }
        
        @{
            rows     = $Data1 
            rowCount = $Data1.Length
        }
    } -Columns @(
        @{ field       = "name" 
            HeaderName = "Bezeichner"
            Render     = { new-udelement -Tag "b" -Content { New-UDTypography $eventdata.name } }
            MinWidth   = 300
        }
        @{ field       = "value"
            HeaderName = "Wert"
            MinWidth   = 150
        }
        @{
            HeaderName = "Render"
            field      = "render"
            Render     = {$eventdata.render}
        }
        @{
            HeaderName = "..."
            field      = "link"
            width = 15
            align= "center"
            Render     = {$eventdata.link}
        }
    ) -AutoHeight 
}

Bildschirmfoto 2022-09-12 um 21.34.05
Bildschirmfoto 2022-09-12 um 21.34.052236×714 39.8 KB

2

This error is still there in 3.3.0 :frowning:

3

We can take a look at this in the 3.3.1 patch.

4

I can reproduce this but one work around I found is to wrap the data grid in a dynamic.

$pages += New-UDPage -Name "Grid" -Content {
 
    $ci = Get-Process 

    New-UDDataGrid   -LoadRows {
        
        $Data = @()
        $ci.PsObject.Properties | select-object -last 20  | ForEach-Object {
            # Write-Host $_
            if ($_.name -like "*") {
                $Data += @{
                    Name   = $_.name
                    Value  = [String]$_.value
                    render = New-UDChip -Label $_.name -Color primary
                    link   = New-UDLink -url "http://192.178.178.50?$($_.name)" -OpenInNewWindow -Children {
                        New-UDicon -Icon "Info"                        
                    }
                }
            }
        }
        @{
            rows     = $Data 
            rowCount = $Data.Length
        }
    } -Columns @(
        @{ field       = "name" 
            HeaderName = "Bezeichner"
            Render     = { new-udelement -Tag "b" -Content { New-UDTypography $eventdata.name } }
            MinWidth   = 300
        }
        @{ field       = "value"
            HeaderName = "Wert"
            MinWidth   = 150
        }
        @{
            HeaderName = "Render"
            field      = "render"
            Render     = {$eventdata.render}
        }
        @{
            HeaderName = "..."
            field      = "link"
            width = 15
            align= "center"
            Render     = {$eventdata.link}
        }
    ) -AutoHeight 

  New-UDDynamic -Content {
    New-UDDataGrid -Language "en-US" -density "compact" -LoadRows {
        $Data1 = @()
        $ci.PsObject.Properties | select -first 10 |ForEach-Object {
            # Write-Host $_
            if ($_.name -like "**") {
                $Data1 += @{
                    Name   = $_.name
                    Value  = [String]$_.value
                    render = New-UDChip -Label $_.name -Color primary
                    link   = New-UDLink -url "http://192.178.178.50?$($_.name)" -OpenInNewWindow -Children {
                        New-UDicon -Icon "Info"                        
                    }
                }
            }
        }
        
        @{
            rows     = $Data1 
            rowCount = $Data1.Length
        }
    } -Columns @(
        @{ field       = "name" 
            HeaderName = "Bezeichner"
            Render     = { new-udelement -Tag "b" -Content { New-UDTypography $eventdata.name } }
            MinWidth   = 300
        }
        @{ field       = "value"
            HeaderName = "Wert"
            MinWidth   = 150
        }
        @{
            HeaderName = "Render"
            field      = "render"
            Render     = {$eventdata.render}
        }
        @{
            HeaderName = "..."
            field      = "link"
            width = 15
            align= "center"
            Render     = {$eventdata.link}
        }
    ) -AutoHeight 
}
}
1 Like