TelerikListView LoadOnDemand With Command Xamarin Forms

 

TelerikListView LoadOnDemand With Command

Explanation:

Instead of loading the huge data into listView at Once , we can Populate our ListView Itemsource whenever the user scrolls down .

when List is loaded for First Time , we’ll set only few Items in List when user will scroll further more data will be set to Itemsource of List.

Lets see How I did it …

There is 2 Types of LoadOnDemand

  1. Automatic
  2. Manual

In Automatic the Busy Indicator of Data Loading will be automatically Visible

when you set IsLoadOnDemandEnabled to true .

In Manual , A Button will appear end of List, on clicking it, Data Will be loaded

further.

LoadMoreItemCommand will recursively set ListView Itemsource Whenever

user scrolls down.

ListViewLoadOnDemandCollection inherits ObservableCollection, ListView

Itemsource will be of type ListViewLoadOnDemandCollection .

here in my code

LoadDataFirstTime() will Load Initially Few Items in ListView , where I

Initialized ListView Itemsource and added few Items.

LoadDataOnDemand() this method will be called when data is present in List

and IsLoadOnDemandEnabled is set to true .

else you’ll never get Hit in Your LoadMoreItemCommand .

 

XAML

<ContentPage.BindingContext>
    <local:LoadOnDemandVM></local:LoadOnDemandVM>
</ContentPage.BindingContext>
<ContentPage.Content>


    <telerikDataControls:RadListView x:Name ="listView"
                                        IsLoadOnDemandEnabled="{Binding  IsLoadOnDemandEnabled}"
                                        ItemsSource="{Binding Source}"
                                        LoadOnDemandMode="Automatic">


        <telerikDataControls:RadListView.ItemTemplate>
            <DataTemplate>
                <telerikListView:ListViewTemplateCell>
                    <telerikListView:ListViewTemplateCell.View>
                        <StackLayout Padding ="8,8,8,8">
                            <Label Text ="{Binding Name}" />
                        </StackLayout>

                    </telerikListView:ListViewTemplateCell.View>
                </telerikListView:ListViewTemplateCell>
            </DataTemplate>
        </telerikDataControls:RadListView.ItemTemplate>
        <telerikDataControls:RadListView.Commands>
            <telerikListViewCommands:ListViewUserCommand Command ="{Binding LoadMoreItemsCommand}"
                                                             Id="LoadOnDemand" />
        </telerikDataControls:RadListView.Commands>
    </telerikDataControls:RadListView>
</ContentPage.Content>

 

ViewModel

public class LoadOnDemandVM : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void NotifyPropertyChanged([CallerMemberName]string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public LoadOnDemandVM()
    {
        LoadDataFirstTime();
        this.LoadMoreItemsCommand = new Command(() =>
        {
            LoadDataOnDemand();
        });

    }
    public List<Employees> _data = new List<Employees>()
    {
        new Employees(){Name="abc"},
        new Employees(){Name="bcd"},
        new Employees(){Name="cde"},
        new Employees(){Name="def"},
        new Employees(){Name="efg"},
        new Employees(){Name="fgh"},
        new Employees(){Name="ghi"},
        new Employees(){Name="hij"},
        new Employees(){Name="ijk"},
        new Employees(){Name="jkl"},
        new Employees(){Name="klm"},
        new Employees(){Name="lmn"},
        new Employees(){Name="mno"},
        new Employees(){Name="nop"},
        new Employees(){Name="opq"},
        new Employees(){Name="pqr"},
        new Employees(){Name="qrs"},
        new Employees(){Name="rst"},
        new Employees(){Name="stu"},
        new Employees(){Name="tuv"},
        new Employees(){Name="uvw"},
        new Employees(){Name="vwx"},
        new Employees(){Name="wxy"},
        new Employees(){Name="xyz"}
    };

    public ListViewLoadOnDemandCollection Source { get; set; }

    private bool _IsLoadOnDemandEnabled = true;

    public bool IsLoadOnDemandEnabled
    {
        get { return _IsLoadOnDemandEnabled; }
        set
        {
            _IsLoadOnDemandEnabled = value;
            NotifyPropertyChanged();
        }
    }

    public ICommand LoadMoreItemsCommand { get; set; }

    public void LoadDataOnDemand()
    {
        List<Employees> result = new List<Employees>();
        result = _data.Skip(Source.Count).Take(3).ToList();
        for (int i = 0; i < result.Count; i++)
        {
            Source.Add(result.ElementAt(i));
        }

        if (Source.Count >= _data.Count)
        {
            IsLoadOnDemandEnabled = false;
        }
    }

    public void LoadDataFirstTime()
    {
        Source = new ListViewLoadOnDemandCollection((CancellationToken) =>
        {
            Task.Delay(4000, CancellationToken).Wait();
            return null;
        });

        for (int j = 0; j <= 1; j++)
        {
            Source.Add(_data.ElementAt(j));
        }
    }
}
public class Employees
{
    public string Name { get; set; }
}

 

Please follow and like us:
Sending
User Review
4.5 (6 votes)

Leave a Reply

Your email address will not be published. Required fields are marked *