Current Row

[Jeff]

I have a few questions regarding the  RadGrid.

I have a combobox as one of my grid columns.  When I click this column I would expect that the current row would change, but it does not.  clicking on a standard text column does cause the row focus to change.  is there a way to get this behavior?

whenever a grid row is modified, the data context for that item needs to be updated. at some point, all changed need to be saved back to the database.  what would be the best way to implement grid updates?  do you have any examples?

thanks,
jeff

[Pavel Pavlov]

Hello Jeff,

I have attached a sample application to demonstrate a scenario with a combobox editor and some custom code to handle editing and DB updates.

On the problem of the selection of the row - I think the example behaves as expected. ( I could not reproduce the reported behavior with the row not being selected).

Please let me know if this solution does not fit your scenario so we can think of some workaround.

There is also an online example ( including .cs and .xaml code) here.

Kind regards,
Pavel Pavlov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff]

Hi Pavel,

With respect to the sample you provided, why is it necessary to define the content presenter and visual state manager f(in the style) for the grid columns?  Toggling between the normal and editing states for the columns should be handled by the grid without having to explicitly define that behavior should it not? 

Mabe the behavior I'm seeing is caused by how I am defiining the style(s) for my columns.  It seems like  the column(s) where I have assigned a style is consuming the click event and not passing it to the grid which would cause the row focus to change.  Please inspect the following:

<telerik:RadPage x:Class="SilverlightClient.ContactListPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:blacklight="clr-namespace:Blacklight.Silverlight.Controls;assembly=Blacklight.Silverlight.Controls"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    xmlns:telerikMedia="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.MediaPlayer"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:xapWorksModel="clr-namespace:SilverlightClient.xapWorksEntities"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:local="clr-namespace:SilverlightClient"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Width="Auto" Height="Auto" mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="800" Margin="0,0,0,0">


    <telerik:RadPage.Resources>

        <!--Create custom style for the IsPerson column-->
        <Style x:Key="isPersonCheckboxColumnStyle" TargetType="telerikGridView:GridViewCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikGridView:GridViewCell">
                        <Border HorizontalAlignment="Stretch">
                            <CheckBox HorizontalAlignment="Center"
                                       Click="CheckBox_Click"
                                      IsChecked="{Binding Path=IsPerson, Mode=TwoWay}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!--Create custom style for the IsAppOwner column-->
        <Style x:Key="isAppOwnerCheckboxColumnStyle" TargetType="telerikGridView:GridViewCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikGridView:GridViewCell">
                        <Border HorizontalAlignment="Stretch">
                            <CheckBox HorizontalAlignment="Center"
                                      Click="CheckBox_Click"
                                      IsChecked="{Binding Path=IsAppOwner, Mode=TwoWay}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!--Create custom style for the GenderTypeID column-->
        <Style x:Key="genderTypeIDComboBoxColumnStyle" TargetType="telerikGridView:GridViewCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikGridView:GridViewCell">
                            <telerikInput:RadComboBox x:Name="theGenderTypeLookup2"
                                                      Loaded="theGenderTypeLookup_Loaded"
                                                      DisplayMemberPath="Description"
                                                      SelectedValuePath="GenderTypeID"
                                                      DropDownClosed="theGenderTypeLookup2_DropDownClosed"
                                                      SelectedValue="{Binding GenderTypeID, Mode=TwoWay}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="cellstyle" TargetType="telerikGridView:GridViewCell">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerikGridView:GridViewCell">
                            <Border ToolTipService.ToolTip="{TemplateBinding Content}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    Background="{TemplateBinding Background}">
                                <Grid>
                                    <ContentPresenter Name="PART_ContentPresenter"
                                        Visibility="Visible"
                                        Margin="{TemplateBinding Padding}"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Stretch"
                                        Content="{TemplateBinding Content}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"/>

                                        <ContentPresenter Name="PART_EditorPresenter"
                                            Visibility="Collapsed"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Stretch"
                                            Content="{x:Null}"/>
                                </Grid>

                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="EditingStates">
                                        <vsm:VisualState x:Name="Edited">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditorPresenter"
                                                           Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter"
                                                           Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Normal">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditorPresenter"
                                                           Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter"
                                                           Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    </telerik:RadPage.Resources>

    <Grid x:Name="LayoutRoot" Background="LightYellow">
        <Grid.RowDefinitions>
            <!-- the contact buttons goes here -->
            <RowDefinition Height="Auto"/>
            <!-- the main content goes here -->
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

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

        <!-- define some buttons for CRUD operations -->
        <StackPanel Orientation="Horizontal" Grid.Row="0" Margin="0,4,0,4">
            <Button x:Name="NewContactButton"  Height="Auto" Width="Auto" Margin="5,0,0,0" >
                <ContentPresenter>
                    <StackPanel Orientation="Vertical">
                        <Image Source="../Images/VistaCommon/new_document_lined_24.png" Height="24"/>
                    </StackPanel>
                </ContentPresenter>
            </Button>

            <Button x:Name="SaveContactButton"  Height="Auto" Width="Auto" Margin="5,0,0,0" >
                <ContentPresenter>
                    <StackPanel Orientation="Vertical">
                        <Image Source="../Images/VistaCommon/save_24.png" Height="24"/>
                    </StackPanel>
                </ContentPresenter>
            </Button>

            <Button x:Name="DeleteContactButton"  Height="Auto" Width="Auto" Margin="5,0,0,0" >
                <ContentPresenter>
                    <StackPanel Orientation="Vertical">
                        <Image Source="../Images/VistaCommon/delete_24.png" Height="24"/>
                    </StackPanel>
                </ContentPresenter>
            </Button>
        </StackPanel>

        <!-- THIS IS THE TELERIK GRID -->
        <telerikGrid:RadGridView x:Name="ContactGrid" Grid.Row="1"
                                 AutoGenerateColumns="False"
                                 SelectionChanged="ContactGrid_SelectionChanged">
            <telerikGrid:RadGridView.Columns>
                <telerikGridView:GridViewDataColumn
                    HeaderText="Contact Name"
                    UniqueName="PartyName"
                    />
                <telerikGridView:GridViewDataColumn
                   HeaderText="GenderID"
                    UniqueName="GenderTypeID"
                    CellStyle="{StaticResource genderTypeIDComboBoxColumnStyle}"/>
                <telerikGridView:GridViewDataColumn
                    HeaderText="Is Person"
                    UniqueName="IsPerson"
                    CellStyle="{StaticResource isPersonCheckboxColumnStyle}"/>
                <telerikGridView:GridViewDataColumn
                    HeaderText="Is App Owner"
                    UniqueName="IsAppOwner"
                    CellStyle="{StaticResource isAppOwnerCheckboxColumnStyle}"/>
                <telerikGridView:GridViewDataColumn
                    HeaderText="PartyID"
                    Width="260"
                    UniqueName="PartyID"/>

                </telerikGrid:RadGridView.Columns>
        </telerikGrid:RadGridView>

    </Grid>
</telerik:RadPage>

Here is the code behind file:

Imports System
Imports System.ComponentModel
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.Linq
Imports System.Net
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes

Imports Blacklight

Imports Telerik.Windows
Imports Telerik.Windows.Controls
Imports Telerik.Windows.Controls.Docking
Imports Telerik.Windows.Controls.GridView
Imports Telerik.Windows.Controls.GridView.Rows
Imports Telerik.Windows.Input
Imports Telerik.Windows.Controls.MediaPlayer
Imports Telerik.Windows.Controls.Navigation


Imports System.Data.Services.Client
Imports SilverlightClient.xapWorksEntities

Partial Public Class ContactListPage
    Inherits Telerik.Windows.Controls.RadPage

#Region "Variable Declarations"

    Dim thePageID As String

    ' create a variable to determine if we have loaded the data
    Dim dataLoaded As Boolean = False

    Dim theGenderTypes As New ObservableCollection(Of GenderType)

#End Region

    Public Sub New()

        theGenderTypes = App.theGenderTypeCollection

        Resources.Add("MyGenderTypes", theGenderTypes)

        InitializeComponent()

        ' ApplyCellTemplateToColumns()

        ' create an event handler for the grid EditEnded event
        ContactGrid.AddHandler(GridViewRow.EditEndedEvent, New EventHandler(Of RecordRoutedEventArgs)(AddressOf ContactGrid_EditEnded))

    End Sub

    Private Sub ApplyCellTemplateToColumns()

        Dim cellStyle As Style = CType(Me.Resources("cellstyle"), Style)

        Dim aCol As GridViewColumn
        For Each aCol In ContactGrid.Columns
            aCol.CellStyle = cellStyle
        Next
    End Sub

    Public Property PageID() As String
        Get
            Return Me.thePageID
        End Get

        Set(ByVal value As String)
            Me.thePageID = value
            NavigationIdentifier = "ContactsPage_" & Me.thePageID
        End Set
    End Property

    Private Sub ContactListPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        If dataLoaded.Equals(False) Then
            App.theContactListPage = Me

            Me.NavigationIdentifier = "ContactsPage_" + Me.PageID

            ' bind to the data grid
            Me.ContactGrid.ItemsSource = App.thePartyCollection

            ' update the status
            App.theContactsPage.txtStatus.Text = "Contacts loaded"

            dataLoaded = True
        End If
    End Sub


    Private Sub NewContactButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles NewContactButton.Click

        ' create a new contact
        Dim aContact As Party = New Party
        aContact.IsPerson = True

        Dim g As Guid
        g = Guid.NewGuid()
        aContact.PartyID = g

        aContact.IsAppOwner = False

        ' add the contact to the data service context
        App.theService.AddToParty(aContact)

        ' update the status
        App.theContactsPage.txtStatus.Text = "Creating new contact"

        ' save the service
        App.theService.BeginSaveChanges(AddressOf NewPartyDataCompleted, aContact)
    End Sub

    Private Sub NewPartyDataCompleted(ByVal theResult As IAsyncResult)
        Try
            ' stop the save operation
            App.theService.EndSaveChanges(theResult)

            ' get the contact
            Dim aContact As Party = CType(theResult.AsyncState, Party)

            ' add it to the observable collection of parties
            App.thePartyCollection.Add(aContact)

            ' update the status text
            App.theContactsPage.txtStatus.Text = "party added"

        Catch ex As Exception
            App.theContactsPage.txtStatus.Text = "Error: " & ex.InnerException.ToString
        End Try
    End Sub

    Private Sub SaveContactButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles SaveContactButton.Click
        If ContactGrid.CurrentRecord Is Nothing Or ContactGrid.SelectedRecords.Count > 1 Then
            ' display an error message
            App.theContactsPage.txtStatus.Text = "Select a single item to save"
            Return
        End If

        Try

            Dim i As Integer
            Dim aContact As Party
            For i = 0 To App.thePartyCollection.Count - 1
                aContact = App.thePartyCollection.Item(i)
            Next

            ' get the selected item
            Dim selectedContact As Party = CType(ContactGrid.CurrentItem, Party)

            ' update the data service context status for this object
            App.theService.UpdateObject(selectedContact)

            ' update the status text
            App.theContactsPage.txtStatus.Text = "Saving the changes"

            ' begin the asyncronous save operation
            App.theService.BeginSaveChanges(AddressOf SaveContactCompleted, selectedContact)
        Catch ex As Exception
            ' display the error
            App.theContactsPage.txtStatus.Text = "Error: " & ex.InnerException.ToString
        End Try

    End Sub

    Private Sub SaveContactCompleted(ByVal theResult As IAsyncResult)

        Try
            ' stop the save operation
            App.theService.EndSaveChanges(theResult)

            ' update the status text
            App.theContactsPage.txtStatus.Text = "Changes saved"

        Catch ex As Exception
            ' display the error
            App.theContactsPage.txtStatus.Text = "Error: " & ex.InnerException.ToString
        End Try


    End Sub

    Private Sub DeleteContactButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles DeleteContactButton.Click
        If ContactGrid.SelectedItem Is Nothing Then
            App.theContactsPage.txtStatus.Text = "Please select a row to delete!"
            Return
        End If

        If ContactGrid.SelectedRecords.Count > 1 Then
            App.theContactsPage.txtStatus.Text = "Deleting multiple rows is not currently supported!"
            Return
        End If

        Try
            ' get the selected item
            Dim aContact As Party = CType(ContactGrid.SelectedItem, Party)

            ' delete the party from the data service context
            App.theService.DeleteObject(aContact)

            ' update the status text
            App.theContactsPage.txtStatus.Text = "Deleting the party"

            ' begin the asyncronous save operation
            App.theService.BeginSaveChanges(AddressOf DeletePartyCompleted, Nothing)

            ' remove the object from the collection of parties
            App.thePartyCollection.Remove(aContact)

        Catch ex As Exception
            ' display the error
            App.theContactsPage.txtStatus.Text = "Error: " & ex.InnerException.ToString
        End Try

    End Sub

    Private Sub DeletePartyCompleted(ByVal theResult As IAsyncResult)
        Try
            ' stop the save operation
            App.theService.EndSaveChanges(theResult)

            ' update the status
            App.theContactsPage.txtStatus.Text = "Contact deleted"
        Catch ex As Exception
            ' display the error
            App.theContactsPage.txtStatus.Text = "Error deleting contact: " & ex.InnerException.ToString
        End Try
    End Sub


    Private Sub theGenderTypeLookup_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        Dim theComboBox As RadComboBox = CType(sender, RadComboBox)
        theComboBox.ItemsSource = theGenderTypes
    End Sub

    Private Sub ContactGrid_SelectionChanged(ByVal sender As System.Object, ByVal e As Telerik.Windows.Controls.SelectionChangeEventArgs)

        Dim theCurrentParty As String = CType(ContactGrid.CurrentItem, Party).PartyName

        'Dim changedItemId As System.Guid
        'changedItemId = CType(ContactGrid.CurrentItem, Party).PartyID

        'Dim changedItem As Party = ( _
        '    From c In App.thePartyCollection _
        '    Where c.PartyID.Equals(changedItemId) _
        '    Select c).Single()

        'App.theService.UpdateObject(changedItem)

        'App.theContactsPage.txtStatus.Text = "Current item is: " & theCurrentParty
    End Sub

    Private Sub ContactGrid_EditEnded(ByVal sender As Object, ByVal e As RecordRoutedEventArgs)
        Dim editedContact As Party = CType(ContactGrid.CurrentItem, Party)

        ' update the data service context status for this object
        App.theService.UpdateObject(editedContact)

        ' update the status text
        App.theContactsPage.txtStatus.Text = "Saving the changes"

        ' begin the asyncronous save operation
        App.theService.BeginSaveChanges(AddressOf SaveContactCompleted, editedContact)

    End Sub


    Private Sub theGenderTypeLookup2_DropDownClosed(ByVal sender As System.Object, ByVal e As System.EventArgs)
        Dim editedContact As Party = CType(ContactGrid.CurrentItem, Party)

        ' update the data service context status for this object
        App.theService.UpdateObject(editedContact)

        ' update the status text
        App.theContactsPage.txtStatus.Text = "Saving the changes"

        ' begin the asyncronous save operation
        App.theService.BeginSaveChanges(AddressOf SaveContactCompleted, editedContact)
    End Sub

    Private Sub CheckBox_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        Dim editedContact As Party = CType(ContactGrid.CurrentItem, Party)

        ' update the data service context status for this object
        App.theService.UpdateObject(editedContact)

        ' update the status text
        App.theContactsPage.txtStatus.Text = "Saving the changes"

        ' begin the asyncronous save operation
        App.theService.BeginSaveChanges(AddressOf SaveContactCompleted, editedContact)
    End Sub
End Class

What I was trying to ask (regarding saving the grid changes) was how to batch update all changes made to the grid rather than updating the datasource after each editing event.  Would I need to track the rows that have changed in a seperate collection from the gird source?

Thanks for your assistance.
Jeff

[Nedyalko Nikolov]

Hi Jeff,

Unfortunately mouse events are handled by custom controls within the GridViewCell template.
So you can select items with some additional code within the Click event handler of the nested controls:

Dim selectedContact As Contact = TryCast((DirectCast(sender, FrameworkElement)).DataContext, Contact)
Me.ContactGrid.FindRecord(selectedContact).IsSelected = True

You actually can use DataContext and DataRecord directly, without handling the SelectionChanged event.

About your second question - you have to track the changed records in a separate collection. In this thread from our public forum you can find an example how to do this with RadGridView.

Regards,
Nedyalko Nikolov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[D. Omar]

Is a cell style still a good way to set a custom editor? I noticed that this is a somewhat ols thread, was CellEditTemplate not there at the time? What is the difference between using CellEditTemplate and the style in the sample application in this thread?

[Nedyalko Nikolov]

Hello D. Omar,

Indeed at the time when this forum post has been opened (answered) the CellEditTemplate property was not available.

Generally CellStyle property is designed as an option to change whole GridViewCell behavior and as this property is very powerful can be used as a last resort (because user should implement a lot of functionality and visual states), but the only option if you want to change some visual (theme related stuff). CellEditTemplate and CellTemplate properties come into place when you want to edit just default editor or data presenter with a custom control.

Best wishes,
Nedyalko Nikolov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.