Nested ListView - in place update

[nicola dellanna]

Dears,

I have a nested listview in which I show countries and locations.

I have implemented add/edit functionalities but I am having hard time to refresh the list without reloading it.

This is the example:

And I lend to:

Click on "add"

then "Ok"

After I click on "Ok" the dataSource is updated but it does not reflect on the list.

Question: how do I refresh the current list without refresh()or without reloading the component?

Thank you!

Nicola

this is the code of the "Ok" button

functionSaveDialog_ADD(){

// get the listview
var nestedlist = document.getElementById('nestedlist').ej2_instances[0];

// get list view selected item
var selecteditem = nestedlist.getSelectedItems();

// get the value to add to the list
var selecteditemInput = document.getElementById('text_value');

// if item is not null
if(selecteditem !=null){

// create object to be sent back to server
varEntityLocation={};


EntityLocation.Id=-1;
EntityLocation.EN_Name = selecteditemInput.value;
EntityLocation.IT_Name = selecteditemInput.value;
EntityLocation.Parent_id=(selecteditem["data"]).id;


// find the element in the datasource
var selectedDS=null;
for(i=0; iif(selectedDS==null){
                    selectedDS = findNode(EntityLocation.Parent_id, dataSourceObj[i]);
if(selectedDS ==false){ selectedDS =null;}
}
}

// send back to server
            $.ajax({
                url:"@Url.Action("LocationAdd","LocationManagement")",
                data:{ model:EntityLocation},
                type:"Post",
                success:function(result){

// I get the id (PK) from the server
EntityLocation.Id=result;

// updates datasource
                    selectedDS.child.push({
                        id:EntityLocation.Id,
                        text: selecteditemInput.value,
                        htmlAttributes:{ role:'li'}
});

// it refreshes the list but it loads from first page
//------ HOW DO I REFRESH IN A WAY THAT IT STAYS ON CURRENT VIEW? ------
                    nestedlist.refresh();
},
                error:function(){
                    window.alert("error");
}
});
}

// close ADD dialog
CloseDialog();
}

[SureshRajan Alagarsamy]

Hi Nicola,

We have reviewed your query and understand that you are facing issue with adding a new item in the nested list within the ListView component. We need some additional time to validate your reported query. We will update you with further details by December 1, 2023.

Regards,
Suresh.

[SureshRajan Alagarsamy]

Hi Nicola,

Thanks for your patience.

Upon further validation, we have consider the reported concern regarding adding a new item inside the nested ListView component as a bug on our end. The fix for this issue will be included in the weekly patch release scheduled for December 26, 2023.

You can track the status of the fix through the following link.

Feedback : https://www.syncfusion.com/feedback/49176/addition-of-new-item-in-nested-listview-not-reflected-in-ui

Disclaimer : Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,

Suresh.

[SureshRajan Alagarsamy]

Hi Nicola,

Thanks for your patience.

Upon our further analysis, we have achieved the requirement at sample level. To add a new list item within the corresponding parent list item, we utilize the “addItem” method. This method requires passing the new item as the first parameter and the corresponding parent ID which is the selected item id as the second parameter. This approach enables the addition of the new list item within its respective parent.

Refer to the below code snippet for further reference.

[Index.cshtml]

 

....

 

<script>

    //Event handler to add the list item on button click

    document.getElementById("btn").onclick = () => {

        var listviewInstance = document.getElementById("listview").ej2_instances[0];

        var data = {

            text: "Koenigsegg - " + (Math.random() * 1000).toFixed(0),

            id: (Math.random() * 1000).toFixed(0).toString()

        };

        if (listviewInstance.selectedItems) {

            listviewInstance.addItem([data], { id: listviewInstance.selectedItems.data.id });

        }

        else {

            listviewInstance.addItem([data]);

        }

    };

</script>

We have attached a sample for your reference.

Sample : Attached as zip folder.

Regards,
Suresh.

Attachment: CoreNestedListView_8f3d583d.zip