Results 1 to 4 of 4

Thread: How to display a list as comma separated value in DataGrid column

  1. #1

    Thread Starter
    Addicted Member kutlesh's Avatar
    Join Date
    Jun 2018
    Location
    Skopje, Macedonia
    Posts
    202

    How to display a list as comma separated value in DataGrid column

    I have this XAML code:
    Code:
    <Window x:Class="SourcicoProjectTest.RecipeListWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:SourcicoProjectTest.code"
            mc:Ignorable="d"
            Title="RecipeListWindow" Height="450" Width="800" Loaded="Window_Loaded">
        
        <Window.DataContext>
            <local:MainMVVM/>
        </Window.DataContext>
    
        <Window.Resources>
            <local:RecipeCountConverter x:Key="countConverter"/>
        </Window.Resources>
        
        <Grid>
            <DataGrid Margin="5, 5, 5, 5" 
                      SelectedItem="{Binding selectedRecipe}" 
                      ItemsSource="{Binding recipesList}"
                      IsReadOnly="True"
                      AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Recipe ID"
                          Binding="{Binding ID}" />
                    
                    <DataGridTextColumn Header="Recipe Name"
                          Binding="{Binding name}" />
                    
                    <DataGridTextColumn Header="Recipe Source"
                          Binding="{Binding source}" />
                    
                    <DataGridTextColumn Header="Num. of Ingredients"
                          Binding="{Binding Path=ingredients.Count}" />
    
                    <DataGridTextColumn Header="Ingredients"
                          Binding="{Binding Path=ingredients}" />
    
                    <DataGridTextColumn Header="Prep. Time"
                          Binding="{Binding prepTime}" />
    
                    <DataGridTextColumn Header="Prep. Instructions"
                          Binding="{Binding prepInstructions}" />
    
                    <DataGridTemplateColumn>
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button Content="Details"/>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
    
                    <DataGridTemplateColumn>
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button Content="Delete"/>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
    
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </Window>
    The selected item is of type Recipe. Recipe has a list of ingredients:

    Code:
    ObservableCollection<Ingredient> ingredients
    I want to display just the first three ingredients(comma separated) and add ellipsis(...) if there is more than three in a single column.

    Code:
    <DataGridTextColumn Header="Ingredients"
                          Binding="{Binding Path=ingredients}" />
    What should I do in my XAML code???

  2. #2
    Fanatic Member
    Join Date
    Nov 2016
    Location
    Slovenia
    Posts
    575

    Re: How to display a list as comma separated value in DataGrid column

    For the first part - how to add just three ingredients - I think you should take a look at multibinding. And for second part - adding elipsis if some condition - maybe some trigger that im not aware of, but probably you would need to do that in code. Hope it helps a bit.

  3. #3

    Re: How to display a list as comma separated value in DataGrid column

    Hello Kutlesh,

    Add a property to the class that returns the subject comma-separated using string.Join. Bind the property to the grid.

    Check below for using string.Join:

    Code:
    List<string> val = new List<string>();
    val.Add("A");
    val.Add("B");
    val.Add("C");
    
    string res = string.Join(", ", from item in val select item);
    I hope it helps you.

  4. #4
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: How to display a list as comma separated value in DataGrid column

    Quote Originally Posted by HarshShah View Post
    Hello Kutlesh,

    Add a property to the class that returns the subject comma-separated using string.Join. Bind the property to the grid.

    Check below for using string.Join:

    Code:
    List<string> val = new List<string>();
    val.Add("A");
    val.Add("B");
    val.Add("C");
    
    string res = string.Join(", ", from item in val select item);
    I hope it helps you.
    You don't need a query in that last line. That Join overload accepts an IEnumerable<T> and val is that already:
    csharp Code:
    1. string res = string.Join(", ", val);

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width