Column Header With Button taking up full cell

[Declan Hillier]

I've got a data grid column and the first column contains a delete button implemented as a Template Column:-

                                    <sf:GridTemplateColumn sf:FocusManagerHelper.WantsKeyInput="True" AllowSorting="False">

                                        <sf:GridTemplateColumn.CellTemplate>

                                            <DataTemplate>

                                                <Button Content="x"

                                                sf:FocusManagerHelper.FocusedElement="True"

                                                sf:VisualContainer.WantsMouseInput="True"

                                                ClickMode="Press"

                                                Click="DeleteEventGroupSet"

                                                Width="Auto"

                                                MinWidth="20"

                                                ToolTip="Delete Event Group Set"

                                            Tag="{Binding}" />

                                            </DataTemplate>

                                        </sf:GridTemplateColumn.CellTemplate>

                                    </sf:GridTemplateColumn>

This works great and shows nicely on screen:-

I want to make the header into a "Delete All" button.  I've therefore added a header template:-

                                    <sf:GridTemplateColumn sf:FocusManagerHelper.WantsKeyInput="True" AllowSorting="False">

                                        <sf:GridTemplateColumn.HeaderTemplate>

                                            <DataTemplate>

                                                <Button Content="x"

                                                sf:FocusManagerHelper.FocusedElement="True"

                                                sf:VisualContainer.WantsMouseInput="True"

                                                ClickMode="Press"

                                                Click="DeleteEventAllGroupSets"

                                                Width="Auto"

                                                MinWidth="20"

                                                ToolTip="Delete All Event Group Sets"/>

                                            </DataTemplate>

                                        </sf:GridTemplateColumn.HeaderTemplate>

                                        <sf:GridTemplateColumn.CellTemplate>

                                            <DataTemplate>

                                                <Button Content="x"

                                                sf:FocusManagerHelper.FocusedElement="True"

                                                sf:VisualContainer.WantsMouseInput="True"

                                                ClickMode="Press"

                                                Click="DeleteEventGroupSet"

                                                Width="Auto"

                                                MinWidth="20"

                                                ToolTip="Delete Event Group Set"

                                            Tag="{Binding}" />

                                            </DataTemplate>

                                        </sf:GridTemplateColumn.CellTemplate>

                                    </sf:GridTemplateColumn>

Functionally this works fine but the appearance on screen has a white border around the button:-

Additionally the button doesn't resize as the column is resized.

What I'd like is for the header button to take up the whole of the header cell and resize with it dynamically.  Exactly the same behaviour as I get from the individual row cells.

[Manikanda Akash Munisamy]

Hi Declan,

We have reviewed your scenario regarding the column header button of GridTemplateColumn, ensuring it considers the entire HeaderCell size, similar to other cells in that column, and dynamically changes while resizing. We have prepared a sample to meet your requirement and attached it for your review. Please take a look and let us know if you have any further concerns.

If we have misunderstood your requirement, kindly provide us with more details about your requirement or the issue you are facing. This additional information will help us better understand the problem and proceed further to provide an appropriate solution.

Please review the attached sample and share any specific details or steps that could help us replicate the issue if it persists on your end. Thank you for your cooperation.

Regards,
Manikanda Akash M

Attachment: SfDataGrid_Net80_2d1a9338.zip

[Declan Hillier]

That worked perfectly.  Thank you.

[Manikanda Akash Munisamy]

Hi Declan,

We are glad that your query was addressed. If you have any other queries, please create a new ticket. We are closing this ticket.

Regards,
Manikanda Akash