what is the syntax to get a listview object?

[Martin Stein]

What is the sytax to get a ListView object?

I am trying to receive the selcted items of a listview. 

I use this, but I receive the error: "Cannot read property 'ListView' of undefined"

var listviewInstance = ej.base.getInstance(document.getElementById("userLV"),ej.Lists.ListView).value;

....

listviewInstance.getSelectedItems()

......

userLV is like this:

<ejs-listview id="userLV" dataSource="@Model.Market.UserList" template="@template" headerTitle="Benutzer" showHeader="true" cssClass="e-list-template" sortOrder="Ascending"

                                              select="OnSelectViewList">

                                </ejs-listview>

kind regards,
Martin

[Sharon Sanchez Selvaraj]

Hi Martin, 

 

Greetings from Syncfusion Support. 

 

We have checked with your reported query. You can process the ListView instance using the following code. 

 

Refer to the code snippet. 

 

document.getElementById('button').onclick = function (e) { 

        

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

        console.log(listview.getSelectedItems()); 

    } 

 

Refer to the following sample attached for your reference. 

 

https://www.syncfusion.com/downloads/support/forum/165281/ze/ListView127321674.zip 

 

UG Link: https://ej2.syncfusion.com/aspnetcore/documentation/listview/how-to/get-selected-items-from-listview/ 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[Martin Stein]

Hi,

I have tried this before. listview returns as undefined.

Kind regards,

Martin

[Sharon Sanchez Selvaraj]

Hi Martin, 

 

Sorry for the inconvenience.  

 

We have prepared a video demonstrating the working of our previous sample where the ListView object is properly obtained in our end. Please refer to the video and the sample previously attached in our end. 

 

https://www.syncfusion.com/downloads/support/forum/165281/ze/ListView_Sample_Video-1558679985.zip 

 

If the issue persists, please modify the previous sample shared to replicate your mentioned issue. Else, share us your complete code block along with the package version to replicate the issue at our end to assist you promptly.  

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[Martin Stein]

Hi,
Your sample works, but not my implementation in my code.

Find attached the project.

the problem  code is in:

SecondHandWeb\Pages\MarketPages\NewMarket.cshtml

Line 210:

  @{ var template = "<div class='e-list-wrapper e-list-multi-line'>" +

                                                               "<span class='e-list-item-header'>${User.FullName} (${SellerNumberStr})</span>" +

                                                                

                                                               "</div>";

                                }

 <ejs-listview id="userLV" dataSource="@Model.Market.UserList" template="@template" headerTitle="Benutzer" showHeader="true" cssClass="e-list-template"      sortOrder="Ascending"    select="OnSelectViewList">                </ejs-listview>

Line 302:

 <script>

            var tabObj = new ej.navigations.Tab({});

            tabObj.appendTo('#EJ2Tab');

            function OnSelectViewList() {    

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

                console.log(listview.getSelectedItems());

            }

        </script>

Kind regards, 

Martin

Attachment: Secondhand__Kopie_e04bdeeb.zip

[Sharon Sanchez Selvaraj]

Hi Martin, 

 

Thanks for sharing the sample. 

 

However, we are unable to connect the database to access the provided application. And we had navigated to the page(MarketPages/NewMarket) as mentioned. But the required URL had redirected back to the Login Page(https://localhost:44370/Identity/Account/Login?ReturnUrl=%2FMarketPages%2FNewMarket) as shown below. 

 

 

 

Since we are unable to login without credentials , we have used the same sample code in “HowItWorks” page of your application. 

 

Here, we were able to obtain the instance of the ListView component. 

 

Refer to the following ways in which the instance can be fetched within select event of ListView component.  

 

function OnSelectViewList() { 

        alert("drin") 

        // "this" Returns component instance 

        var listObj = this; 

        console.log(listObj.getSelectedItems()); 

        // Fetch component instance through default class name 

        var list = document.getElementsByClassName("e-listview")[0].ej2_instances[0]; 

        console.log(list.getSelectedItems()); 

        // Fetch component instance through specific CSS class name 

        var listnew = document.getElementsByClassName("e-list-template")[0].ej2_instances[0]; 

        console.log(listnew.getSelectedItems()); 

        // Fetch component instance through Id 

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

        console.log(listview.getSelectedItems()); 

    } 

 

Refer to the below screenshot where similar instances are returned in our end with the above code.  

 

 

 

Refer to your sample which was modified(in “HowItWorks” page) from our end and attached in the following link. 

 

https://www.syncfusion.com/downloads/support/forum/165281/ze/SecondHandWeb-2058265884.zip 

 

Please try out these ways in your end. If the issue still persists, kindly modify the sample given in the “HowItWorks” page, else kindly provide the login details so that it would be helpful for us to assist you promptly.  

 

Regards, 

 

Sharon Sanchez S.            

[Martin Stein]

Hi, I have found the issue!

the thing is, my datamembers in the datasource starts with a capital letter.When I change them to lower case ist works!

For instance, I am using Id, or Username. If my datamodel uses lowercase like id, or username it works.

Do I have to change all my models????

Kind regards,

Martin

[Keerthana Rajendran]

  

Hi Martin,  

Thanks for the update.  

We would like to let you know that the component instance can be fetched based on the exact ListView Id and you need not change your model values for fetching instance. Based on your code, we can see that the instance is fetched during select event of ListView. Within ListView events, you can fetch the instance directly through “this” keyword which will return the corresponding ListView instance.  

  

function OnSelectViewList() {  

        // "this" Returns component instance  

        var listObj = this;  

        console.log(listObj.getSelectedItems());  

    }  

 

Please let us know if you need further assistance.  

Regards, 

Keerthana.