FlexGrid ComboBox column

FlexGrid ComboBox column

Posted by: l.balazs on 14 September 2024, 11:26 pm EST

• 

  l.balazs

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2024, 11:26 pm EST

  Hi,
  
  I need a ComboBox editor in FlexGrid WinUI. I when user double clicks on a cell data I would like to show choices in a ComboBox control. Is that possible?
  
  Thanks,
  
  Louis

• 

  kartik.dua

  

  • Post Options:
  • Link
    Copy

  Posted 16 September 2024, 7:37 am EST

  Hi Louis,

  The easiest way to set a dropdown editor in a FlexGrid column is by setting the DataMap property of the column. Using a DataMap, the grid internally creates and shows a dropdown when editing a cell. Please refer to the sample project attached below, where editing the ‘Language’ column will display a dropdown

  WinUI.FlexGrid.ComboBox.zip

  Best Regards,
  
  Kartik

• 

  l.balazs

  • Post Options:
  • Link
    Copy

  Posted 16 September 2024, 8:05 am EST

  Hi Kartik,
  
  Thanks for the excellent sample project!

  The problem is that I must show (stay with your sample) Image and Name of the spoken language of the people in the pop-up picker, (not name only). This need DataTemplate but lack of the documentation I do not know whether GridDataMap can show a horizonzal StackPanel with an Image and a TextBlock control or not. This needs GridDataMap.DataTemplate. Hopefully yes…

  Many thanks for your help!
  
  Louis

• 

  kartik.dua

  

  • Post Options:
  • Link
    Copy

  Posted 17 September 2024, 7:01 am EST

  Hi Louis,

  Yes, this requirement can be implemented, but not by using the GridDataMap. Instead, you can use the CellEditingTemplate for the columns to use a ComboBox and the ItemTemplate of the ComboBox to show both images and text in the items.

  Please refer to the updated sample project for the implementation - WinUI.FlexGrid.ComboBox_Updated.zip

  Best Regards,
  
  Kartik

• 

  l.balazs

  • Post Options:
  • Link
    Copy

  Posted 17 September 2024, 9:40 am EST

  Thank Kartik, excellent sample project. Many thanks for it.

  Now the only problem is, when the language cell of the FlexGrid control is not edited then it shows name only of the spoken language, not image and name. I thought I can fix this but I failed. I thought I could add a CellTemplate/DataTemplate to the language column but it does not work. When the cell is not edited then it shown the name of the user! Wow!

  	<c1:GridColumn x:Name="Language" Header="Language" Binding="Langauge">
  		   <!--Basic cell template-->
                      <c1:GridColumn.CellTemplate>
                          <DataTemplate x:DataType="local:LanguageItem">
                              <StackPanel Orientation="Horizontal">
                                  <Image Source="{Binding ImageSource}" />
                                  <TextBlock Text="{Binding Name}" Margin="4 0 0 0" 
                                             HorizontalAlignment="Center" VerticalAlignment="Center"/>
                              </StackPanel>
                          </DataTemplate>
                      </c1:GridColumn.CellTemplate>
  
                      <!--Cell editing template-->
                      <c1:GridColumn.CellEditingTemplate>
                          <DataTemplate>
  				...
  				...
                          </DataTemplate>
                      </c1:GridColumn.CellEditingTemplate>
                  </c1:GridColumn>

  Thanks,
  
  Louis

• 

  kartik.dua

  

  • Post Options:
  • Link
    Copy

  Posted 18 September 2024, 3:28 am EST

  Hi Louis,

  Yes, this requirement can be fulfilled by adding a CellTemplate in the Language column. However, you will need to first change the Type of the field bound to the Language column. Then, you can chain the field names in your cell template’s binding.

  Please see the updated sample project for reference - WinUI.FlexGrid.ComboBox_CellTemplate.zip

  Best Regards,
  
  Kartik

• 

  l.balazs

  • Post Options:
  • Link
    Copy

  Posted 18 September 2024, 4:43 am EST

  Hi Kartik,
  
  Thanks, it is almost perfect solution, but when you launch it first time then only the language names are shown (no icons). You must edit/change the language then both the icon and the language name are shown. This must be some very small glitch.

  Thanks for your very valuable help.
  
  Best regards,
  
  Louis

• 

  kartik.dua

  

  • Post Options:
  • Link
    Copy

  Posted 18 September 2024, 5:06 am EST

  Hi Louis,

  Yes, this happens because the .json file we used for the sample data contains absolute path for the images on our system, and it does not work on your system. Using this code in your project with your relative ImageSource will work fine on your end.

  Best Regards,
  
  Kartik

• 

  l.balazs

  • Post Options:
  • Link
    Copy

  Posted 18 September 2024, 5:07 am EST

  Here is my version with real language flag icons. Please comment it.
  
  Thanks,
  
  LouisWinUI.FlexGrid.ComboBox_Louie.zip

• 

  l.balazs

  • Post Options:
  • Link
    Copy

  Posted 18 September 2024, 6:05 am EST

  Hi Kartik,
  
  You forgot to mention that you changed the json file: You added Language (LanguageItem type) property. This item is initialized in your json to you computer’s file system:

  [
    {
      "Name": "Adeel Solangi",
      "Language": {
        "LanguageName": "Sindhi",
        "ImageSource": {
          "AutoPlay": true,
          "CreateOptions": 0,
          "DecodePixelHeight": 0,
          "DecodePixelType": 0,
          "DecodePixelWidth": 0,
          "IsAnimatedBitmap": false,
          "IsPlaying": false,
          => WRONG FILE NAME: "UriSource": "file:///C:/Users/kartik.dua/Downloads/file-44d3afcc-936f-482f-89e2-88add139b056/WinUI.FlexGrid.ComboBox_Updated/WinUI.FlexGrid.ComboBox/bin/x64/Debug/net8.0-windows10.0.19041.0/win-x64/AppX/Images/sample.png",
          "PixelHeight": 0,
          "PixelWidth": 0,
          "Dispatcher": null,
          "DispatcherQueue": { "HasThreadAccess": true }
        }
      },
      "Id": "V59OF92YF627HFY0",
      "Bio": "Donec lobortis eleifend condimentum. Cras dictum dolor lacinia lectus vehicula rutrum. Maecenas quis nisi nunc. Nam tristique feugiat est vitae mollis. Maecenas quis nisi nunc.",
      "Version": 6.1
    },
  

  Louis

• 

  kartik.dua

  

  • Post Options:
  • Link
    Copy

  Posted 18 September 2024, 6:11 am EST

  Hi Louis,

  Thank you for sharing your sample. It works completely fine. We have marked it as the answer to this thread.

  Best Regards,
  
  Kartik