Question

At this page, they’re showing this datagrid:

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/alleditablecolumns/defaultcs.aspx

I’d like add registries something like that:

Is it much difficult to show this UserControl when someone wants to add a new registry? How can I start?

Answer 1

You’re going to need to style the DataGrid control as a quick Google doesn’t reveal a method to just style the “New Item Placeholder”

For help on this, you should check out this tutorial (there are four articles in total, and are all very informative)

In the little demo app I wrote as a test-bed for this question, I created a new UserControl which inherited from the DataGrid class so that I could extend some of the functionality.

On this class I added two new properties NewItemTemplate and IsAddingNewItem – IsAddingNewItem is true when you have selected that you want to add a new item, and the NewItemTemplate is visible only when that property is true.

A very simple Style outline for this is below: (note: To save space, this is only an outline; This code will not actually compile)

        <Style TargetType="{x:Type controls:DataGrid}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:DataGrid}">
                        <Border>
                            <ScrollViewer Name="DG_ScrollViewer">
                                <ScrollViewer.Template>
                                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>

                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>

                                            <!--Left Column Header Corner -->
                                            <Button Command="{x:Static controls:DataGrid.SelectAllCommand}" />

                                            <!--Column Headers-->
                                            <Primitives:DataGridColumnHeadersPresenter Grid.Column="1" Name="PART_ColumnHeadersPresenter" />

                                            <!--New Item Placeholder-->
                                            <ContentPresenter Grid.Column="1" Grid.Row="1" Content="{Binding Path=NewItemInstance, RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}}" ContentTemplate="{Binding Path=NewItemTemplate, RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}}" Visibility="{Binding Path=IsAddingItem, Converter={StaticResource booleanToVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}}" />

                                            <!--DataGrid content-->
                                            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Grid.Row="2" Grid.ColumnSpan="2" CanContentScroll="{TemplateBinding CanContentScroll}" />

                                            <ScrollBar Grid.Row="0" Grid.RowSpan="4" Grid.Column="2" Name="PART_VerticalScrollBar" Orientation="Vertical" />

                                            <ToggleButton IsChecked="{Binding Path=IsAddingItem, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}}" Content="Add Item" Grid.Row="3" />

                                            <Grid Grid.Row="4" Grid.Column="1">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}, Path=NonFrozenColumnsViewportHorizontalOffset}"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>

                                                <ScrollBar Grid.Column="1" Name="PART_HorizontalScrollBar" />
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                </ScrollViewer.Template>

                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

The two parts on this example you should focus on are the ContentPresenter under “<!--New Item Placeholder-->” comment and the Toggle button a few lines below it.

This styles the DataGrid so that it is displayed in 4 rows, “Column Headers”, “New Item Placeholder”, “DataGrid Rows”, and the “Add new item button” – All surrounded by scroll bars.

Then, in using this control (you will need to use the custom control like <controls:DataGrid ... /> and set the NewItemTemplate property like that in your example (you should also be able to reuse that template in the RowDetails template for the editing of the individual items to ensure the same look and feel throughout).

Hope this helps.