xamarin-forms-docs/knowledge-base/datagrid-add-button-inside-column.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
How to add button inside a DataGrid column	add button inside datagrid column	how-to		datagrid-add-button-inside-column		datagrid, button, column, templatecolumn, xamarin, xamarin.forms	1424776	kb

Environment

Product Version	2019.3.1023.1
Product	DataGrid for Xamarin.Forms

Description

This help article will show you how to add button inside DataGrid Column.

important TemplateColumn could be used if you want to add content in the DataGrid column different from the predefined column. For example if you have a requirement to add images, image button, etc.

Solution

This scenario can be achieved through a TemplateColumn. More details about DataGrid TemplateColumn can be found [here]({%slug datagrid-columns-template-column%}).

Lets create a sample business model:

public class Employee 
{
	public string Name { get; set; }
	public int Age { get; set; }
	public int EmployeeNumber { get; set; }
}

and a sample ViewModel:

public class ViewModel
{
    public ObservableCollection<Employee> Items { get; set; }
    public ICommand DeleteItemCommand { get; set; }

    public ViewModel()
    {
        var data = new ObservableCollection<Employee>();

        data.Add(new Employee { Name = "John", Age = 26, EmployeeNumber = 3121243});
        data.Add(new Employee { Name = "Jane", Age = 33, EmployeeNumber = 2114535 });
        data.Add(new Employee { Name = "Adam", Age = 43, EmployeeNumber = 4235345 });
        data.Add(new Employee { Name = "Ellan", Age = 37, EmployeeNumber = 1231233 });
        data.Add(new Employee { Name = "Jake", Age = 44, EmployeeNumber = 2342342 });
        data.Add(new Employee { Name = "Marry", Age = 34, EmployeeNumber = 9282212 });
        data.Add(new Employee { Name = "Peter", Age = 29, EmployeeNumber = 23432142 });

        this.Items = data;

        this.DeleteItemCommand = new Command(this.DeleteItemCommandExecuted);
    }

    public void DeleteItemCommandExecuted(object obj)
    {
        this.Items.Remove(obj as Employee);
    }
}

Then we need to define theRadDataGrid and add a button inside the TemplateColumn:

<ContentPage.Resources>
    <ResourceDictionary>
        <local:ViewModel x:Key="ViewModel" />
    </ResourceDictionary>
</ContentPage.Resources>
<Grid BindingContext="{StaticResource ViewModel}">
    <telerikDataGrid:RadDataGrid x:Name="DataGrid" 
                                    ItemsSource="{Binding Items}" 
                                    AutoGenerateColumns="False" 
                                    UserEditMode="Cell">
        <telerikDataGrid:RadDataGrid.Columns>
            <telerikDataGrid:DataGridTextColumn PropertyName="Name" />
            <telerikDataGrid:DataGridNumericalColumn PropertyName="Age"/>
            <telerikDataGrid:DataGridNumericalColumn PropertyName="EmployeeNumber"/>
            <telerikDataGrid:DataGridTemplateColumn HeaderText="Delete operation" 
													SizeMode="Fixed">
                <telerikDataGrid:DataGridTemplateColumn.CellContentTemplate>
                    <DataTemplate>
                        <Button Text="x" TextColor="Red" 
                                Command="{Binding DeleteItemCommand, Source={StaticResource ViewModel}}" 
                                CommandParameter="{Binding .}" />
                    </DataTemplate>
                </telerikDataGrid:DataGridTemplateColumn.CellContentTemplate>
            </telerikDataGrid:DataGridTemplateColumn>
        </telerikDataGrid:RadDataGrid.Columns>
    </telerikDataGrid:RadDataGrid>
</Grid>

Here is the final result: