DataGrid, How to do ScrollColumnIntoView via MVVM

[Keith]

Good day,

I want to provide some buttons that scrolls/shifts the grid columns horizontally via MVVM.  I happen to be using MVVM Light, but that probably isn't the key issue.  I know I could do this via an event connecting to an ICommand, but I'm not sure in my Delegate what property, I could set in the RadGrid, that would cause a specific Column Index to come into view.

Can someone assist me with this?

Peace,
Keith

[Lance | Manager Technical Support]

Hello Keith,

When there is a method, event or other unbindable property, that you want to use in an MVVM way, you need to write a Behavior.

In 2015, Microsoft brought us the XamlBehaviors library that you can use to write your behavior with. See GitHub - microsoft/XamlBehaviors: This is the official home for UWP XAML Behaviors on GitHub.

We do not have any example of custom behaviors for this as it is isn't directly related to Telerik (you can write a behavior for any XAML element

I can give you a head start with a pseudo-code example:

public class MyScrollerBehavior : Behavior<RadDataGrid>
{
// This MUST be a DependencyProperty so that you can bind to it, the example here is a normal property for conciseness. I also only have an int parameter, you will probably want something else so that you can send more information
    public Command<int> ScrollToCommand { get; set; }

   public void OnAttached()
    {
        base.OnAttached();

        ScrollToCommand = new Command(ExecuteScrollTo);
    }
 
    private void ExecuteScrollTo(int row)
    {
        // The AssociatedObject is the attached DataGrid itself
        AssociatedObject.ScrollColumnIntoView(rowIndex);
    }
}

Then in your XAML, you consume it in your datagrid

<telerik:RadDataGrid>
    <Interactivity:Interaction.Behaviors>
<!-- You can put properties, commands, whatever you want in your behavior and then expose them to bind to your view model-->
        <myBehaviors:MyScrollerBehavior ... />
    </Interactivity:Interaction.Behaviors>
</telerik:RadDataGrid>

 

Interface Method (recommended for intermediate)

the other way to do this is with an interface that lets you call code-behind code form the view model. an example of this can be seen here telerik-xamarin-forms-samples/IDataGridView.cs.

Don't worry that it is Xamarin.Forms code. That's irrelevant. what matters is that interface lets me call methods on the DataGrid.

You can see that interface implemented on the Orders page

https://github.com/telerik/telerik-xamarin-forms-samples/blob/master/ArtGalleryCRM/ArtGalleryCRM.Forms/Views/OrderPages/OrdersPage.xaml.cs 

and executed in the Orders view model

https://github.com/telerik/telerik-xamarin-forms-samples/blob/9a3c2987beaea561d82d72c30b5dc9c17523cfad/ArtGalleryCRM/ArtGalleryCRM.Forms/ViewModels/OrderViewModels/OrdersViewModel.cs#L91 

Regards,
Lance | Manager Technical Support
Progress Telerik

[Keith]

Lance, 

Thank you for the great links.  We have used the Behaviors,  but have not attempted a custom yet.  Thanks so much!

 

Keith