C#•3y ago•

51 replies

❔ WPF Dynamic DataGrid

I need to be able to build a DataGrid to support a dynamic (I.E. determined at runtime) set of columns. I'm hoping to be able to use a

DataGrid

DataGrid

instead of building a custom control of some kind that's just build on top of a

Grid

Grid

, because there's a lot of nice stuff that

DataGrid

DataGrid

supports, like sorting.

Reason being, I'm trying to build a UI where the user can import CSV files. I want the UI to display the CSV file (at least in part) in its raw form, I.E. just a pure table of nothing but strings. This gives the user a chance to look at it, and then assign which columns have which functional meaning, for further parsing. It will also be able to give feedback on validation, E.G. highlight cells as invalid in the column they've designated as "Date", if those cells contain invalid date values.

Setting up the columns was fairly straightforward, I wrote a

Behavior<T>

Behavior<T>

that gives me a

HeadersSource

HeadersSource

property I can bind to, to define how many columns there are, and what their names are (parsed out of the CSV document).

public class DraftsCsvImportWorkspaceModel
{
    public IReadOnlyList<DraftsCsvImportColumnHeaderModel> ColumnHeaders { get; }
    public IReadOnlyList<IReadOnlyList<DraftsCsvImportColumnValueViewModel>> Records { get; }
}

public class DraftsCsvImportWorkspaceModel
{
    public IReadOnlyList<DraftsCsvImportColumnHeaderModel> ColumnHeaders { get; }
    public IReadOnlyList<IReadOnlyList<DraftsCsvImportColumnValueViewModel>> Records { get; }
}

<DataGrid ItemsSource="{Binding Records, Mode=OneTime}">
    <b:Interaction.Behaviors>
        <Interactions:DynamicColumnsBehavior HeadersSource="{Binding ColumnHeaders, Mode=OneTime}"/>
    </b:Interaction.Behaviors>
</DataGrid>

<DataGrid ItemsSource="{Binding Records, Mode=OneTime}">
    <b:Interaction.Behaviors>
        <Interactions:DynamicColumnsBehavior HeadersSource="{Binding ColumnHeaders, Mode=OneTime}"/>
    </b:Interaction.Behaviors>
</DataGrid>

protected override void OnAttached()
{
    AssociatedObject.AutoGenerateColumns = false;
    AssociatedObject.Columns.Clear();
    if (HeadersSource is IEnumerable headersSource)
    {
        foreach(var header in headersSource)
        {
            AssociatedObject.Columns.Add(new DataGridTemplateColumn()
            {
                Header = header
            });
        }
    }
}

protected override void OnAttached()
{
    AssociatedObject.AutoGenerateColumns = false;
    AssociatedObject.Columns.Clear();
    if (HeadersSource is IEnumerable headersSource)
    {
        foreach(var header in headersSource)
        {
            AssociatedObject.Columns.Add(new DataGridTemplateColumn()
            {
                Header = header
            });
        }
    }
}

I'm not sure how I can proceed from here, though. Ultimately, what I suppose I need is a way to pass down the column index to each cell, for use in binding. I think in theory what I could do with DataGridTemplateColumn is....

<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <ContentPresenter Content="{Binding [0]}"/>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <ContentPresenter Content="{Binding [0]}"/>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

That is,

DataGrid.ItemsSource

DataGrid.ItemsSource

is bound to an array/list of the cell ViewModels, and each column needs to bind to the item at the appropriate index of the array. From there, the

ContentPresenter

ContentPresenter

should be able to retrieve the appropriate View for the ViewModel type from resources, and everything should be good. But I don't know how to do the programmatic equivalent of that

CellTemplate

CellTemplate

❔ WPF Dynamic DataGrid

I need to be able to build a DataGrid to support a dynamic (I.E. determined at runtime) set of columns. I'm hoping to be able to use a

DataGrid

DataGrid

instead of building a custom control of some kind that's just build on top of a

Grid

Grid

, because there's a lot of nice stuff that

DataGrid

DataGrid

Behavior<T>

Behavior<T>

that gives me a

HeadersSource

HeadersSource

property I can bind to, to define how many columns there are, and what their names are (parsed out of the CSV document).

public class DraftsCsvImportWorkspaceModel
{
    public IReadOnlyList<DraftsCsvImportColumnHeaderModel> ColumnHeaders { get; }
    public IReadOnlyList<IReadOnlyList<DraftsCsvImportColumnValueViewModel>> Records { get; }
}

public class DraftsCsvImportWorkspaceModel
{
    public IReadOnlyList<DraftsCsvImportColumnHeaderModel> ColumnHeaders { get; }
    public IReadOnlyList<IReadOnlyList<DraftsCsvImportColumnValueViewModel>> Records { get; }
}

<DataGrid ItemsSource="{Binding Records, Mode=OneTime}">
    <b:Interaction.Behaviors>
        <Interactions:DynamicColumnsBehavior HeadersSource="{Binding ColumnHeaders, Mode=OneTime}"/>
    </b:Interaction.Behaviors>
</DataGrid>

<DataGrid ItemsSource="{Binding Records, Mode=OneTime}">
    <b:Interaction.Behaviors>
        <Interactions:DynamicColumnsBehavior HeadersSource="{Binding ColumnHeaders, Mode=OneTime}"/>
    </b:Interaction.Behaviors>
</DataGrid>

protected override void OnAttached()
{
    AssociatedObject.AutoGenerateColumns = false;
    AssociatedObject.Columns.Clear();
    if (HeadersSource is IEnumerable headersSource)
    {
        foreach(var header in headersSource)
        {
            AssociatedObject.Columns.Add(new DataGridTemplateColumn()
            {
                Header = header
            });
        }
    }
}

protected override void OnAttached()
{
    AssociatedObject.AutoGenerateColumns = false;
    AssociatedObject.Columns.Clear();
    if (HeadersSource is IEnumerable headersSource)
    {
        foreach(var header in headersSource)
        {
            AssociatedObject.Columns.Add(new DataGridTemplateColumn()
            {
                Header = header
            });
        }
    }
}

<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <ContentPresenter Content="{Binding [0]}"/>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <ContentPresenter Content="{Binding [0]}"/>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

That is,

DataGrid.ItemsSource

DataGrid.ItemsSource

is bound to an array/list of the cell ViewModels, and each column needs to bind to the item at the appropriate index of the array. From there, the

ContentPresenter

ContentPresenter

should be able to retrieve the appropriate View for the ViewModel type from resources, and everything should be good. But I don't know how to do the programmatic equivalent of that

CellTemplate

CellTemplate

❔ WPF Dynamic DataGrid

❔ WPF Dynamic DataGrid

Similar Threads

Similar Threads

Similar Threads