How to?

29 Mar 20197 minutes to read

How to get the selected/checked values?

Single selection

Enable the property PersistSelection in order to use selection in ListView. Then use the getActiveItemText method take the selected active text.

Multiple selection

For multi selection i.e. when using the EnableCheckMark property, we need to use the getCheckedItemsText method to take all the checked items.

Resolve ListView rendering order issue in IE

In Internet Explorer and Microsoft Edge, the sorting order of sub-child elements will be changed when compared to other browsers. To resolve this issue, set ej.support.stableSort to false in script section of sample. Refer to the following code.

HTML

<div id="defaultListView">
        <ul>
            <li data-ej-text="Discover Music">
                <ul>
                    <li data-ej-text="Hot Singles"></li>
                    <li data-ej-text="Rising Artists"></li>
                    <li data-ej-text="Live Music"></li>
                    <li data-ej-text="Best of 2013 So Far"></li>
                </ul>
            </li>
            <li data-ej-text="Sales and Events">
                <ul>
                    <li data-ej-text="100 Albums - $5 Each"></li>
                    <li data-ej-text="Hip-Hop and R&B Sale"></li>
                    <li data-ej-text="CD Deals"></li>
                </ul>
            </li>
            <li data-ej-text="Categories">
                <ul>
                    <li data-ej-text="Songs"></li>
                    <li data-ej-text="Bestselling Albums"></li>
                    <li data-ej-text="New Releases"></li>
                    <li data-ej-text="Bestselling Songs"></li>
                </ul>
            </li>
            <li data-ej-text="MP3 Albums">
                <ul>
                    <li data-ej-text="Rock"></li>
                    <li data-ej-text="Gospel"></li>
                    <li data-ej-text="Latin Music"></li>
                    <li data-ej-text="Jazz"></li>
                </ul>
            </li>
            <li data-ej-text="More in Music">
                <ul>
                    <li data-ej-text="Music Trade-In"></li>
                    <li data-ej-text="Redeem a Gift Card"></li>
                    <li data-ej-text="Branded T-Shirts"></li>
                    <li data-ej-text="Mobile MVC"></li>

                </ul>
            </li>
        </ul>
    </div>

Add the following script in your code.

JAVASCRIPT

ej.support.stableSort = false;
        $(function () {
            $("#defaultListView").ejListView({ width: 300 });
        });

Disable an item while assigning dataSource

Selection of a particular list item can be prevented using the preventSelection field of ejListView. To change the item to disable state, add the e-disable class for items (whose selection are prevented) during initial rendering.

Refer to the following code.

HTML

<div id="default" >
      </div>

JAVASCRIPT

window.item = [{ text: "Discover Music" , preventSelection: true},
            { text: "Sales and Events" },
            { text: "Categories" , preventSelection: true},
            { text: "MP3 Albums" },
            {text: "More in Music" }];
        $(function () {
          $("#default").ejListView({showHeader: true, headerTitle: "Favorite", width:400, dataSource: item, enableGroupList: false });
          $("[data-preventselection*=true]").addClass("e-disable"); 
       
        });

Refer to the sample here