We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add footer ?

Thread ID:

Created:

Updated:

Platform:

Replies:

150183 Dec 24,2019 03:02 PM UTC Dec 30,2019 11:34 AM UTC Blazor 1
loading
Tags: ListView
Waleed
Asked On December 24, 2019 09:28 PM UTC

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 [Syncfusion]
Replied On December 30, 2019 11:34 AM UTC

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon