Adding an apply button to the end of the "add new item" button

[J]

I want to add an apply button to the end of the "add new item" button when the NewRowPosition is set to e.g. Top.

After investigating which controls are involved, I tried to override the default style of DataCellsPresenter but the ItemsPresenter there seems to give me headache. Haven't used ItemsPresenter before so maybe the behavior is normal or it's modified elsewhere in your code.

Here's my modified style:

   <Style x:Key="customDataCellsPresenter" TargetType="{x:Type telerik:DataCellsPresenter}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:DataCellsPresenter}">
                    <Grid>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <ItemsPresenter Grid.Column="0"/>
                            <Button Grid.Column="1">Click Me!</Button>
                        </Grid>
                        <telerik:FrozenColumnsSplitter x:Name="PART_FrozenColumnsSplitter" telerik:DragDropManager.AllowDrag="True" telerik:DragDropManager.AllowCapturedDrag="True" Cursor="SizeWE" telerik:TouchManager.DragStartTrigger="TapHoldAndMove" HorizontalAlignment="Left" IsTabStop="False" Stylus.IsFlicksEnabled="False" Stylus.IsPressAndHoldEnabled="False">
                            <telerik:StyleManager.Theme>
                                <telerik:Windows8TouchTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:FrozenColumnsSplitter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:GridViewCellsPanel IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
    </Style>

 

The ItemsPresenter seem to span over the button. I.e., the button is not visible. If I excplicitely change column's width from * to 128, the button is shown and the ItemsControl is smaller, but it is clipped after 128 pixels.

Is there another way to add a button to the end of the new item button? I want the user to be able to use the grid with only touch screen (i.e. no physical keyboard available). A cancel button would be needed also.

The optimal solution would be if the user taps elsewhere on the screen (not just the RadGridView control) but there's only one button on the screen ("Back") so that won't do. I.e., no other controls to transfer the focus to. Propably needs some sort of "global" click/tap listener and hit test class...

[Vladimir Stoyanov]

Hello,

To place the button on top of the "Add new item" row you can define it at the end of the SelectiveScrollingGrid of the GridViewNewRow template like so: 

<telerik:RadButton Content="Click" HorizontalAlignment="Right" Grid.Column="3" />

I am attaching a project which demonstrates this for your reference. If this is not what you were going for, may I kindly ask you to provide some additional information about your scenario and provide a small sample project if possible.

You can also check out the Templates Structure article for more information about the structure of the RadGridView as well as the Editing Control Templates article for information on how to modify the default templates of the controls.

I hope this helps. Don't hesitate to contact us again if you have any other questions.

Regards,
Vladimir Stoyanov
Progress Telerik

[J]

Using your project, comment out the two last GridViewDataColumns. I.e., only one column (Name) stays.

Then set the Name column's Width to "*".

Comment out the the RadButton you added at the end of the SelectiveScrollingGrid.

Now run the application and as you can see, the button is pushed outside the view. Column's Width property is probably bound to the ItemsPresenter (in customDataCellsPresenter style) width (or something like that).

Is it possible to use the whole available width for both the ItemsPresenter and the Button(s)?

I want the buttons (Apply and Cancel) to be visible only when you have clicked the "add new item" button. Or at least make them disabled if we use the button(s) added at the end of the SelectiveScrollingGrid.

I also tried to replace your RadButton code with this:

<StackPanel HorizontalAlignment="Right" Grid.Column="3" Orientation="Horizontal" Visibility="{Binding ElementName=PART_DataCellsPresenter, Path=Visibility}">
    <telerik:RadButton Content="Apply" />
    <telerik:RadButton Content="Cancel" />
</StackPanel>

 

... and used the original DataCellsPresenter instead of the one with the custom style, but the text box is still rendered under the buttons. I.e., when you type enough text, the text goes under the buttons.

In short: I need two buttons at the end of the text box, after the "add new item" button has been clicked, and only one column which uses all the available space for its width.

 

[Vladimir Stoyanov]

Hi,

Thank you for the detailed explanation. In order to have the whole available width of the new row for both the ItemsPresenter and the Buttons, you can change the DataCellsPresenter ControlTemplate like so:

<ControlTemplate TargetType="{x:Type telerik:DataCellsPresenter}">
                        <Grid>
                            <ItemsPresenter />
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                                <Button>Click Me!</Button>
                                <Button>Click Me2!</Button>
                            </StackPanel>
                            <telerik:FrozenColumnsSplitter x:Name="PART_FrozenColumnsSplitter" telerik:DragDropManager.AllowDrag="True" telerik:DragDropManager.AllowCapturedDrag="True" Cursor="SizeWE" telerik:TouchManager.DragStartTrigger="TapHoldAndMove" HorizontalAlignment="Left" IsTabStop="False" Stylus.IsFlicksEnabled="False" Stylus.IsPressAndHoldEnabled="False">
                                <telerik:StyleManager.Theme>
                                    <telerik:Windows8TouchTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:FrozenColumnsSplitter>
                        </Grid>
</ControlTemplate>

Please let me know if this works for you.

Regards,
Vladimir Stoyanov
Progress Telerik

[J]

The buttons were still rendered above the text box when the column width was long enough, so I had to discard this approach.

However, the idea used in this post works here too (Dilyan's answer). I created a new Grid-based class that contains the TextBox object returned by base.CreateCellEditElement and two additional buttons to apply and cancel the edit.

[Vladimir Stoyanov]

Hello,

Glad to hear you found a solution. Thank you for sharing it with the community.

Regards,
Vladimir Stoyanov
Progress Telerik