DataGrid, How to do ScrollColumnIntoView via MVVM

1 Answer 14 Views
DataGrid
Keith
Top achievements
Rank 2
Veteran
Keith asked on 03 May 2022, 02:53 AM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 03 May 2022, 04:10 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Keith
Top achievements
Rank 2
Veteran
commented on 03 May 2022, 04:54 PM

Lance, 

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

 

Keith

Tags
DataGrid
Asked by
Keith
Top achievements
Rank 2
Veteran
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or