Telerik blogs

RadGridView for Silverlight and WPF supports sorting, grouping, filtering and editing. However, if a column is sorted for example and edited afterwards, we expect the newly-edited item to find its way in the sorted GridView. But it does not, unless “coded” to do that.

So, what we want to achieve is to make the Grid aware of the changes thus enabling it to organize its elements correctly, corresponding to the requirements of the user. 

Therefore, the expected behavior of the application will be the following:

States

In order to achieve the desired result, we need to take the following steps:

1. Create Business Object

There is one specific thing that you need to do when creating your business object – to implement the interfaces – INotifyPropertyChanged and IEditableObject.

  •  INotifyPropertyChanged – it ensures that clients, typically binding clients, are aware of the properties’ changes. Usually, its implementation is the following: 

    public event PropertyChangedEventHandler PropertyChanged;

 

    private void OnPropertyChanged(string propertyName)

    {

        if (this.PropertyChanged != null)

        {

            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

        }

    }

 

  • IEditableObject – it gives functionality to commit and rollback changes for an object used as a data source. When implementing the interface, we are provided with its methods BeginEdit (), EndEdit () and CancelEdit (). In the current context, BeginEdit () will be used to save the original values of the Properties of our Business Object and to “shout out” that the current item is being edited. CancelEdit() will do exactly the opposite – return the state of the elements.

    public void BeginEdit()

    {

       if (IsEditing)

       {

          return;

       }

 

       IsEditing = true;

 

       this.originalCustomerID = this.CustomerID;

       this.originalCompanyName = this.CompanyName;           

    }

 

    public void CancelEdit()

    {

       this.CustomerID = this.originalCustomerID;

       this.CompanyName = this.originalCompanyName;           

    }

 

    public void EndEdit()

    {

       if (!IsEditing)

       {

           return;

       }

 

       IsEditing = false;

    }

 

2. Add MainPageViewModel.cs

We will use the idea of MVVM and will create the class MainPageViewModel that not only gives us the elements of the Business Object, but also adds a Property “IsEditing” that is responsible for the state of the current item. Thus when MainPageViewModel. BeginEdit() is called, this property will claim the item as being edited and when MainPageViewModel.EndEdit() is called – that its editing is stopped. In this way we will ensure that no unwanted commitment or rollback of the changes will be done.

3. Customize MainPage.xaml

Our xaml file is the place where we define our UI elements. Here, we will add some, specific for this project, elements.

Firstly, we need to use the Property of UpdateSourceTrigger and set it to “Default”. This will update the source whenever there is some change of the value of a property.

<telerik:RadGridView.Columns>

     <telerik:GridViewDataColumn Header="Company Name" DataMemberBinding="{Binding CompanyName, Mode=TwoWay, UpdateSourceTrigger=Default}" />

     <telerik:GridViewDataColumn Header="Contact Name" DataMemberBinding="{Binding ContactName, Mode=TwoWay, UpdateSourceTrigger=Default}"/>

     <telerik:GridViewDataColumn Header="Contact Title" DataMemberBinding="{Binding ContactTitle, Mode=TwoWay, UpdateSourceTrigger=Default}"/>               

</telerik:RadGridView.Columns>

 

Furthermore, we will use as Resources for the UserControl the following converters:

<telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

<telerik:InvertedBooleanToVisibilityConverter x:Key="InvertedBooleanToVisibilityConverter" />

 

And we will use them in the definition of the EditButton:

<telerik:RadButton x:Name="EditButton" Content="Edit Selected Customer"

                   Click="EditButton_Click"

                   Visibility="{Binding IsEditing, Converter={StaticResource InvertedBooleanToVisibilityConverter}}" />

 

Thus when the button is clicked, the dialog for editing will open and we will be able to change only one item – the current one.

4. Code in MainPage.xaml.cs

Here, we define the behavior of the buttons for submitting, editing and canceling the changes made on the current item. Expectedly, we will use the methods we have just created – ComitEdit(), EditItem() and CancelEdit(). After each of them is called, we will set the Property “IsEditing” by means of the methods created in MainPageViewModel class.

    private void SubmitButton_Click(object sender, System.Windows.RoutedEventArgs e)

    {

        this.ClosePopup.Begin();

        this.playersGrid.Items.CommitEdit();

        this.ViewModel.EndEdit();

    }

 

    private void CancelButton_Click(object sender, System.Windows.RoutedEventArgs e)

    {

        this.ClosePopup.Begin();

        this.playersGrid.Items.CancelEdit();

        this.ViewModel.EndEdit();

    }

 

    private void EditButton_Click(object sender, System.Windows.RoutedEventArgs e)

    {

        this.OpenPopup.Begin();

        this.playersGrid.Items.EditItem(this.playersGrid.CurrentItem);

        this.ViewModel.BeginEdit();

    }

 

The result of all those coding will be the one we have strived for – a Grid capable of re-sorting, re-filtering and re-grouping as soon as any change is applied to its content.

You can try out the application below.

 

You can download the source code of the project from here.


About the Author

Maya Zhecheva

 is Software Developer in Telerik XAML Team

Comments

Comments are disabled in preview mode.