Nested listview with remote data

[Hosney]

Is it possible to auto load children from a remote data source on the listview control similar to what we can do with the treeview? Or does this need to be done manually on the select event?

[Sowmiya Padmanaban]

Hi Hosney,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with ListView component ( loaded nested list using remote data). In ListView component, we have provided a remote data support. You can render the nested ListView using remote data during initialization. 

 

Please, refer the below link for nested list using local datasource. 

 

https://ej2.syncfusion.com/documentation/listview/nested-list/ 

 

Please, refer the below code snippet for rendering the nested list using remote datasource. 

 

//Initialize ListView component 

let remoteListObj: ListView = new ListView({ 

  //Initialize dataSource with the DataManager instance. 

  dataSource: new DataManager({ 

    url: "https://localhost:5001/Home/Get", 

    adaptor: new WebApiAdaptor(), 

    crossDomain: true 

    //offline: true 

  }), 

 

  //Map the appropriate columns to fields property 

  fields: { id: "id", text: "name", child: "child" }, 

 

  //Set header title 

  headerTitle: "Products", 

 

  //Set true to show header title 

  showHeader: true 

}); 

 

//Render initialized ListView component 

remoteListObj.appendTo("#listview"); 

 

  [HttpGet] 

        public object Get() 

        { 

            // Get the DataSource from Database 

            var data = WeatherForecast.GetAllRecords().ToList(); 

            return data; 

        } 

        public class WeatherForecast 

        { 

            public static List<WeatherForecast> order = new List<WeatherForecast>(); 

            public static List<WeatherForecast> order1 = new List<WeatherForecast>(); 

            public WeatherForecast() 

            { 

 

            } 

            public WeatherForecast(int id, string name, List<WeatherForecast> child) 

            { 

                this.id = id; 

                this.name = name; 

                this.child = child; 

            } 

            public static List<WeatherForecast> GetAllRecords() 

            { 

                if (order.Count == 0) 

                { 

                    order1.Add(new WeatherForecast(6, "Child", null)); 

                    order.Add(new WeatherForecast(1, "Africa", order1)); 

                    order.Add(new WeatherForecast(2, "Asia", order1)); 

                    order.Add(new WeatherForecast(3, "Europe", null)); 

                    order.Add(new WeatherForecast(4, "India", null)); 

                    order.Add(new WeatherForecast(5, "Italy", null)); 

                    order.Add(new WeatherForecast(6, "China", null)); 

                } 

                return order; 

            } 

 

            public int id { get; set; } 

            public string name { get; set; } 

           public List<WeatherForecast> child { get; set; } 

        } 

 

Please refer the below sample link. 

 

Sample link: https://stackblitz.com/edit/urs9wd?file=index.ts 

 

Controller method to fetch the datasource for ListView component:  https://www.syncfusion.com/downloads/support/forum/160238/ze/Controller_data-673475231.zip 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Hosney]

Hi Sowmiya,

Thank you for your reply. I failed to mention previously that what I am looking for is the load on demand (lazy load) behaviour for remote data source similar to what is supported in the treeview. Basically I only want items fetched as required.

Is this something that the listview currently supports?

Thank you,

Hosney

[Sowmiya Padmanaban]

Hi Hosney,  

 

We have checked your requirement with ListView component. Currently, we don’t have support for lazy loading of ListView component. Based on your request, we will consider this as a feature request in our end. Support for this feature will be included in any one of our upcoming releases. Generally, we will plan any feature implementation based on customer request count, feature rank and wishlist plan for some feature. 

 

Please, track the following feedback link to know the status of this feature implementation. 

 

https://www.syncfusion.com/feedback/20293/load-on-demand-lazy-loading-support-for-listview-component 

 

We appreciate your patience. 

 

Regards,  

Sowmiya.P