How to Bind Radio Buttons in a Column of a Data Grid?

Sep 5, 2011 at 3:02 AM

I'm having problems binding radio buttons in a column of a data grid. I have very simple requirements; a 2-column datagrid with only a few rows, the first column to be radio buttons, only one can be selected, and that tells me which "row" the user has selected.  Posts on WPF forums all seem to have the radio button nested inside a data template nested inside a cell template nested inside a DataGridTemplateColumn nested inside a Data Grid. I've written the following very simple example using ShowUI, and the radio buttons display in the Data Grid, but the data binding is wrong ('cause it's not working), and I'm not sure what the correct syntax is. Can anyone point out the proper syntax for this? Thanks! (as always, much kudos to the developers who are creating showUI - I'm learning from every posted question and answer on this discussion group!)

# Demonstrates radio buttons in a datagrid
ipmo showui

New-Window -Title 'Radio Buttons in a Data Grid' -SizeToContent "WidthAndHeight" -Resource @{
  ########################################
  # The Resource dictionary is used to store default settings, start-up parameter arguments, scriptblocks, application strings, and data for bound controls
  ##############################
  # Data for Databound controls
  # The collection of SQL Connection Strings
  SQLConnections = New-Object System.Collections.ObjectModel.ObservableCollection[PSObject]
  ##############################
  ##############################
   # The collection of scriptblocks
  AppScripts = @{
    ###############
    # WindowCloseHandlerAction handles the Windows On_Closing event
    WindowCloseHandlerAction = {write-debug ("WindowCloseHandlerAction starting window: {0}" -f $this)
      #$Host.EnterNestedPrompt() ### Uncomment to force a breakpoint here
      # Write out the values of the radiobuttons
      write-debug ("SQLConnections[0].isChecked = {0} `r`n SQLConnections[1].isChecked = {1}" -f $SQLConnections[0].isChecked, $SQLConnections[1].isChecked)
    # end of WindowCloseHandlerAction 
    }
  # End of AppScripts
  }
  # End of Resources
  ########################################
  } -Content {
  # Although -Content is not required, I prefer to inlcude it to make it clear where the
  #  window content is defined
  ##############################
  DataGrid -Name dg -Columns {
      DataGridTemplateColumn -Header "Selected" -CellTemplate {
        RadioButton -Name rb -GroupName "OneGroupName" | ConvertTo-DataTemplate -Binding @{"rb.IsChecked" = "IsChecked"}
      } -CellEditingTemplate {
        RadioButton -Name rb -GroupName "OneGroupName" | ConvertTo-DataTemplate -Binding @{"rb.IsChecked" = "IsChecked"}
      }
      DataGridTextColumn -Header "SQL Connection String" -Binding {New-Binding -Path "SQLConnectionString"}
    } -On_Loaded {write-debug ("dg On_Loaded Event handler starting dg_ToExcelCommandedSQLConnectionManager: {0}" -f $dg)
      #$Host.EnterNestedPrompt() ### Uncomment to force a breakpoint here
      $dg.ItemsSource = $SQLConnections
      $dg.Items.Refresh()
    }  -CanUserAddRows:$False ## Uncomment CanUserAddRows to hide the "add" row from the DataGrid
  # End of window Content
  ########################################
  } -On_Loaded { write-debug ("window On_Loaded Event handler starting window: {0}" -f $window)
    #$Host.EnterNestedPrompt() ### Uncomment to force a breakpoint here
    # Hookup the Window Closing Event Handler
    Add-EventHandler $Window Closing $AppScripts.WindowCloseHandlerAction
    # Initialize the collection of SQL Connection strings
    # Hardcode a small list of dummy connection strings for the demo
    @(
    ,(1, 'DevelopmentConnectionString')
    ,(2, 'ProductionConnectionString')
    ) | %{$SQLConnections.Add((New-Object PSObject -Property @{'IsChecked' = $false;'VisualOrder'=$_[0];'SQLConnectionString' = $_[1];}))}
    # Set one isChecked to true 
    $SQLConnections[0].isChecked=$true
  # end of Window On_Loaded Event Handler
  } -Show  

Coordinator
Sep 7, 2011 at 4:42 AM

I don't understand why you're trying to use a radio button instead of just the .SelectedItem of the dataGrid (or a listView) -- just make sure you set single selection mode.

(I'm still trying to figure out why my attempt at what you actually said you want to do isn't working either)

Sep 9, 2011 at 4:34 AM

Thanks - I tried your suggestion. I also went with AutoGenerateColumns, which put checkboxes in the "Selected" column. I would prefer  a 'selected' column containing radiobuttons, because visually most people realize a grid with radio buttons down one column mean that only one item at a time can be selected, and visually it's easy to see which one. Using a visual style for a .SelectedItem in a datagrid is just not as intuitive to recognize. That' just IMHO - I'm not willing to spend a lot of time figuring out radio buttons, and will go with the default checkboxes for now. I added -SelectionMode Single to the datagrid declaration - and it works fine.

I'd like to be able to move back to radio buttons in the first column some day - so if you find the reason why they aren't working - 'ppreciate a quick note!

(Wish we could attach screenshots - the difference in the two approachs would be easy to see. Is it possible? I may resort to publishing the screenshots on DropBox -Public , and including links to them.)

Coordinator
Sep 9, 2011 at 6:11 AM
Edited Sep 9, 2011 at 6:11 AM

Oddly, they haven't enabled attachments and images on forum threads (although they are enabled on the documentation, and attachments are allowed on issues as well). We should vote for that on the CodePlex issue list.  Can you post the code that worked?

Oct 11, 2011 at 2:07 PM

I follow this thread to learn the ShowUI. I just downloaded te ShowUI and I can not find DataGrid as mentioned in the discusstion.

These are all the Grid functions that I see. Any help is appreciated.

Thanks,

 

Name                              Category  Synopsis
----                              --------  --------
Grid                              Alias     New-Grid
GridSplitter                      Alias     New-GridSplitter
GridView                          Alias     New-GridView
GridViewColumn                    Alias     New-GridViewColumn
GridViewColumnHeader              Alias     New-GridViewColumnHeader
GridViewHeaderRowPresenter        Alias     New-GridViewHeaderRowPresenter
GridViewRowPresenter              Alias     New-GridViewRowPresenter
UniformGrid                       Alias     New-UniformGrid
Out-GridView                      Cmdlet    Sends output to an interactive tab
New-Grid                          Cmdlet    New-Grid [[-Children] <PSObject>]
New-GridSplitter                  Cmdlet    New-GridSplitter [[-ResizeDirectio
New-GridView                      Cmdlet    New-GridView [[-Columns] <PSObject
New-GridViewColumn                Cmdlet    New-GridViewColumn [[-Header] <PSO
New-GridViewColumnHeader          Cmdlet    New-GridViewColumnHeader [[-Conten
New-GridViewHeaderRowPresenter    Cmdlet    New-GridViewHeaderRowPresenter [[-
New-GridViewRowPresenter          Cmdlet    New-GridViewRowPresenter [[-Conten
New-UniformGrid                   Cmdlet    New-UniformGrid [[-Children] <PSOb

Coordinator
Oct 12, 2011 at 1:39 PM
Edited Oct 12, 2011 at 1:48 PM

The DataGrid is a control from .Net 4 (or the WPFToolkit, if you want to use it in .Net 3.x). 

You can only use the .Net4 version in PowerShell 2 by creating an app.config file which causes PowerShell to run in .Net 4 ...

Otherwise, you can get the WPF Toolkit and use Add-UIModule to create a WPFToolkit module based on the .dll, which you can then import (along with the ShowUI module) and use :-)

Oct 12, 2011 at 4:54 PM

Thanks for your explanation to clear up my confusion.