CODEWITHSUNDEEP
c#wpfxamldatagrid
Vishal
Vishal

Reputation: 6368

Change the order of Columns in a DataGrid

I want to create something like reusable Control.

I have added a Page called MyDataGrid.xaml to my Project(WPFApplication2)'s root directory. I have changed the root element from Page to DataGrid and added a column to it. you can see that changes in the xaml below:

<DataGrid x:Class="WpfApplication2.MyDataGrid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="300" Width="300">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Delete">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content="X" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

And in the MyDataGrid.xaml.cs I changed the base class to DataGrid. You can see that below:

public partial class MyDataGrid : DataGrid
{
    public MyDataGrid()
    {
        InitializeComponent();
    }
}

Now I have MainWindow.xaml provided by default. I added this reusable control to the MainWindow.xaml and added some Columns to it as you can see below:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Self="clr-namespace:WpfApplication2"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Self:MyDataGrid>
            <Self:MyDataGrid.Columns>
                <DataGridTextColumn Header="Name" />
                <DataGridTextColumn Header="Age" />
                <DataGridTextColumn Header="Class" />
                <DataGridTextColumn Header="School" />
            </Self:MyDataGrid.Columns>
        </Self:MyDataGrid>
    </Grid>
</Window>

My Problem:

When i run the program the Columns are in order below:

Delete Name Age Class School

In above mentioned columns Delete Column is Provided by Default and other columns are declared in MainWindow.xmal

Now, I want to change the order of columns so that the default column shows at the end of the DataGrid as below :

Name Age Class School Delete

Upvotes: 0

Views: 1711

Answers (1)

123 456 789 0
123 456 789 0

Reputation: 10865

First of all, this is not how you create reusable controls. You should define a class that just inherits to the DataGrid and use Styles against your custom controls.

The way you structured your Reusable control will always insert the First Column as the delete.

In order to fix what you have what I did is defined my Delete column as a resource.

<DataGrid x:Class="WindowsApplication1.Blah"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="300" Width="300">
    <DataGrid.Resources>
        <DataGridTemplateColumn Header="Delete" x:Key="DeleteColumn">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content="X" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" />
        <DataGridTextColumn Header="Age" />
        <DataGridTextColumn Header="Class" />
        <DataGridTextColumn Header="School" />
    </DataGrid.Columns>
</DataGrid>

Then on my .cs file I made it look like this

public partial class Blah : DataGrid
{
    public Blah()
    {
        InitializeComponent();
        this.Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        var templateColumn = this.Resources["DeleteColumn"] as DataGridTemplateColumn;
        this.Columns.Add(templateColumn);
    }
}

Now that'll always add the Delete column at the end.

Upvotes: 1

Related Questions