This is a migrated thread and some comments may be shown as answers.

Add button on a merged cell

4 Answers 106 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Jeremy
Top achievements
Rank 1
Jeremy asked on 26 Apr 2017, 12:50 PM

Hi all,

I have a problem using MergedCells in RadGridView.

Let's take an example.

Let's say we have this class :

 

public class TestItem
{
    private int _id;
    private int _modifierId;
    private int _deleteId;

    public int Id
    {
       get { return _id; }
       set { _id = value; RaisePropertyChanged("Id"); }
    }

    public int ModifierId
    {
      get { return _modifierId; }
      set { _modifierId = value; RaisePropertyChanged("ModifierId"); }
    }

    public int DeleteId
    {
      get { return _deleteId; }
      set { _deleteId = value; RaisePropertyChanged("DeleteId"); }
    }
}

 

And this class to create a collection of TestItems

public class TestCollection
    : ObservableCollection<TestItem>
{
    public TestCollection(IEnumerable<TestItem> items)
        : base(items)
    {
    }
}

 

With this simple XAML :

<telerik:RadGridView ItemsSource="{Binding Collection}"
              MergedCellDirection="Vertical"
              GroupRenderMode="Flat">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding ModifierId}"
                           DataFormatString="{}{0:N0}"
                           IsCellMergingEnabled="True" />
 
          <telerik:GridViewDataColumn DataMemberBinding="{Binding Id}"
                          DataFormatString="{}{0:N0}"
                          IsCellMergingEnabled="True" />
 
            <telerik:GridViewDataColumn DataMemberBinding="{Binding DeleteId}"
                          DataFormatString="{}{0:N0}"
                          IsCellMergingEnabled="True" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

 

How can we create, for ModifierId and for DeleteId, a merged cell with button ?

And when we click on a button we make an action ?

 

 

 

 

 

 

 

 

 

 

4 Answers, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 28 Apr 2017, 02:33 PM
Hello Jeremy,

What you can do in this scenario is to use RadGridView's MergedCellsStyle and MergedCellsStyleSelector properties and specify the ContentTemplate of the cells:

<Style x:Key="MergedCellsStyle" TargetType="telerik:GridViewMergedCell" BasedOn="{StaticResource GridViewMergedCellStyle}">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding}" />
                    <telerik:RadButton Content="Click" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Do let me know if this would work for you.

Regards,
Dilyan Traykov
Telerik by Progress
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
0
Simone
Top achievements
Rank 1
answered on 14 Jan 2020, 09:03 AM

Hi Dilyan,

I'm tried to use MergedCellsStyleSelector and seems that the selector is never called. I would use two different merged style for two columns. How could I do?

Thanks!

0
Simone
Top achievements
Rank 1
answered on 14 Jan 2020, 09:04 AM
I'm using RadTreeListView
0
Dilyan Traykov
Telerik team
answered on 15 Jan 2020, 12:09 PM

Hi Simone,

Thank you for the clarification.

Indeed, the MergedCellsStyle and MergedCellsStyleSelector were not respected when used in a RadTreeListView control.

We have already introduced a fix for this issue that will be available with our official release which will be introduced later today. Please have in mind that the style for the merged cells may interfere with the expand button which is displayed when TreeListViewTableDefinitions are defined so you may wish to create an extra column to hold this button.

            <telerik:RadTreeListView.Columns>
                <telerik:GridViewColumn Width="25" />
                <!-- other columns -->
            </telerik:RadTreeListView.Columns>
Please let us know once you manage to test the new release out.

Regards,
Dilyan Traykov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
GridView
Asked by
Jeremy
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Simone
Top achievements
Rank 1
Share this question
or