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???

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.

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.

Quote:

---

Originally Posted by HarshShah

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:

string res = string.Join(", ", val);