Display Datagrid based on Binding item count in Xamarin Forms - xamarin.forms

Question

I am currently using Syncfusion Sf Datagrid. I want to display the Datagrids based on count. For example I have button A and button B, if user click on A, it will display 1 datagrid. If user click on B, it will display 2 datagrid. FYI, the datagrid will display on the same page.
What my code does now is displaying all datagrid. I would like to display the datagrid only based on condition (in this case which is A or B). I am not sure how to achieve this because the datagrid is in xaml, how do I make sure the correct count of datagrid I want to appear? Let's say if I want to have more category that has different items, how do I display the correct number of datagrid according to the items inside a category?
MainPage.xaml
<ContentPage.Content>
<StackLayout>
<Button Text="A"/>
<Button Text="B"/>
<sfgrid:SfDataGrid ItemsSource="{Binding fruitA}"/>
<sfgrid:SfDataGrid ItemsSource="{Binding vegeB1}"/>
<sfgrid:SfDataGrid ItemsSource="{Binding vegeB2}"/>
</StackLayout>
</ContentPage.Content>
MainPage.cs
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new ViewModel();
}
}
ViewModel
public class ViewModel
{
public ObservableCollection<Test> fruitA { get; set; }
public ObservableCollection<Test> vegeB1 { get; set; }
public ObservableCollection<Test> vegeB2 { get; set; }
public ViewModel()
{
fruitA = new ObservableCollection<ChildPart>();
fruitA.Add(new Test() { Title = "Orange", Value = "1.20" });
fruitA.Add(new Test() { Title = "Banana", Value = "1.40" });
fruitA.Add(new Test() { Title = "Apple", Value = "1.30" });
vegeB1 = new ObservableCollection<ChildPart>();
vegeB1.Add(new Test() { Title = "Spinach", Value = "1.20" });
vegeB1.Add(new Test() { Title = "Cabbage", Value = "1.40" });
vegeB2 = new ObservableCollection<ChildPart>();
vegeB2.Add(new Test() { Title = "Lettuce", Value = "1.20" });
vegeB2.Add(new Test() { Title = "Broccoli", Value = "1.40" });
vegeB2.Add(new Test() { Title = "Celery", Value = "1.30" });
}
}
Test
public class Test
{
public string Title { get; set; }
public string Value { get; set; }
}

Answer 1

There is a way to use Bindable layouts to achieve that , you can check whether is your want .
Modify MainPage.xaml as follow (Add ScrollView if count of items is too much):
<StackLayout>
<Button Text="A" Clicked="Button_Clicked_A"/>
<Button Text="B" Clicked="Button_Clicked_B"/>
<Button Text="C" Clicked="Button_Clicked_C"/>
<ScrollView>
<StackLayout x:Name="MyStackLayout" Orientation="Vertical">
<BindableLayout.ItemTemplate>
<DataTemplate>
<sfgrid:SfDataGrid ItemsSource="{Binding }" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
Modiy MainPage.cs asd follow :
public partial class MainPage : ContentPage
{
ViewModel viewModel;
public MainPage()
{
InitializeComponent();
viewModel = new ViewModel();
}
private void Button_Clicked_A(object sender, EventArgs e)
{
List<object> list = new List<object>();
list.Add(viewModel.fruitA);
BindableLayout.SetItemsSource(MyStackLayout, list);
}
private void Button_Clicked_B(object sender, EventArgs e)
{
List<object> list = new List<object>();
list.Add(viewModel.vegeB1);
list.Add(viewModel.vegeB2);
BindableLayout.SetItemsSource(MyStackLayout, list);
}
private void Button_Clicked_C(object sender, EventArgs e)
{
List<object> list = new List<object>();
list.Add(viewModel.fruitA);
list.Add(viewModel.vegeB1);
list.Add(viewModel.vegeB2);
BindableLayout.SetItemsSource(MyStackLayout, list);
}
}
After running , the effect as follow :

Answer 2

You can refer the following updated code snippet to achieve your requirement “Based on the button click I have to show respective datagrid”.
Code snippet:
<StackLayout>
<Button x:Name="A" Text="A" Clicked="A_Clicked" />
<Button x:Name="B1" Text="B1" Clicked="B1_Clicked" />
<Button x:Name="B2" Text="B2" Clicked="B2_Clicked" />
<sfgrid:SfDataGrid x:Name="fruitA" IsVisible="False" ItemsSource="{Binding fruitA}"/>
<sfgrid:SfDataGrid x:Name="vegeB1" IsVisible="False" ItemsSource="{Binding vegeB1}"/>
<sfgrid:SfDataGrid x:Name="vegeB2" IsVisible="False" ItemsSource="{Binding vegeB2}"/>
</StackLayout>
private void A_Clicked(object sender, EventArgs e)
{
//// Displays only fruit datagrid.
fruitA.IsVisible = true;
vegeB1.IsVisible = false;
vegeB2.IsVisible = false;
}
private void B1_Clicked(object sender, EventArgs e)
{
//// Displays only vegeB1 datagrid.
fruitA.IsVisible = false;
vegeB1.IsVisible = true;
vegeB2.IsVisible = false;
}
private void B2_Clicked(object sender, EventArgs e)
{
//// Displays only vegeB2 datagrid.
fruitA.IsVisible = false;
vegeB1.IsVisible = false;
vegeB2.IsVisible = true;
}
Sample link
Regards,
Pradeep Kumar