Add columns to a datagrid dynamically

[PavaniAmanchi]

Hi All,

I have a datagrid control like this

<material:DataGrid HorizontalOptions="Center" Margin="30" Padding="15" x:Name="topValueGrid" BackgroundColor="White" IsVisible="False" LineSeparatorColor="Gray">               
<material: DataGrid.EmptyView>
    <VerticalStackLayout Margin="80,20">
        <Label Text="No data available..." HorizontalOptions="Center"/>
    </VerticalStackLayout>
</material: DataGrid.EmptyView>
<material: DataGrid.Columns>
    <material:DataGridColumn Title="Unit Type">
        <material:DataGridColumn.TitleView>
            <Label Text="Unit Type" FontAttributes="Bold" TextColor="Gray" HorizontalOptions="Center" VerticalOptions="Center" Margin="15" />
        </material:DataGridColumn.TitleView>
        <material:DataGridColumn.CellItemTemplate>
            <DataTemplate>
                <Label Text="{Binding UnitType}" FontAttributes="Bold" TextColor="LightSlateGray"  HorizontalOptions="Center" VerticalOptions="Center" Margin="10" />
            </DataTemplate>
        </material:DataGridColumn.CellItemTemplate>
    </material:DataGridColumn>

    <material:DataGridColumn Title="Top Value">
        <material:DataGridColumn.TitleView>
            <Label Text="Top Value" FontAttributes="Bold" TextColor="Gray"  HorizontalOptions="Center" VerticalOptions="Center" Margin="15" />
        </material:DataGridColumn.TitleView>
        <material:DataGridColumn.CellItemTemplate>
            <DataTemplate>
                <Label Text="{Binding TopValue}" FontAttributes="Bold" TextColor="LightSlateGray"  HorizontalOptions="Center" VerticalOptions="Center" Margin="10" />
            </DataTemplate>
        </material:DataGridColumn.CellItemTemplate>
    </material:DataGridColumn>
</material:DataGrid.Columns>

</material:DataGrid>

Binding the data to it in C# code like this:

topValueGrid.IsVisible = true;
topValueGrid.ItemsSource = ResultCollection;

Now I have a requirement that these data columns need to be added dynamically to the grid. i.e., I will have another column added to the grid. How could I achieve this with all the styling I have in XAML?

[enisn]

How about defining CellItemTemplate and TitleTemplate once in datagrid, and use columns for only data binding like this:

<material:DataGrid HorizontalOptions="Center" Margin="30" Padding="15" x:Name="topValueGrid" BackgroundColor="White" IsVisible="False" LineSeparatorColor="Gray">
    <material: DataGrid.EmptyView>
        <VerticalStackLayout Margin="80,20">
            <Label Text="No data available..." HorizontalOptions="Center"/>
        </VerticalStackLayout>
    </material: DataGrid.EmptyView>

    <material:DataGrid.CellItemTemplate>
        <DataTemplate>
            <Label Text="{material:DataGridValueBinding}" FontAttributes="Bold" TextColor="LightSlateGray"  HorizontalOptions="Center" VerticalOptions="Center" Margin="10" />
        </DataTemplate>
    </material:DataGrid.CellItemTemplate>

    <material:DataGrid.TitleTemplate>
        <DataTemplate>
            <Label Text="{Binding Title}" FontAttributes="Bold" TextColor="Gray" HorizontalOptions="Center" VerticalOptions="Center" Margin="15" />
        </DataTemplate>
    </material:DataGrid.TitleTemplate>

    <material: DataGrid.Columns>
        <material:DataGridColumn Title="Unit Type" ValueBinding="{Binding UnitType}" />
        <material:DataGridColumn Title="Top Value" ValueBinding="{Binding TopValue}" />
    </material:DataGrid.Columns>
</material:DataGrid>

And then you can add columns however you want:

topValueGrid.Columns.Add(new DataGridColumn
{
    Title = "Avg. Value",
    ValueBinding = new Binding("AverageValue"),
    Width = new GridLength(1, GridUnitType.Star)
});

[PavaniAmanchi]

Perfect, it is working. Thanks for your quick response.
One more question on the datagrid - If I want to add scrolling to the grid, how can I achieve it?