Refresh contents of ListView with remote data binding

[Charles Southey]

Hi,

I am using the JS2 version of Syncfusion ASP.NET MVC  controls to implement a search form which picks a set of available reports based on user selections. Matching reports are shown in a list view control. 

Here is the Razor code for the reports list:

@Html.EJS().ListView("reports").Enable(true).DataSource(dm =>

{

     dm.Url("/Search/FindReports");

}).Query("new ej.data.Query().addParams('account_id', account_id).addParams('report_template_id',report_template_id).addParams('report_date',report_date).addParams('rows',5)")

.Fields(new ListViewFieldSettings {Id = "report_id", Text = "report_title"}).ShowHeader(true).HeaderTitle("Select Report...").Render()

This invokes a server-side method in SearchController called FindReports and all works fine (it returns up to five reports).

However, I want to re-query the data when the user selects something in a dropdown. Here is my client-side event-handler function:

    function selectClient(event)

    {

        account_id = event.itemData.account_id;

        $('#reports')[0].ej2_instances[0].dataSource =

            new ej.data.DataManager({ url: "/Search/FindReports", adaptor: new ej.data.UrlAdaptor }).executeQuery(new ej.data.Query()

              .addParams('account_id', account_id).addParams('report_template_id', report_template_id)

              .addParams('report_date', report_date).addParams('rows', 5))

            .then(function(e)

            {

                $('#reports')[0].ej2_instances[0].dataBind();

            });

    }

This succeeds in re-running the query on the server (I can set a breakpoint and see that happen) - but afterwards the contents of the ListView are empty even though there are five results returned. What do I need to do to get the ListView to display the new results?

[Prince Oliver]

Hi Charles, 

Thank you for using Syncfusion products. 

To display the result in the ListView, we need to append the filtered data from Controller in the success function of DataManager. Kindly refer to the following code snippet. 

 

<script> 

function selectClient(event) { 

        var listObj = (document.getElementById("reports")).ej2_instances[0]; // Listview Instance 

        var account_id = event.itemData.value; // Selected Value from DropDown 

        var listdata = 

            new ej.data.DataManager({ url: "/Search/FindReports", adaptor: new ej.data.UrlAdaptor }).executeQuery(new ej.data.Query() 

                .addParams('accountid', account_id)) 

                .then((e) => { 

                    (e.result).forEach((data) => { 

                        listObj.dataSource = e.result; // Filtered data from Controller appended to ListView dataSource 

                        listObj.dataBind(); 

                    }); 

                }); 

    } 

</script> 

 

For your convenience we have prepared a simple sample with simple dataSource as per your requirement. Please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/140145/ze/listview-1524485053  

 

Regards, 

Prince