1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Refresh ListView with remote data

Refresh ListView with remote data

Hello,

I am using a listview with a data manager like this:

   <ejs-listview id="idList" cssClass="e-list-template m-2" showHeader="false"

                      template="#listTemplate"

                      actionComplete="onListComplete">

            <e-data-manager url=" /Quarter/ListItems" adaptor="UrlAdaptor">

            </e-data-manager>

        </ejs-listview>

I want to refresh the listview items after a UI change. For that, I call a javascript function (a piece of code I have found in your documentation):        

    function switchChange() {

        const grid = document.getElementById("idList").ej2_instances[0];

        const ajax = new ej.base.Ajax('/Quarter/ListItems', 'GET');

        ajax.send();

        ajax.onSuccess = function (data) {

            grid.dataSource = ej.data.DataUtil.parse.parseJson(data).result;

        };

    }

It calls the Controller method and send back the data, but doesn't refresh the listview.

How can I simply refresh the listview with updated remote data without reloading the page?

In fact, I have the same question for the diagram and the kanban component.


7 Replies
SS Sharon Sanchez Selvaraj Syncfusion Team July 6, 2021 02:25 PM UTC

  
Hi Laurent,  
 
Greetings from Syncfusion Support. 
 
We have checked with your reported query regarding ListView and we have created a similar sample using URL Adaptor. On a button click, we have modified the data source here for your reference. And also we would like to mention that the reloading doesn’t happen while changing the data source in ListView. 
 
Refer to the sample. 
 
 
Refer to the below links to know more about ListView component. 
 
 
 
And with regards to Kanban component, we fetch the data from the server and bound it to the Kanban component using `url` property of DataManager. We have performed CRUD operations like add/delete/update actions using `insertUrl`, `removeUrl` and `updateUrl` properties. 

 
So if you have performed any one of the operations the above API will be triggered and you can handle using that API properties.

Sample: https://www.syncfusion.com/downloads/support/directtrac/329034/ze/Kanban_CRUD-sample_(1)-1199345878

Documentation: https://ej2.syncfusion.com/angular/documentation/kanban/data-binding/#url-adaptor

 
Can you please share the following details?  
 
  • Package version that you have used
  • If possible please share us with the issue sample or modify the above sample to replicate the issue
  • Exact use case scenario and how the card data is updated in the component.
  • The video illustration of the issue reproducing scenario.
The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


LA Laurent July 8, 2021 08:21 AM UTC

Thank you Sharon,

I manage to work it out with you sample, but I have still some issues.

As a reminder, my need is to refresh  a listview / a diagram / a kanban with updated remote data without reloading the page, not after CRUD actions but after filtering actions.

  • ListView: 
    • it works fine.
    • I don't find how to set/unset the e-listview-fieldsettings.groupby  in the javascript section
    • I use the actionComplete method of the list view like this

    • function actionComplete  (args) {

                if (args.result.length === 0) {

                    $("#noItemList").show();

                }

            }

    When I load the updated data, I have a problem on args.result.length, and I don't know why. (It works when loading the initial data.)

  •  Kanban
    • it works fine.
    • Same question for the groupby property
  • Diagram
    • It doesn't work. It seems more complicated with the nodes and the connectors part. Can you provide a example?

Many thanks for your support,

Regards,

Laurent


SS Sharon Sanchez Selvaraj Syncfusion Team July 9, 2021 02:20 PM UTC

Hi Laurent, 
 
We have checked with your queries in ListView, Kanban and Diagram components.

Please find the details below. 
 
Refer to the details on ListView: 
 
You can update the GroupBy property to the particular ListView by specifying in the tags as given in the below documentation. 
 
 
And with respect to the result being returned in the actionComplete event, can you please provide us a screenshot as to the value obtained in the args in your end? 
 
Refer to the below screenshot of the data obtained while changing it through a button click in the previously attached sample. 
 
 
 
Refer to the details on Kanban: 
 
The Kanban control doesn't have the groupBy property, but the cards can be grouped using the Swimlane property. We have created a sample for your reference. 
 
 
In the above sample, columns are grouped by the assignee value. 
 
Please check the sample and let us know if the solution helps. 
 
Refer to the details on Diagram. 
 
On the further analysis of the shared details, we understood that you have made some changes to the remote server and want to reflect the change in diagram side. We suggest you use the refresh API to refresh the diagram after you make a change in the remote data. 
 
Code snippet: 
 
function refershDiag() { 
            // make any change the service. 
            var diagram = document.getElementById("diagram").ej2_instances[0]; 
            diagram.refresh(); 
} 
 
 
In case you have made a change in diagram, and you want to reflect that change to the CRUD service, we suggest you to follow the below documentation. 
 
 
 
 
If we have misunderstood your requirement, please share more details or replicate the issue in the shared sample. This will be helpful for us to proceed further. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
 
Sharon Sanchez S. 
 


LA Laurent July 9, 2021 03:27 PM UTC

Thanks for the reply, it helps.

There is a last point because we misundertsood each others: I don't find how to manage the listview groupby and the kanban swimlane in javascript. I know how to do it in the aspnet. I want to set and unset  listview groupby and the kanban swimlane in a javascript function.


Best regards,

Laurent



SS Sharon Sanchez Selvaraj Syncfusion Team July 12, 2021 11:54 AM UTC

Hi Laurent, 

We have checked with your queries regarding Kanban and ListView. 
 
Based on the sample shared previously, we suspect that you would like to update the GroupBy property dynamically for ListView when changing the data source. 

Please refer to the below code snippet. 

  function onButtonClick() { 
 
        $.ajax({ 
            url: '/ListView/ReceiveData', 
            type: 'POST', 
            dataType: 'json', 
            success: function (result) { 
                var list = document.getElementById("userList").ej2_instances[0]; 
                list.dataSource = result; 
                list.fields.groupBy = "RoleCategory"; 
            } 
        }) 
 
    } 

Refer to the below screenshot on the data source being updated after specifying the GroupBy property. 

 

In Kanban, please refer to the following code snippet as to how SwimLane property is used: 

function onButtonClick() { 
kanbanObj.swimlaneSettings.keyField = 'Assignee'; 
} 


We have prepared a sample with the Swimlane feature using JavaScript for Kanban and ListView with GroupBy property.

Sample: https://www.syncfusion.com/downloads/support/forum/166955/ze/LIA16B~1-426658904 

Please get back to us if you need any further assistance. 

Regards, 

Sharon Sanchez S. 


LA Laurent July 12, 2021 01:48 PM UTC

Perfect!

Thanks for your reply.


Regards,


KR Keerthana Rajendran Syncfusion Team July 13, 2021 06:00 AM UTC

Hi Laurent , 
 
Most welcome. We are glad to hear that the provided suggestion helped you. Please get back to us know if you need any further assistance. 
 
Regards, 
Keerthana R.  


Loader.
Up arrow icon