Add button on a merged cell

[Jeremy]

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 ?

 

 

 

 

 

 

 

 

 

 

[Dilyan Traykov]

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

[Simone]

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!

[Simone]

I'm using RadTreeListView

[Dilyan Traykov]

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