How to add footer ?

[Waleed]

Currently I am using 17.4.0.39

In ListView Component, I did the Items Template and the header template as well, but can't find anyway to add the footer , is there anyway I can do that ?

and Is it posiible to have something like Data Source Manager that will query Back-End API gradually say every 5 minutes to check for new data ?

And how to access the items of EsjViewList , All I can find is AddItem() and RemoveItem() but no access like EsjViewList.Items[] ? , say I want to clear the Items .

Also, I am trying to add items in ListView, but it never update on screen, my approach is to add the DataSource list :

      EjsListView ID="listview"  ShowHeader="true" @ref="dodo2" TValue="Notification" DataSource="@DataList"

      

................................

@code {
    public EjsListView dodo2 { get; set; }
    public List DataList { get; set; } = new List{
        new Notification{Text="Test Test", SecondText="2nd Line Test", URL="http://www.google.com",Icon="fas fa-bell fa-fw", IconBackgroundColor="red" },
       new Notification{Text="Hello World!", SecondText="2nd Line Test hello worlds", URL="http://www.cnet.com",Icon ="fab fa-android", IconBackgroundColor="yellow" },

};

 protected override Task OnAfterRenderAsync(bool firstRender)
    {

        if (firstRender)
        {
            System.Timers.Timer t = new System.Timers.Timer();
            t.Elapsed += async (s, e) =>
            {
                try
                {
                    DataList.Add(new Notification { Text = "Test Test", SecondText = "2nd Line Test", URL = "http://www.lilo.com", Icon = "fas fa-bell fa-fw", IconBackgroundColor = "red" });
                    //    dodo2.AddItem(new Notification { Text = new Random(0).Next(30).ToString(), SecondText = "2nd Line Test", URL = "http://www.lilo.com", Icon = "fas fa-bell fa-fw", IconBackgroundColor = "red" }, null) ;
                    //   await InvokeAsync(dodo2.Refresh);
            //      dodo2.DataSource = DataList;

                  await   dodo2.DataBind(true);
                    await InvokeAsync(StateHasChanged);
                }
                catch (Exception eee)
                {

                }
            };
            t.Interval = 5000;
            t.Start();
        }
        return base.OnAfterRenderAsync(firstRender);
    }

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Waleed,  

  

Thanks for contacting Syncfusion support.  

  

Query 1: In ListView Component, I did the Items Template and the header template as well, but can't find anyway to add the footer  

  

In Our ListView component, we have not provided FooterTemplate support.  

  

Query 2: Is it posiible to have something like Data Source Manager that will query Back-End API gradually say every 5 minutes to check for new data ?  

  

If you want to load the new data source for every 5 minutes you can customize from your end. In the below sample we have updated ListView component data source using a button click event.  

  

Refer this code block to change data source:  

  

public List<Notification> DataList2 { get; set; } = new List<Notification> {  

        new Notification {  

            Text="Welcome",  

            SecondText="2nd Line Test",  

            URL="http://www.google.com",  

            Icon="fas fa-bell fa-fw",  

            IconBackgroundColor="green"  

        },  

        new Notification {  

            Text="Hello World!",  

            SecondText="2nd Line Test hello worlds",  

            URL="http://www.cnet.com",  

            Icon ="fab fa-android",  

            IconBackgroundColor="yellow"  

        },  

        new Notification {  

            Text="Hello Listview!",  

            SecondText="Syncfusion",  

            URL="http://www.syncfusion.com",  

            Icon ="fab fa-android",  

            IconBackgroundColor="blue"  

        },  

   

};  

  

// Button click to change data source  

public void onClick()  

    {  

        DataList = DataList2;  

    }  

  

  

Query 3: how to access the items of EsjViewList , All I can find is AddItem() and RemoveItem() but no access like EsjViewList.Items[] ? , say I want to clear the Items .  

  

If you want to clear the all items from the ListView component simply you can assign the empty list to the data source. Otherwise you can use RemoveItem method to remove items from the list.  

  

Query 4: I am trying to add items in ListView, but it never update on screen,  

  

We have provided the AddItem method for adding new items. So, you can use this method to achieve your requirement.  

  

Refer this code block to add new item:  

  

public void add()  

    {  

        List<Notification> data = new List<Notification>()   {  

            new Notification  

            {  

                 Text = "New Item",  

            SecondText = "Testing 2nd Items",  

            URL = "https://ej2.syncfusion.com/",  

            Icon = "fa-fa ar",  

            IconBackgroundColor = "grey"  

            }  

        };  

        dodo2.AddItem(data, null);  

    }  

  

  

  

  

Please let us know if you have any concerns.  

  

Regards,  

Shameer Ali Baig S.