Set selected item in Nested List

[Lucas]

Hi, how can I define the selected item in Neste List?

For example:

var myList = [ 

  {id: '1', text: 'Images', child: [] }, 

  {id: '2', text: 'Videos', child: [

      {id: '2-1', text: 'Movies', child: [

           {id: '2-1-1', text: 'Movie A', child: [] }

       ] },

   ] }, 

]

var params = {

  fields: { text: 'text', iconCss: 'icon' },

  select: onSelect,

}

var listView = new ej.lists.ListView(params );

listView.dataSource = myList ;

listView.appendTo(targetToAppend);

I want to start the listView showing the Movies content, how can I do that? Can I pass a path to select the item? Can the sub-items repeats the parents id?

[Vinoth Kumar Sundara Moorthy]

Hi Lucas, 

 

Thank you for contacting Syncfusion support. 

 

Query #1: To start the listView showing the Movies content 

 

We can achieve your requirement by using “selectItem” method. You can select the item only after the ListView was append in DOM and need to pass the parent Id to selectItem method as like in below code snippet, 

 

Code Snippet 

//Initialize ListView component 

let nestedListObj: ListView = new ListView({ 

 

    //Set defined data to dataSource property 

    dataSource: nestedListData, 

 

    //Map appropriate columns to fields property 

    fields: { iconCss: 'icon', tooltip: 'text' }, 

 

    //Set true to show icons 

    showIcon: true, 

 

    //Set header title 

    headerTitle: 'Folders', 

 

    //Set true to show header title 

    showHeader: true 

}); 

 

nestedListObj.appendTo('#listview'); 

nestedListObj.selectItem({ id: '04' }); //To Select parent 

nestedListObj.selectItem({ id: '04-01' }); //To Select parent with chid item 

 

Sample Link: https://stackblitz.com/edit/nsc13z?file=index.ts 

 

Query #2: Can I pass a path to select the item? 

 

No, you can pass only the item’s text or id. 

 

Query #3: Can the sub-items repeat the parents id? 

 

No, Unique id is must be assigned for each item in the ListView. 

 

Could you please check the above details and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S