Creating programmatically a listview

[Laurent]

Hello,

Can you provide me with sample code on how to create a listview programmatically with these parameters ?

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

                      template="#listTemplate"

                      actionComplete="onListComplete"

                      actionFailure="actionFailure"

                      sortOrder="Descending">

            <e-data-manager url="/MyController/MyAction" adaptor="UrlAdaptor">

            </e-data-manager>

        </ejs-listview>

I didn't find it in the documentation.

Kind regards,

Laurent

[Prasanth Madhaiyan]

Hi Laurent,

Greetings from Syncfusion support.

We have prepared a simple ASP.NET Core sample with a ListView component by using the given code snippet. We have enabled the ListView template property with UrlDatasource. You can refer to the below code snippet.

[index.cshtml]

 

@{

    var template = "<span>${id} - ${text}</span>";

}

<div class="control-section">

    <!-- ListView element -->

    <ejs-listview id="myList" template="@template" sortOrder="Descending">

        <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" >

        </e-data-manager>

        <e-listview-fieldsettings id="id" text="text" ></e-listview-fieldsettings>

    </ejs-listview>

</div>

 

 

[HomeController.cs]

 

    public class HomeController : Controller

    {

        public IActionResult Index()

        {

            return View();

        }

        public class ListViewData

        {

            public string text { get; set; }

            public string id { get; set; }

        }

        public ActionResult UrlDatasource([FromBody] DataManagerRequest dm)

        {

            List<ListViewData> data = new List<ListViewData>();

            data.Add(new ListViewData() { text = "Artwork", id = "01" });

            data.Add(new ListViewData() { text = "Abstract", id = "02" });

            data.Add(new ListViewData() { text = "Modern Painting", id = "03" });

            data.Add(new ListViewData() { text = "Ceramics", id = "04" });

            data.Add(new ListViewData() { text = "Animation Art", id = "05" });

            data.Add(new ListViewData() { text = "Oil Painting", id = "06" });

            return Json(data);

        }

    }

For your reference, we have attached the sample.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewSample1369252665.zip

If we misunderstood, please share with us more details regarding your requirement. Whether you want to render the ListView component dynamically on a button click or something similar, kindly share us the details. These details would help us assist you promptly.

Regards,

Prasanth Madhaiyan.

[Laurent]

Thanks for your reply. But my question wasn't clear enough. I want to create the listview programmatically in the client side with javascript, and set the following parameters :

template, actionComplete, actionFailure, sortOrder and the url of the data manager.

Regards,

Laurent

[Prasanth Madhaiyan]

Hi Laurent,

We have prepared an ASP.NET Core sample with a ListView component with the given details. We have enabled the ListView with UrlDatasource in pure JavaScript and also bound the following properties and events such as template, sortOrder, actionComplete and actionFailure.

Refer the below code snippet.

 

[Index.cshtml]

 

<div id="container">

    <button  onclick="show()">click</button>

    <div id="element" ></div>

</div>

 

<script>

    let template = '<span>${id} - ${text} </span>';

    function show() {

        //Initialize ListView component

        var listviewInstance = new ej.lists.ListView({

            dataSource: new ej.data.DataManager({

                url: 'https://localhost:44349/Home/UrlDataSource',

                adaptor: new ej.data.UrlAdaptor,

                crossDomain: true

            }),

            fields: { id: 'id', text: 'text' },

            //set the header tittle for the list

            headerTitle: 'ListView Items',

            showHeader: true,

            sortOrder: "Descending",

            actionComplete: onActionComplete,

            actionFailure: onActionFailure,

            template: template

        });

        //Render initialized ListView

        listviewInstance.appendTo("#element");

    }

   

    function onActionComplete(args) {

        console.log(args)

    }

    function onActionFailure(args) {

        console.log(args)

    }

</script>

For your reference, we attached the sample.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewSample1976414375.zip

Please let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.