How to display the row number of RadGridView in WPF form?

13 posts, 0 answers
  1. Gaoming
    Gaoming avatar
    13 posts
    Member since:
    Mar 2017

    Posted 06 Mar Link to this post

    Hi,

    I want to display the row number as Excel.

    Adding a number column is not a solution because this will cause many

    other problems. Thanks.

     

  2. Stefan X1
    Admin
    Stefan X1 avatar
    751 posts

    Posted 09 Mar Link to this post

    Hi Gaoming Fu,

    Actually, the recommended approach for applying such customization is through the usage of a custom column. This is demonstrated in the Row Number WPF Demo. May I kindly ask you to share some details on the obstacle to using such column?

    Regards,
    Stefan X1
    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Gaoming
    Gaoming avatar
    13 posts
    Member since:
    Mar 2017

    Posted 09 Mar in reply to Stefan X1 Link to this post

    Thank you very much for the reply.

    Our UI is quite complex, it is not only used for displaying data. Users can do many things and they want to have the same user

    experience as Excel because they used Excel a lot.

    If we use a custom column to display row index, my understanding is we need to hide row indicator. A few things I can see are:

    1. This custom column is an extra column, it is not good if users want to copy and paste data

    2. The row selection/highlighting will not work

    3. If I set NewRowPosition="Bottom", then adding new row will not work.

    4. Users can tab into this row.

    Thanks.

     

     

     

  4. Stefan X1
    Admin
    Stefan X1 avatar
    751 posts

    Posted 14 Mar Link to this post

    Hello Gaoming Fu,

    I will go straight to the points listed in your reply.

    1.  The implementation of the custom column in the referred demo does not apply any binding to the element in the cell i.e., the TextBlock. Its Text property is being directly set.  Generally speaking, with such an approach the column would not participate in the data operations of the control, as it does not correspond to an underlying property. This includes the Clipboard operations as well. In other words said, the control will not take part in the copy/paste mechanisms. May I kindly ask you to clarify what is the behavior that you are expecting?

    2.  The selection/mouseover effects in the RowNumber demo just seem not to be working. Intentionally, a Style for the cell that sets its Background and Foreground is defined. If you remove it, the column will behave as per your requirements.

    3.   Indeed, the initial implementation of the example is not intended to be used in conjunction with the NewRowPosition mechanism. For your convenience, I prepared a modified version of the demo with a possible solution. Basically, it consists of utilizing the AddingNewDataItem event of the control and adding an additional boolean property in the view model. When the user clicks to add a new item, the aforementioned event is triggered and in the event handler the boolean property is set to true. Then, depending on the property value, the Text of the TextBlock element within the cell of the custom column is set. Also, the boolean property in the view model is set back to false. Can you please check out the implementation?

    4.   There is a built-in mechanism provided by GridViewDataColumn. You can utilize its TabStopMode property and set it to Skip, for example.

    I hope I've managed to clarify your concerns.

    Best Regards,
    Stefan X1
    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. Gaoming
    Gaoming avatar
    13 posts
    Member since:
    Mar 2017

    Posted 14 Mar in reply to Stefan X1 Link to this post

    Thank you very much for the project.
  6. Gaoming
    Gaoming avatar
    13 posts
    Member since:
    Mar 2017

    Posted 14 Mar in reply to Stefan X1 Link to this post

    I found this project from this link: http://www.telerik.com/forums/replacing-the-content-of-the-row-indicator, provided by Ivan Ivanov
    form Telerik team on  08 Aug 2011.

    This project provides a way to display the row number on row indicator. Part of the changes likes below.

    It specifies 4 columns (3 columns for actual data), one TextBlock is used to display the row number, RowConverter is used to get

    row number from the data. Right now I cannot use the project directly because:

    1. Some times my data is dynamically generated at run time, I do not know how many columns and their data type I will have,

    so I cannot specify the number of columns.

    2. In my form, users can add/delete rows, after adding/deleing rows, how to trigger the RowConverter again to generate the row number again.

    All I need is to display the row number on row indicator, then after adding/deleting rows manually, regenerate the row number again so the row number is displayed correctly.

    Is this possible? Thanks for any help.

     

     

     

    <ControlTemplate x:Key="GridViewRowTemplate" TargetType="telerik:GridViewRow">
    <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
    <telerik:SelectiveScrollingGrid x:Name="grid">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border x:Name="Background_Selected"
    telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True"
    Margin="1,1,1,2" BorderThickness="1" CornerRadius="1"
    BorderBrush="{StaticResource ItemOuterBorder_Selected}"
    Grid.Column="2" Grid.ColumnSpan="2" Visibility="Collapsed">
    <Border BorderThickness="1"
    BorderBrush="{StaticResource ItemInnerBorder_Selected}"
    Background="{StaticResource ItemBackground_Selected}" />
    </Border>
    <Border x:Name="PART_IndicatorPresenter"
    Width="25"
    VerticalAlignment="Stretch"
    Grid.Column="0"
    Visibility="{TemplateBinding RowIndicatorVisibility}"
    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
    Grid.RowSpan="3"
    BorderBrush="{StaticResource ControlOuterBorder}"
    BorderThickness="0,0,1,1">
    <Border x:Name="NavigatorIndicatorBackground"
    Background="{StaticResource GridView_RowIndicatorCellBackground}"
    BorderBrush="{StaticResource ControlInnerBorder}"
    BorderThickness="1">
    <Grid>
    <!-- if Visibility="Collapsed", then row index only show when the row is selected -->
    <Grid x:Name="NavigatorIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="11" Height="11" Visibility="Visible" >
    <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource cnv}}" FontSize="10" />
    </Grid>
    <!--<Grid x:Name="EditIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Height="10" Visibility="Collapsed" >
    <Path Fill="{StaticResource GridView_EditIndicatorBackground1}" Stretch="Fill" Data="M14,9 L15,9 15,10 14,10 z M1,9 L2,9 2,10 1,10 z M15,8 L16,8 16,9 15,9 z M0,8 L1,8 1,9 0,9 z M15,1 L16,1 16,2 15,2 z M0,1 L1,1 1,2 0,2 z M14,0 L15,0 15,1 14,1 z M1,0 L2,0 2,1 1,1 z"/>
    <Path Fill="{StaticResource GridView_EditIndicatorBackground2}" Stretch="Fill" Margin="1" Data="M0.99999994,6.9999995 L2,6.9999995 3,6.9999995 4,6.9999995 5,6.9999995 6,6.9999995 7,6.9999995 8,6.9999995 9,6.9999995 10,6.9999995 11,6.9999995 12,6.9999995 13,6.9999995 13,7.9999995 12,7.9999995 11,7.9999995 10,7.9999995 9,7.9999995 8,7.9999995 7,7.9999995 6,7.9999995 5,7.9999995 4,7.9999995 3,7.9999995&#xd;&#xa;2,7.9999995 0.99999994,7.9999995 z M13,0.99999994 L14,0.99999994 14,1.9999999 14,2.9999995 14,3.9999995 14,4.9999995 14,5.9999995 14,6.9999995 13,6.9999995 13,5.9999995 13,4.9999995 13,3.9999995 13,2.9999995 13,1.9999999 z M0,0.99999994 L0.99999994,0.99999994 0.99999994,1.9999999 0.99999994,2.9999995 0.99999994,3.9999995 0.99999994,4.9999995 0.99999994,5.9999995 0.99999994,6.9999995 0,6.9999995 0,5.9999995 0,4.9999995 0,3.9999995 0,2.9999995 0,1.9999999 z M11,0 L12,0 13,0 13,0.99999994 12,0.99999994 11,0.99999994 10,0.99999994 9,0.99999994 8,0.99999994 7,0.99999994 6,0.99999994 5,0.99999994 4,0.99999994 3,0.99999994 2,0.99999994 0.99999994,0.99999994 0.99999994,2.3841858E-07 2,2.3841858E-07 3,2.3841858E-07 4,2.3841858E-07 5,2.3841858E-07 6,2.3841858E-07 7,2.3841858E-07 8,2.3841858E-07&#xd;&#xa;9,2.3841858E-07 10,2.3841858E-07 z"/>
    <Path Fill="{StaticResource GridView_EditIndicatorBackground3}" Stretch="Fill" Data="M2,9 L3,9 4,9 5,9 6,9 7,9 8,9 9,9 10,9 11,9 12,9 13,9 14,9 14,10 13,10 12,10 11,10 10,10 9,10 8,10 7,10 6,10 5,10 4,10&#xd;&#xa;3,10 2,10 z M14,8 L15,8 15,9 14,9 z M1,8 L2,8 2,9 1,9 z M15,2 L16,2 16,3 16,4 16,5 16,6 16,7 16,8 15,8 15,7 15,6 15,5 15,4 15,3 z M3,2 L4,2 5,2 6,2 6,3 5,3 5,4 5,5 5,6 5,7 6,7 6,8 5,8 4,8 3,8 3,7 4,7 4,6 4,5 4,4 4,3 3,3 z M0,2 L1,2 1,3 1,4 1,5 1,6 1,7 1,8 0,8 0,7 0,6 0,5 0,4 0,3 z M14,1 L15,1 15,2 14,2 z M1,1 L2,1 2,2 1,2 z M2,0 L3,0 4,0 5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 13,0 14,0 14,1 13,1 12,1 11,1 10,1 9,1 8,1 7,1 6,1 5,1 4,1&#xd;&#xa;3,1 2,1 z"/>
    <Path Fill="{StaticResource GridView_EditIndicatorBackground4}" Stretch="Fill" Margin="2" Data="M4,0 L5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 12,1 12,2 12,3 12,4 12,5.0000001 12,6 11,6 10,6 9,6 8,6 7,6 6,6 5,6 4,6 4,5.0000001&#xd;&#xa;3,5.0000001 3,4 3,3 3,2 3,1 4,1 z M0,0 L1,0 1,1 2,1 2,2 2,3 2,4 2,5.0000001 1,5.0000001 1,6 0,6 0,5.0000001 0,4 0,3 0,2 0,1 z"/>
    </Grid>
    <Grid x:Name="ErrorIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Height="16" Visibility="Collapsed">
    <Path Fill="{StaticResource GridView_ErrorIndicatorBackground1}" Stretch="Fill" Margin="1" Data="M3,12.999999 L4,12.999999 5,12.999999 6,12.999999 7,12.999999 8,12.999999 9,12.999999 10,12.999999 11,12.999999 11,13.999999 10,13.999999 9,13.999999 8,13.999999 7,13.999999 6,13.999999 5,13.999999 4,13.999999 3,13.999999 z M11,11.999999 L12,11.999999 12,12.999999 11,12.999999 z M2.0000001,11.999999 L3,11.999999 3,12.999999 2.0000001,12.999999 z M12,10.999999 L13,10.999999 13,11.999999 12,11.999999 z M1,10.999999 L2.0000001,10.999999 2.0000001,11.999999 1,11.999999 z M13,2.9999992 L14,2.9999992 14,3.9999992 14,4.9999992 14,5.9999992 14,6.9999992 14,7.9999992 14,8.9999992 14,9.9999992 14,10.999999 13,10.999999 13,9.9999992 13,8.9999992 13,7.9999992 13,6.9999992 13,5.9999992 13,4.9999992 13,3.9999992 z M0,2.9999992 L1,2.9999992 1,3.9999992 1,4.9999992 1,5.9999992 1,6.9999992 1,7.9999992 1,8.9999992 1,9.9999992 1,10.999999 0,10.999999 0,9.9999992 0,8.9999992 0,7.9999992 0,6.9999992 0,5.9999992 0,4.9999992 0,3.9999992 z M12,1.9999999 L13,1.9999999 13,2.9999992 12,2.9999992 z M1,1.9999999 L2.0000001,1.9999999 2.0000001,2.9999992 1,2.9999992 z M11,0.99999994 L12,0.99999994 12,1.9999999 11,1.9999999 z M2.0000001,0.99999994 L2.9999998,0.99999994 2.9999998,1.9999999 2.0000001,1.9999999 z M2.9999998,0 L3.9999998,0 5,0 6,0 7,0 8,0 9,0 10,0 11,0 11,0.99999994 10,0.99999994 9,0.99999994 8,0.99999994 7,0.99999994 6,0.99999994 5,0.99999994 3.9999998,0.99999994 2.9999998,0.99999994 z" />
    <Path Fill="{StaticResource GridView_ErrorIndicatorBackground2}" Stretch="Fill" Margin="7,3" Data="M1.4901161E-07,8 L1.0000001,8 2.0000002,8 2.0000002,9 2.0000002,10 1.0000003,10 1.0000003,9 1.0000001,10 1.4901161E-07,10 1.4901161E-07,9 z M1.4901161E-07,0 L1.0000001,0 2.0000002,0 2.0000002,1 2.0000002,2 2.0000002,3 2.0000002,4.0000001 2.0000002,5 2.0000002,5.9999999 2.0000002,7 1.0000001,7 1.4901161E-07,7 1.4901161E-07,5.9999999 1.4901161E-07,5 1.4901161E-07,4.0000001 1.4901161E-07,3 1.4901161E-07,2 0,1 z"/>
    <Path Fill="{StaticResource GridView_ErrorIndicatorBackground3}" Stretch="Fill" Data="M4,15 L5,15 6,15 7,15 8,15 9,15 10,15 11,15 12,15 12,16 11,16 10,16 9,16 8,16 7,16 6,16 5,16 4,16 z M12,14 L13,14 13,15 12,15 z M3,14 L4,14 4,15 3,15 z M13,13 L14,13 14,14 13,14 z M2,13 L3,13 3,14 2,14 z M14,12 L15,12 15,13 14,13 z M1,12 L2,12 2,13 1,13 z M7,11 L7,12 7,13 8,13 9,13 9,12 9,11 8,11 z M15,4 L16,4 16,5 16,6 16,7 16,8 16,9 16,10 16,11 16,12 15,12 15,11 15,10 15,9 15,8 15,7 15,6 15,5 z M0,4 L1,4 1,5 1,6 1,7 1,8 1,9 1,10 1,11 1,12 0,12 0,11 0,10 0,9 0,8 0,7 0,6 0,5 z M14,3 L15,3 15,4 14,4 z M7,3 L7,4 7,5 7,6 7,7 7,8 7,9 7,10 8,10 9,10 9,9 9,8 9,7 9,6 9,5 9,4 9,3 8,3 z M1,3 L2,3 2,4 1,4 z M13,2 L14,2 14,3 13,3 z M4,2 L5,2 6,2 7,2 8,2 9,2 10,2 11,2 12,2 12,3 13,3 13,4 14,4 14,5 14,6 14,7 14,8 14,9 14,10 14,11 14,12 13,12 13,13 12,13&#xd;&#xa;12,14 11,14 10,14 9,14 8,14 7,14 6,14 5,14 4,14 4,13 3,13 3,12 2,12 2,11 2,10 2,9 2,8 2,7 2,6 2,5 2,4 3,4 3,3&#xd;&#xa;4,3 z M2,2 L3,2 3,3 2,3 z M12,1 L13,1 13,2 12,2 z M3,1 L4,1 4,2 3,2 z M4,0 L5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 12,1 11,1 10,1 9,1 8,1 7,1 6,1 5,1 4,1 z" />
    </Grid>-->
    </Grid>
    </Border>
    </Border>
    </telerik:SelectiveScrollingGrid>
    </Border>
    <ControlTemplate.Triggers>
    <MultiTrigger>
    <MultiTrigger.Conditions>
    <Condition Property="IsSelected" Value="True"/>
    <Condition Property="DisplayVisualCues" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter TargetName="Background_Selected" Property="Visibility" Value="Visible" />
    <Setter TargetName="NavigatorIndicatorBackground" Property="Background" Value="{StaticResource GridView_RowIndicatorCellBackground_Selected}" />
    </MultiTrigger>
    <!--<MultiTrigger>
    <MultiTrigger.Conditions>
    <Condition Property="DisplayVisualCues" Value="True"/>
    <Condition Property="IsMouseOver" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter TargetName="Background_Over" Property="Visibility" Value="Visible" />
    </MultiTrigger>-->
    <!--<Trigger Property="IsValid" Value="False">
    <Setter TargetName="ErrorIndicator" Property="Visibility" Value="Visible" />
    <Setter TargetName="EditIndicator" Property="Visibility" Value="Collapsed" />
    <Setter TargetName="NavigatorIndicator" Property="Visibility" Value="Collapsed" />
    </Trigger>-->
    <!--<MultiTrigger>
    <MultiTrigger.Conditions>
    <Condition Property="IsValid" Value="False"/>
    <Condition Property="DisplayVisualCues" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter TargetName="Background_Invalid" Property="Visibility" Value="Visible" />
    </MultiTrigger>
    <Trigger Property="IsCurrent" Value="True">
    <Setter TargetName="NavigatorIndicator" Property="Visibility" Value="Visible" />
    </Trigger>-->
    <!--<Trigger Property="IsInEditMode" Value="True">
    <Setter TargetName="EditIndicator" Property="Visibility" Value="Visible" />
    </Trigger>-->
    </ControlTemplate.Triggers>
    </ControlTemplate>

     

     

  7. Stefan X1
    Admin
    Stefan X1 avatar
    751 posts

    Posted 17 Mar Link to this post

    Hello Gaoming Fu,

    The referred forum thread is a bit outdated and the approach demonstrated in it is not applicable when the virtualization of the control is enabled. May I ask you to clarify what is the obstacle to use the approach demonstrated in the sample application I prepared?

    Regards,
    Stefan X1
    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
  8. Gaoming
    Gaoming avatar
    13 posts
    Member since:
    Mar 2017

    Posted 23 Mar in reply to Stefan X1 Link to this post

    Thanks for the sample application. We will use a custom column to display the row index as you suggested.

    Now our users found another issue. When I set NewRowPosition="Bottom", When users click "Click here to add new item" to add

    a new row, the new row is in Edit mode, users can start to add data, but it is not possible to copy data from outside and paste the data into to the new row. Is there any solution for this?

    If the cell or a new row is in Edit mode, why not allow to paste data?

     

    Thanks.

     

     

  9. Stefan X1
    Admin
    Stefan X1 avatar
    751 posts

    Posted 28 Mar Link to this post

    Hi Gaoming Fu,

    I may be missing something here, as pasting in a cell that is in edit mode can be done out-of-the-box. Please, find attached a short video I prepared that demonstrates this. What approach are you using that disables this default behavior?

    Best Regards,
    Stefan X1
    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
  10. Gaoming
    Gaoming avatar
    13 posts
    Member since:
    Mar 2017

    Posted 03 Apr in reply to Stefan X1 Link to this post

    Thanks for the video.

    We want to paste row(s) into the new row after users click "Click here to add new item" to add
    a new row, not just paste into one cell of the new row.

    I found a solution from here http://www.telerik.com/forums/paste-from-excel-in-to-add-new-row, posted on 19 Feb 2016 by Dess. Can you please create a WPF solution for this approach and paste it here. Thanks.

     

     

     

     

  11. Stefan X1
    Admin
    Stefan X1 avatar
    751 posts

    Posted 06 Apr Link to this post

    Hi Gaoming Fu,

    Generally speaking, pasting a whole row while a particular cell of RadGridView is in edit mode would not be possible. You need to ensure that before pasting the data, RadGridView is in view mode. This can be achieved by calling the CommitEdit method of the control. I am afraid, that I cannot suggest a particular state at which the method to be called, as this depends on the specific project requirements.

    Hopefully, this helps.

    Best Regards,
    Stefan X1
    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
  12. Gaoming
    Gaoming avatar
    13 posts
    Member since:
    Mar 2017

    Posted 07 Apr in reply to Stefan X1 Link to this post

    I tried your project but I cannot make item 1 work.

    Please see the attached images.

    In image 1, I copied there rows

    In image 2, I selected cell with value "4", and paste the data

    Image 3 is the result after the data is pasted. The data in Name column is lost.

    Please have a look at this issue. I am not allowed to install your demo project. Thanks.

  13. Stefan X1
    Admin
    Stefan X1 avatar
    751 posts

    Posted 12 Apr Link to this post

    Hi Gaoming Fu,

    Thanks for the images provided.

    I checked the logic regarding the copy/paste mechanism of the control. It relies on accessing the relevant item properties, so that the pasting can be performed for a whole item(row). It seems that having a custom column that is not bound interferes with this logic. Thus, the pasting cannot be performed as expected in your case. What you can do is to perform the copy/paste operations manually. This could be achieved by utilizing the Clipboard events of RadGridView and performing the needed operations through them and then cancelling the given event. Please, check out the Copying and Pasting topics for more information on this matter.

    Best Regards,
    Stefan X1
    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top