Display Datagrid based on Binding item count in 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; }
}

Did you try with the IsVisible property of the Datagrid? You can use this to bind a property from the ViewModel and this will change with the button Click Command. — pinedax
Hi, actually this is a sample..in my actual own project, I will be binding item from database. It will be of different count so I don't think setting Is visible will help because the total count will vary. Not sure how can I achieve it — Charis
A bit lost, let's see if I understand you better. You said "I want to display the Datagrids based on count" base on the count of what? items? And then you said "if user click on A, it will display 1 datagrid. If user click on B, it will display 2 datagrid" The visibility of the DataGrids you want it to be base on what? — pinedax
I will loop through and get the total count of items for each category (A and B). My example was only A and B, but in actual it can have many more. Like A can have 1 item, B 2 items, C 4 items, D 10 items etc. So how do I make sure I can display datagrid for each item? I want each item to have their own datagrid to display their values. Do you understand better..? I tried my best to explain — Charis

Junior Jiang Junior Jiang · Accepted Answer · 2020-05-08T05:55:46

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 :

Display Datagrid based on Binding item count in Xamarin Forms

2 Answers