Do your controls support MVVM binding?
3 Replies
Hi Ozioma,
Regarding your query on LoadMoreCommand,
You can set the SfDataGrid.LoadMoreCommand to any ICommand. We have prepared the sample as per your requirement, in which LoadMoreCommand is binded to the ICommand.
Please find the code snippet of the same below. In the below code, you can observe that SfDataGrid.LoadMoreCommand is binded to the “LoadMore” of type ICommand in the ViewModel.
|
<ContentPage.BindingContext>
<local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
<ContentPage.Content>
<sfgrid:SfDataGrid x:Name="sfGrid"
AutoGenerateColumns="False"
ItemsSource="{Binding OrdersInfo}"
AllowResizingColumn="True"
ColumnSizer="Star"
AllowLoadMore="True"
LoadMoreCommand="{Binding LoadMore}"
IsBusy="{Binding Busy}"
>
<sfgrid:SfDataGrid.Columns>
<sfgrid:GridTextColumn MappingName="OrderID" />
<sfgrid:GridTextColumn MappingName="EmployeeID" />
<sfgrid:GridTextColumn MappingName="CustomerID" />
<sfgrid:GridTextColumn MappingName="ShipCountry" HeaderText="Country"/>
</sfgrid:SfDataGrid.Columns>
</sfgrid:SfDataGrid>
</ContentPage.Content>
//ViewModel.cs
public class ViewModel : NotificationObject
{
internal OrderInfoRepository order;
public ICommand LoadMore { get; set; }
private bool busy;
public bool Busy
{
get
{
return busy;
}
set
{
busy = value;
RaisePropertyChanged("Busy");
}
}
public ViewModel()
{
order = new OrderInfoRepository();
SetRowstoGenerate(50);
LoadMore = new CustomLoadMoreCommand(this);
}
#region ItemsSource
private ObservableCollection<OrderInfo> ordersInfo;
public ObservableCollection<OrderInfo> OrdersInfo
{
get { return ordersInfo; }
set
{
this.ordersInfo = value;
RaiseCollectionChanged("OrdersInfo");
}
}
#endregion
#region ItemSource Generator
public void SetRowstoGenerate(int count)
{
OrdersInfo = order.GetOrderDetails(count);
}
#endregion
}
//CustomLoadMoreCommand.cs
public class CustomLoadMoreCommand : ICommand
{
public event EventHandler CanExecuteChanged;
public ViewModel ViewModel { get; set; }
public CustomLoadMoreCommand(ViewModel viewModel)
{
ViewModel = viewModel;
}
public bool CanExecute(object parameter)
{
return true;
}
public async void Execute(object parameter)
{
// You can write your set of codes that needs to be executed
this.ViewModel.Busy = true;
await Task.Delay(new TimeSpan(0, 0, 5));
for (int i = 0; i < 20; i++)
this.ViewModel.OrdersInfo.Add(this.ViewModel.order.GenerateOrder(this.ViewModel.OrdersInfo.Count + 1));
this.ViewModel.Busy = false;
}
} |
You can download the sample from the below link.
Regarding the query on your below code snippet, You should not call the Command.Execute() as we will be calling the Command.Execute internally, when there is the need for command to be executed. For example we will be calling the LoadMoreCommand.Execute() method internally when the LoadMoreButton as displayed in view and true is returned from the Command.CanExecute() method.
In our example code, we have set the LoadMoreCommand as in the below screenshot, as the framework has provided the Command and we used it in order to reduce the code.
Regarding your query on setting the BindingContext in XAML page:
We have set the BindingContext in XAML page, in order to preserve the MVVM pattern, you can also set it in code behind as per your code example after calling InitializeComponents().
Regarding your query on Behaviors:
We will use the Behaviors to hook the events and define it there, in order to preserve MVVM.
Please let us know if this helpful.
Regards,
Vigneshkumar R
SIGN IN To post a reply.
