Out-UDGridData with selectable rows?

Doh @BoSen29 why didn’t I think of that…I was thinking checkboxes as well on powershell studio datagrids, just never thought about adding checkboxes to UD grids…DOH! well pointed out! @dtnyc9005 I believe as @BoSen29 has mentioned adding checkboxes not buttons would be the approach to go, then I guess have a submit button at the bottom of the grid which would give you all the row numbers which have been selected to then perform an action on those items…

What I was looking for is an equivalent to an OnClick handler at the row level like HTML exposes via javascript…

<tr onclick="document.location.href='page2.htm';"><td>cell1</td><td>cell2</td></tr>

Hey @skatterbrainz Im not a HTML guy, but if you know what your doing constructing HTML tables then why not use that via the New-UDHTML command, I answered someones question the other day and it worked. UD uses https://griddlegriddle.github.io/Griddle/ for the UD grids that are displayed. Any modificiation to this UD grid element will mean downloading a clone from github off of ironman universal dashboard, then run the build.ps1 file to create the output folder, then modify the ud-grid.jsx file to include this feature, then re-run the build script then import the module from the output folder, and test if your modification worked, then create some pester tests, then do a PR back to the main github ironman…I only know this much as the export to CSV didnt work in IE which I have to use for the users using my dashbaords…it took me a good few attempts to say the least. :thinking:

2 Likes

Yeah, I like this approach too! This could work now have to get a protype going…

1 Like

I suppose I could build the HTML code for that, but New-UDGrid / Out-UDGridData are so much cleaner :slight_smile:

Oooh! I think I discovered the better way using UDTableGrid and UDElement from this forum post: Coloring Elements in a Table based on a property - The downside is no “filter” feature, or column sorting. But I’m still learning.

I know others have attempted this: https://github.com/ironmansoftware/universal-dashboard/issues/911

There are some issues with it as seen in that issue.

I’m looking at introducing a new grid with many more features in the next minor version of UD - https://github.com/ironmansoftware/universal-dashboard/issues/697

That would allow for more of this type of functionality.

2 Likes

nice! keep us posted?

Of course! When I release that, you’ll know :wink:

1 Like

Hey @dtnyc9005 Did you ever get a working prototype for this? Im looking for the same functionality.

Hi J-C, I did not get a working prototype. The project I was working on, which that was for, got cancelled, and I was pulled in a different direction.

I think I figure Something out. I at least solved the problem I set out to solve.

Import-Module UniversalDashboard

Get-UDDashboard | Stop-UDDashboard

$ProcessList = Get-Process

$theme = Get-UDTheme -Name 'DefaultTight'

$Cache:CheckBoxElementArray = @{ }

$Dashboard = New-UDDashboard -Title "Process Info" -Theme $theme -Content {

    $GridSplat = @{

        Title      = "Process Information"

        Headers    = @(' ', "Select", "Name", "Id", "Handles", "Info")

        Properties = @(' ', "Select", "Name", "Id", "Handles", "info") # Case must match PSCO

        Endpoint   = {

            $Cache:CheckBoxElementArray = @{ }

            $ProcessList | Select-Object | ForEach-Object {

                [PSCustomObject]@{

                    Select  = New-UDCheckbox -Id $_.Id -OnChange (

                        New-UDEndpoint -Endpoint {

                            $CheckBoxElement = Get-UDElement -Id $_.Id

                            $Cache:CheckBoxElementArray[$_.Id] = @{

                                Checked = $CheckBoxElement.Attributes["checked"]

                                Name    = $_.ProcessName

                                Id      = $_.Id

                                Handles = $_.Handles

                            }

                        })

                    Name    = $_.ProcessName

                    Id      = $_.Id

                    Handles = $_.Handles

                    info    = New-UDButton -Text "Info" -OnClick (New-UDEndpoint -Endpoint {

                            Show-UDModal -Content {

                                New-UDTable -Title "Info" -Headers @( "Process Name", "Process Id", "Handles")  -Content {

                                    Get-Process -Id $_.Id | ForEach-Object {

                                        [PSCustomObject]@{

                                            Handles = $_.Handles

                                            Name    = $_.ProcessName

                                            Id      = $_.Id

                                        }

                                    } | Out-UDTableData -Property @(  "Name", "Id", "Handles")

                                }

                            }

                        })

                }

            } | Out-UDGridData

        }

    }

    New-UDButton -Text "Select Process" -OnClick (New-UDEndpoint -Endpoint {

            Show-UDModal -Height '60%' -Width '90%' -Content {

                New-UDGrid @GridSplat -PageSize 5

                New-UDButton -Text "Show Selections" -OnClick (

                    New-UDEndpoint -Endpoint {

                        Show-UDModal -Content {

                            New-UDTable -Title 'Selected' -Headers @("Name", "Id", "Handles") -Content {

                                foreach ($Key in $Cache:CheckBoxElementArray.Keys) {

                                    [PSCustomObject]@{

                                        Name    = $Cache:CheckBoxElementArray[$key]['Name']

                                        Id      = $Cache:CheckBoxElementArray[$key]['Id']

                                        Handles = $Cache:CheckBoxElementArray[$key]['Handles']

                                    } | Out-UDTableData -Property @("Name", "Id", "Handles")

                                }

                            }

                        }

                    }

                )

            }

        })

}

Start-UDDashboard -Dashboard $Dashboard -Port 10001
3 Likes

If anyone has any constructive criticism regarding my code in the above example feel free to lmk :slight_smile:

@J-C Thanks for sharing. I’m guessing shared code is likely different from what you really implement. Anyway if someone doesn’t like it they are free to change it as desired. My preference is 2 spaces indentation between blocks of code. In VScode, I set code folding preference to ‘indentation’.

   if (condition) {
     "this is true"
   } else {
     "this is false"
   }

Now in large code files ‘Ctrl K+0’ will collapse down to a single page in VScode ususally. I know others like to have multiple files per project which make sense for larger projects. Many moons ago when I was doing system programming, it wasn’t unusual to be working with code files with 100,000 lines of code or bigger. This was mainframe stuff. I think is best to develop your own style and stick to it and be acceptable of other styles that don’t match your desires.

1 Like

image

After changing the identation only, this is how your code folded up for me.

1 Like

Thanks for the tip!
I’m using format on save in my VScode settings which is responsible for the indentation structure atm.

Formatting aspects aside, the results look pretty good. Thanks!

1 Like

Just got around to running dashboard code myself and it worked great on 2.7.0

Had issues running on 2.9.0 though.

Thanks again for sharing.

1 Like

@J-C

Hi! Is it possible to exclude uncheck item? It seems to be added to the array, even when I uncheck the item.

@cn9ne Thanks for bringing this to my attention. I’m not really sure how to handle this.
Any ideas @psDevUK @adam ?