Mobile JS

ejmListView

5 Jun 202324 minutes to read

The Essential JavaScript Mobile ListView widget builds interactive ListView interface. This control allows you to select an item from a list-like interface and display a set of data items in different layouts or views. Lists are used for displaying data, data navigation, result lists, and data entry.

Custom Design for HTML ListView control.

$(element).ejmListView()

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView();
    </script>

Requires

module:jQuery
module:ej.core
module:ej.unobtrusive
module: ej.globalize
module:ej.mobile.core
module:ej.data
module:ej.touch

Members

allowSelection `boolean`

Specifies whether the items are selectable or not.

Default Value

true

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-allowselection="false">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ allowSelection: false });
    </script>

checkedIndices `numberarray`

Specifies which items will be checked initially. This property works only for check list feature.

NOTE

To use this property, enableChecklist property must be set as “true”.

Default Value

[]

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-enableChecklist="true" data-ej-checkedindices="[2,3]">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ enableChecklist: true, checkedIndices: [2, 3] });
    </script>

cssClass `string`

Sets the root class for ListView. This cssClass API helps to use custom skinning option for ListView control. By defining the root class using this API, we need to include this root class in CSS.

Default Value

””

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-cssclass="customclass">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <style>
        .customclass .e-m-lv-content{
            color: red !important;
        }
    </style>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ cssClass: "customclass" });
    </script>

    <style>
        .customclass .e-m-lv-content{
            color: red !important;
        }
    </style>

dataSource `jsonarray`

Specifies the data source for ListView rendering. In Listview, ListView items can be given as datasource which consists of JSON array.

NOTE

To render ListView with JSON array, the property fields.text should be set to map the ListView item’s text.

Default Value

[]

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.dbitem" data-ej-fields-text="text"></ul>

    <script>
    window.dbitem =
    [{ "text": "Hot Singles" },
        { "text": "Rising Artists" },
        { "text": "Live Music" },
        { "text": "Best of 2013 So Far" },
        { "text": "100 Albums - $5 Each" },
        { "text": "Hip-Hop and R&amp;B Sale" },
        { "text": "CD Deals" }];
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>

    <script>
        window.dbitem =
        [{ "text": "Hot Singles" },
            { "text": "Rising Artists" },
            { "text": "Live Music" },
            { "text": "Best of 2013 So Far" },
            { "text": "100 Albums - $5 Each" },
            { "text": "Hip-Hop and R&amp;B Sale" },
            { "text": "CD Deals" }];

        $("#listview").ejmListView({ dataSource: window.dbitem, fields: { text: "text" } });
    </script>

deleteMode `enum`

This property enables delete option for each ListView item when swipe left happens to the ListView item. See DeleteMode.

Default Value

“none”

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-deletemode="swipe">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ deleteMode: "swipe"});
    </script>

enableChecklist `boolean`

Specifies whether to enable check mark for the item.

Default Value

false

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-enableChecklist="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ enableChecklist: true });
    </script>

enabled `boolean`

Specifies whether the control is enabled or disabled.

Default Value

true

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-enabled="false">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ enabled: false });
    </script>

enablePersistence `boolean`

Current model value to browser cookies for state maintains. While refresh the ListView control page retains the model value apply from browser cookies.

Default Value

false

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-enablepersistence="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ enablePersistence: true });
    </script>

enableRippleEffect `boolean`

Specifies whether to enable or disable ripple effect.

Default Value

ej.isAndroid() ? true : false

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-enablerippleeffect="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ enableRippleEffect: true });
    </script>

fields

Specifies the field settings to map the datasource.

fields.allowSelection `boolean`

Specifies whether the ListView individual item is selectable or not.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.dbitem" data-ej-fields-text="text" data-ej-fields-allowselection="selection"></ul>

    <script>
        window.dbitem =
            [{ "text": "Hot Singles", selection: false },
                { "text": "Rising Artists" },
                { "text": "Live Music", selection: false },
                { "text": "Best of 2013 So Far", selection: false },
                { "text": "100 Albums - $5 Each" },
                { "text": "Hip-Hop and R&amp;B Sale" },
                { "text": "CD Deals" }];
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>
    <script>
        window.dbitem =
            [{ "text": "Hot Singles", selection: false },
                { "text": "Rising Artists" },
                { "text": "Live Music", selection: false },
                { "text": "Best of 2013 So Far", selection: false },
                { "text": "100 Albums - $5 Each" },
                { "text": "Hip-Hop and R&amp;B Sale" },
                { "text": "CD Deals" }];
    </script>

    <script>
        $("#listview").ejmListView({ dataSource: window.dbitem, fields: { text: "text", allowSelection: "selection" } });
    </script>

fields.badge `jsonobject`

Maps badge field from the data source. Used to set value and maxValue for each item.

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.dbitem" data-ej-fields-text="text" data-ej-fields-badge-value="badgevalue" data-ej-fields-badge-maxvalue="badgemaxvalue"></ul>

    <script>
        window.dbitem =
            [{ "text": "Hot Singles", "badgevalue": 23 },
                { "text": "Rising Artists" },
                { "text": "Live Music", "badgevalue": 88 },
                { "text": "Best of 2013 So Far", "badgevalue": 123, "badgemaxvalue": 88 },
                { "text": "100 Albums - $5 Each" },
                { "text": "Hip-Hop and R&amp;B Sale" },
                { "text": "CD Deals" }];
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>
    <script>
        window.dbitem =
            [{ "text": "Hot Singles", "badgevalue": 23 },
                { "text": "Rising Artists" },
                { "text": "Live Music", "badgevalue": 88 },
                { "text": "Best of 2013 So Far", "badgevalue": 123, "badgemaxvalue": 88 },
                { "text": "100 Albums - $5 Each" },
                { "text": "Hip-Hop and R&amp;B Sale" },
                { "text": "CD Deals" }];

        $("#listview").ejmListView({ dataSource: window.dbitem, fields: { text: "text", badge: { value: "badgevalue", maxValue: "badgemaxvalue" } } });
    </script>

fields.checkBy `string`

Maps the check status for each item in ListView initially. This is an optional property used only for check list.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-enablechecklist="true" data-ej-datasource="window.dbitem" data-ej-fields-text="text" data-ej-fields-checkby="check"></ul>

    <script>
    window.dbitem =
        [{ 'text': 'Hot Singles', 'check': true },
            { 'text': 'Rising Artists' },
            { 'text': 'Live Music', 'check': true },
            { 'text': 'Best of 2013 So Far', 'check': true },
            { 'text': '100 Albums - $5 Each' },
            { 'text': 'Hip-Hop and R&amp;B Sale' },
            { 'text': 'CD Deals' }];
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>
    <script>
        window.dbitem =
        [{ 'text': 'Hot Singles', 'check': true },
            { 'text': 'Rising Artists' },
            { 'text': 'Live Music', 'check': true },
            { 'text': 'Best of 2013 So Far', 'check': true },
            { 'text': '100 Albums - $5 Each' },
            { 'text': 'Hip-Hop and R&amp;B Sale' },
            { 'text': 'CD Deals' }];
    </script>

    <script>
        $("#listview").ejmListView({ enableCheckList: true, dataSource: window.dbitem, fields: { text: "text", checkBy: "check" } });
    </script>

fields.enabled `boolean`

Maps enabled field from the data source. This property ensures whether the item is enabled or disabled initially.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.dbitem" data-ej-fields-text="text" data-ej-fields-enabled="enabled"></ul>

    <script>
        window.dbitem =
            [{ "text": "Hot Singles", enabled: false },
                { "text": "Rising Artists" },
                { "text": "Live Music", enabled: false },
                { "text": "Best of 2013 So Far", enabled: false },
                { "text": "100 Albums - $5 Each" },
                { "text": "Hip-Hop and R&amp;B Sale" },
                { "text": "CD Deals" }];

    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>
    <script>
        window.dbitem =
            [{ "text": "Hot Singles", enabled: false },
                { "text": "Rising Artists" },
                { "text": "Live Music", enabled: false },
                { "text": "Best of 2013 So Far", enabled: false },
                { "text": "100 Albums - $5 Each" },
                { "text": "Hip-Hop and R&amp;B Sale" },
                { "text": "CD Deals" }];

    </script>

    <script>
        $("#listview").ejmListView({ dataSource: window.dbitem, fields: { text: "text", enabled: "enabled" } });
    </script>

fields.groupBy `string`

Maps the group name in which each ListView item belongs to in ListView. This is an optional property used only for grouped list.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.dbitem" data-ej-fields-text="text" data-ej-fields-groupby="group"></ul>

    <script>
        window.dbitem =
        [{ "text": "Hot Singles", "group": "Likes" },
            { "text": "Rising Artists", "group": "Likes" },
            { "text": "Live Music", "group": "Likes" },
            { "text": "Best of 2013 So Far", "group": "Dislikes" },
            { "text": "100 Albums - $5 Each", "group": "Likes" },
            { "text": "Hip-Hop and R&amp;B Sale", "group": "Dislikes" },
            { "text": "CD Deals", "group": "Dislikes" }];
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>

    <script>
        window.dbitem =
        [{ "text": "Hot Singles", "group": "Likes" },
            { "text": "Rising Artists", "group": "Likes" },
            { "text": "Live Music", "group": "Likes" },
            { "text": "Best of 2013 So Far", "group": "Dislikes" },
            { "text": "100 Albums - $5 Each", "group": "Likes" },
            { "text": "Hip-Hop and R&amp;B Sale", "group": "Dislikes" },
            { "text": "CD Deals", "group": "Dislikes" }];

        $("#listview").ejmListView({ dataSource: window.dbitem, fields: { text: "text", groupBy: "group" } });
    </script>

fields.href `string`

Maps href field from the data source. href is set to the navigation URL of each item.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.dbitem" data-ej-fields-text="text" data-ej-fields-href="href"></ul>

    <script>
        window.dbitem =
            [{ "text": "Hot Singles", href: "inner.html" },
                { "text": "Rising Artists" },
                { "text": "Live Music", href: "inner2.html" },
                { "text": "Best of 2013 So Far", href: "inner3.html" },
                { "text": "100 Albums - $5 Each" },
                { "text": "Hip-Hop and R&amp;B Sale" },
                { "text": "CD Deals" }];

    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>
    <script>
        window.dbitem =
            [{ "text": "Hot Singles", href: "inner.html" },
                { "text": "Rising Artists" },
                { "text": "Live Music", href: "inner2.html" },
                { "text": "Best of 2013 So Far", href: "inner3.html" },
                { "text": "100 Albums - $5 Each" },
                { "text": "Hip-Hop and R&amp;B Sale" },
                { "text": "CD Deals" }];

    </script>

    <script>
        $("#listview").ejmListView({ dataSource: window.dbitem, fields: { text: "text", href: "href" } });
    </script>

fields.image `string`

Maps image field from the data source. Image given by the image will be rendered at the left of ListView item’s text.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.listData" data-ej-fields-text="text" data-ej-fields-image="image" ></ul>
    <script>
        window.listData = [{ text: "Australia", image: "Australia.png" },
                           { text: "Brazil", image: "Brazil.png" },
                           { text: "China", image: "china.png" },
                           { text: "India", image: "India.png" },
                           { text: "Spain", image: "Spain.png" }];
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>
    <script>
        window.listData = [{ text: "Australia", image: "Australia.png" },
                           { text: "Brazil", image: "Brazil.png" },
                           { text: "China", image: "china.png" },
                           { text: "India", image: "India.png" },
                           { text: "Spain", image: "Spain.png" }];

        $("#listview").ejmListView({ dataSource: window.listData, fields: { text: "text", image: "image" } });
    </script>

fields.text `string`

Maps text field from the data source. This is a required property while rendering the ListView from data source.

NOTE

Since field mapping depends on data source, the dataSource property must be set with a JSON data.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.dbitem" data-ej-fields-text="text"></ul>

    <script>
    window.dbitem =
    [{ "text": "Hot Singles" },
        { "text": "Rising Artists" },
        { "text": "Live Music" },
        { "text": "Best of 2013 So Far" },
        { "text": "100 Albums - $5 Each" },
        { "text": "Hip-Hop and R&amp;B Sale" },
        { "text": "CD Deals" }];
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>

    <script>
        window.dbitem =
        [{ "text": "Hot Singles" },
            { "text": "Rising Artists" },
            { "text": "Live Music" },
            { "text": "Best of 2013 So Far" },
            { "text": "100 Albums - $5 Each" },
            { "text": "Hip-Hop and R&amp;B Sale" },
            { "text": "CD Deals" }];

        $("#listview").ejmListView({ dataSource: window.dbitem, fields: { text: "text" } });
    </script>

fields.value `string`

Maps the value for each option from the data source. This is an optional property.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.dbitem" data-ej-fields-text="text" data-ej-fields-value="text"></ul>

    <script>
    window.dbitem =
    [{ "text": "Hot Singles" },
        { "text": "Rising Artists" },
        { "text": "Live Music" },
        { "text": "Best of 2013 So Far" },
        { "text": "100 Albums - $5 Each" },
        { "text": "Hip-Hop and R&amp;B Sale" },
        { "text": "CD Deals" }];
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>

    <script>
        window.dbitem =
        [{ "text": "Hot Singles" },
            { "text": "Rising Artists" },
            { "text": "Live Music" },
            { "text": "Best of 2013 So Far" },
            { "text": "100 Albums - $5 Each" },
            { "text": "Hip-Hop and R&amp;B Sale" },
            { "text": "CD Deals" }];

        $("#listview").ejmListView({ dataSource: window.dbitem, fields: { text: "text", value: "text" } });
    </script>

itemsCount `number`

Specifies how many items need to render initially from remote data source.

NOTE

This property works based on remote data source, hence the dataSource and fields.text properties should be set properly while rendering.

Default Value

0

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.listData" data-ej-fields-text="ContactName" data-ej-query="ej.Query()" data-ej-itemscount="8"></ul>

    <script>
        window.listData = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
        });
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>

    <script>
        window.listData = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
        });

        $("#listview").ejmListView({ dataSource: window.listData, fields: { text: "ContactName" }, query: "ej.Query()", itemsCount: 8 });
    </script>

items `jsonarray`

Specifies the ListView items as an array of JSON objects.

Default Value

[]

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-items="[{ 'text': 'Hot Singles' }, { 'text': 'Rising Artists' }, { 'text': 'Live Music' }, { 'text': 'Best of 2013 So Far' }, { 'text': '100 Albums - $5 Each' }, { 'text': 'Hip-Hop and R&amp;B Sale' }, { 'text': 'CD Deals' }]"></ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>

    <script>
        $("#listview").ejmListView({ items: [{ 'text': 'Hot Singles' }, { 'text': 'Rising Artists' }, { 'text': 'Live Music' }, { 'text': 'Best of 2013 So Far' }, { 'text': '100 Albums - $5 Each' }, { 'text': 'Hip-Hop and R&amp;B Sale' }, { 'text': 'CD Deals' }] });
    </script>

persistSelection `boolean`

Specifies whether to retain the selection of the ListView item.

Default Value

false

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-persistselection="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ persistSelection: true });
    </script>

query `string`

This property used to filter data from remote data source.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.listData" data-ej-fields-text="ContactName" data-ej-query="ej.Query().take(10)"></ul>

    <script>
        window.listData = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
        });
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>

    <script>
        window.listData = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
        });

        $("#listview").ejmListView({ dataSource: window.listData, fields: { text: "ContactName" }, query: "ej.Query().take(10)" });
    </script>

renderMode `enum`

Specifies the rendering mode of the ListView control. See RenderMode

Default Value

auto

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-rendermode="android">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ renderMode: "android" });
    </script>

selectedIndex `number`

Specifies which item to be selected initially for the ListView.

NOTE

To show the selected item as active, persistSelection property must be set as true.

Default Value

null

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-persistselection="true" data-ej-selectedindex="2">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ selectedIndex: 2, persistSelection: true  });
    </script>

templateId `boolean`

Specifies ID of the element contains template contents.

NOTE

For ListView template rendering, jsrender.js script required.

Default Value

false

Example

<!-- Unobtrusive way of rendering -->
    <ul data-role="ejmlistview" data-ej-datasource="window.listData" data-ej-templateid="templatecontent">
    </ul>    

    <script id="templatecontent" type="text/x-jsrender">
        <div class="contentdiv">
            <span class="name"></span> <span class="designation"></span>
        </div>
    </script>

    <script type="text/javascript">
        window.listData =
        [{ "Name": "Brooke", "Designation": "HR Assistant" },
        { "Name": "Claire", "Designation": "HR Manager" },
        { "Name": "Erik", "Designation": "Training Specialist" },
        { "Name": "Grace", "Designation": "Development Manager" },
        { "Name": "Jacob", "Designation": "Recruitment Manager" }];
    </script> 

    <style>
        .name {
            margin-left: 15px;
        }

        .designation {
            font-size: 13px;
            float: right;
            margin-right: 15px;
        }
    </style>

<!-- Obtrusive way of rendering -->
    <ul id="listview"></ul>

    <script id="templatecontent" type="text/x-jsrender">
        <div class="contentdiv">
            <span class="name"></span> <span class="designation"></span>
        </div>
    </script>

    <script type="text/javascript">
        window.listData =
        [{ "Name": "Brooke", "Designation": "HR Assistant" },
        { "Name": "Claire", "Designation": "HR Manager" },
        { "Name": "Erik", "Designation": "Training Specialist" },
        { "Name": "Grace", "Designation": "Development Manager" },
        { "Name": "Jacob", "Designation": "Recruitment Manager" }];

        $("#listview").ejmListView({ dataSource: window.listData, templateId: "templatecontent"  });

    </script> 

    <style>
        .name {
            margin-left: 15px;
        }

        .designation {
            font-size: 13px;
            float: right;
            margin-right: 15px;
        }
    </style>

windows

Section for windows mode specific functionalities.

windows.preventSkew `boolean`

Specifies whether to prevent skewing behavior in windows mode.

Default Value

false

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-rendermode="windows" data-ej-windows-preventskew="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ renderMode: "windows", windows: { preventSkew: true } });
    </script>

Methods

addItem()

To add item in the given index.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Add item at index 2" data-ej-touchend="add" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function add() {
            $("#listview").ejmListView("addItem", "New Item", 2);
        }
    </script>

append()

To append new items with existing items.

Example

<script>
        window.listData = [{ name: "Charlotte Cooper" }, { name: "Shelley Burke" },
                    { name: "Regina Murphy" }, { name: "Yoshi Nagase" }, { name: "Antonio del Valle Saavedra" }]
        window.listNewData = [{ name: "Charlotte Cooper" }, { name: "Shelley Burke" },
                    { name: "Regina Murphy" }, { name: "Yoshi Nagase" }, { name: "Antonio del Valle Saavedra" },
                    { name: "Mayumi Ohno" }, { name: "Ian Devling" }]
    </script>

    <input data-role="ejmbutton" type="button" data-ej-text="Append" data-ej-touchend="append" />
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.listData" data-ej-fields-text="name" data-ej-itemscount="3"></ul>

    <script>
        function append() {
            $("#listview").ejmListView("append", window.listNewData);
        }
    </script>

checkAll()

To check all items in the ListView.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Check all items" data-ej-touchend="check" />
    <ul id="listview" data-role="ejmlistview" data-ej-enablechecklist="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function check() {
            $("#listview").ejmListView("checkAll");
        }
    </script>

checkItemsByIndex()

To check item in the given index.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Check item at index 2" data-ej-touchend="check" />
    <ul id="listview" data-role="ejmlistview" data-ej-enablechecklist="true" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function check() {
            $("#listview").ejmListView("checkItemsByIndex", 2);
        }
    </script>

checkItemsByIndices()

To check items in the given array of indices.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Check items at indices 2,3" data-ej-touchend="check" />
    <ul id="listview" data-role="ejmlistview" data-ej-enablechecklist="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function check() {
            $("#listview").ejmListView("checkItemsByIndices", [2,3]);
        }
    </script>

deleteItemByIndex()

To delete an item in the given index.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Delete item at index 2" data-ej-touchend="deleteItem" />
    <ul id="listview" data-role="ejmlistview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function deleteItem() {
            var index = $("#listview").ejmListView("deleteItemByIndex", 2);
            alert("Received index is: '" + index + "'");
        }
    </script>

deleteItemByText()

To delete an item which having the text same as given string.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Delete item with text ‘Abstract’" data-ej-touchend="deleteItem" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function deleteItem() {
            $("#listview").ejmListView("deleteItemByText", "Abstract");
        }
    </script>

deselectItem()

To deselect the item which is already selected.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Deselect item" data-ej-touchend="deselect" />
    <ul id="listview" data-role="ejmlistview" data-ej-selectedindex="2" data-ej-persistselection="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function deselect() {
            $("#listview").ejmListView("deselectItem");
        }
    </script>

disable()

To disable the ListView control.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Disable ListView" data-ej-touchend="disable" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function disable() {
            $("#listview").ejmListView("disable");
        }
    </script>

disableAll()

To disable all items in the ListView.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Disable all items" data-ej-touchend="disable" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function disable() {
            $("#listview").ejmListView("disableAll");
        }
    </script>

disableItemByIndex()

To disable item in the given index.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Disable item at index 2" data-ej-touchend="disable" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function disable() {
            $("#listview").ejmListView("disableItemByIndex", 2);
        }
    </script>

disableItemsByIndices()

To disable items in the given array of indices.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Disable items at indices 2,3" data-ej-touchend="disable" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function disable() {
            $("#listview").ejmListView("disableItemsByIndices", [2,3]);
        }
    </script>

enable()

To enable the ListView control.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Enable ListView" data-ej-touchend="enable" />
    <ul id="listview" data-role="ejmlistview" data-ej-enabled="false">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function enable() {
            $("#listview").ejmListView("enable");
        }
    </script>

enableAll()

To enable all items in the ListView.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Enable all items" data-ej-touchend="enable" />
    <ul id="listview" data-role="ejmlistview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        $(function () {
            $("#listview").ejmListView("disableAll");
        });
        function enable() {
            $("#listview").ejmListView("enableAll");
        }
    </script>

enableItemByIndex()

To enable item in the given index.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Enable item at index 2" data-ej-touchend="enable" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums" data-ej-enabled="false" ></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function enable() {
            $("#listview").ejmListView("enableItemByIndex", 2);
        }
    </script>

enableItemsByIndices()

To enable items in the given array of indices.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Enable items at indices 2,3" data-ej-touchend="enable" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums" data-ej-enabled="false"></li>
        <li data-ej-text="Creative Acrylic" data-ej-enabled="false"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function enable() {
            $("#listview").ejmListView("enableItemsByIndices", [2,3]);
        }
    </script>

getIndexByText()

To get the index of item which having same text as given string.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Get index of item with text ‘Abstract’" data-ej-touchend="get" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function get() {
            var index = $("#listview").ejmListView("getIndexByText", "Abstract");
            alert("Received index is: '" + index + "'");
        }
    </script>

getItemByIndex()

To get the item in the given index.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Get item at index 2" data-ej-touchend="get" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function get() {
            var item = $("#listview").ejmListView("getItemByIndex", 2);
            alert("Received item is: '" + $(item).text() + "'");
        }
    </script>

getItemByText()

To get the item which having same text as given string.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Get item with text ‘Abstract’" data-ej-touchend="get" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function get() {
            var item = $("#listview").ejmListView("getItemByText", "Abstract");
            alert("Received item is: '" + $(item).text() + "'");
        }
    </script>

getTextByIndex()

To get the text of the item in the given index.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Get 2nd item’s Text" data-ej-touchend="get" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function get() {
            var text = $("#listview").ejmListView("getTextByIndex", 2);
            alert("Received text is: '" + text + "'");
        }
    </script>

selectItemByIndex()

To select item in the given index.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Select item at index 2" data-ej-touchend="select" />
    <ul id="listview" data-role="ejmlistview" data-ej-persistselection="true" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function select() {
            $("#listview").ejmListView("selectItemByIndex", 2);
        }
    </script>

setBadge()

To set badge value for an item.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Set badge value for item at index 2" data-ej-touchend="set" />
    <ul id="listview" data-role="ejmlistview" >
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function set() {
            $("#listview").ejmListView("setBadge", 2, 33);
        }
    </script>

uncheckAll()

To uncheck all items in the ListView.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Uncheck all items" data-ej-touchend="uncheck" />
    <ul id="listview" data-role="ejmlistview" data-ej-enablechecklist="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        $(function () {
            $("#listview").ejmListView("checkAll");
        });
        function uncheck() {
            $("#listview").ejmListView("uncheckAll");
        }
    </script>

uncheckItemsByIndex()

To uncheck item in the given index.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Uncheck item at index 2" data-ej-touchend="uncheck" />
    <ul id="listview" data-role="ejmlistview" data-ej-enablechecklist="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums" data-ej-checkby="true"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        function uncheck() {
            $("#listview").ejmListView("uncheckItemsByIndex", 2);
        }
    </script>

uncheckItemsByIndices()

To uncheck items in the given array of indices.

Example

<input data-role="ejmbutton" type="button" data-ej-text="Uncheck items at indices 2,3" data-ej-touchend="uncheck" />
    <ul id="listview" data-role="ejmlistview" data-ej-enablechecklist="true">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>
    <script>
        $(function () {
            $("#listview").ejmListView("checkItemsByIndices", [2,3]);
        });
        function uncheck() {
            $("#listview").ejmListView("uncheckItemsByIndices", [2, 3]);
        }
    </script>

Events

actionComplete

Event triggers after the AJAX content loaded completely.

Name

Type

Description

argument

Object

Event parameters from ListView.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.

Example

<script>
        window.listData = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
        });
    </script>

    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.listData" data-ej-fields-text="ContactName" data-ej-itemscount="5" data-ej-actioncomplete="complete"></ul>

    <script>
        function complete(args) {
            //handle the event
        }
    </script>

actionFailure

Event triggers when the AJAX request failed.

Name

Type

Description

argument

Object

Event parameters from ListView.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
errorThrown	Object	Returns the error thrown in the AJAX post.
textStatus	Object	Returns the status.
item	object	Returns the current ListView item.
text	string	Returns the current item text.
index	number	Returns the current item index.

Example

<script>
        window.listData = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/North.svc/Suppliers"
        });
    </script>

    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.listData" data-ej-fields-text="ContactName" data-ej-itemscount="5" data-ej-actionfailure="failure"></ul>

    <script>
        function failure(args) {
            //handle the event
        }
    </script>

actionSuccess

Event triggers after the AJAX content loaded successfully.

Name

Type

Description

argument

Object

Event parameters from ListView.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.

Example

<script>
        window.listData = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
        });
    </script>

    <input data-role="ejmbutton" type="button" data-ej-text="Append" data-ej-touchend="append" />
    <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.listData" data-ej-fields-text="ContactName" data-ej-itemscount="5" data-ej-actionsuccess="success"></ul>

    <script>
        function append() {
            $("#listview").ejmListView("append", window.listData);
        }
        function success(args) {
            //handle the event
        }
    </script>

afterDelete

Event triggers after an item deleted in ListView.

Name

Type

Description

argument

Object

Event parameters from ListView.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
item	object	Returns the current ListView item.
text	string	Returns the current item text.
index	number	Returns the current item index.
isChecked	boolean	Returns the current item is checked or not.
isInteraction	boolean	Returns the current item is intractable or not.
isSelected	boolean	Returns the current item is selected or not.

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-deletemode="swipe" data-ej-afterdelete="afterdelete">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        function afterdelete(args) {
            //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ deleteMode: "swipe", afterDelete: "afterdelete" });
        function afterdelete(args) {
            //handle the event
        }
    </script>

beforeDelete

Event triggers before an item deleted in ListView.

Name

Type

Description

argument

Object

Event parameters from ListView.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
item	object	Returns the current ListView item.
text	string	Returns the current item text.
index	number	Returns the current item index.
isChecked	boolean	Returns the current item is checked or not.
isInteraction	boolean	Returns the current item is intractable or not.
isSelected	boolean	Returns the current item is selected or not.

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-deletemode="swipe" data-ej-beforedelete="beforedelete">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        function beforedelete(args) {
            //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ deleteMode: "swipe", beforeDelete: "beforedelete" });
        function beforedelete(args) {
            //handle the event
        }
    </script>

select

Event triggers after an item selected in ListView.

Name

Type

Description

argument

Object

Event parameters from ListView.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
item	object	Returns the curent ListView item.
text	string	Returns the current item text.
index	number	Returns the current item index.
isChecked	boolean	Returns the current item is checked or not.
isInteraction	boolean	Returns the current item is intractable or not.
isSelected	boolean	Returns the current item is selected or not.

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-select="select">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        function select(args) {
            //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ select: "select" });
        function select(args) {
            //handle the event
        }
    </script>

touchEnd

Event triggers when touch end happens on the item.

Name

Type

Description

argument

Object

Event parameters from ListView.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
item	object	Returns the current ListView item.
text	string	Returns the current item text.
index	number	Returns the current item index.
isChecked	boolean	Returns the current item is checked or not.
isInteraction	boolean	Returns the current item is intractable or not.
isSelected	boolean	Returns the current item is selected or not.

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-touchend="touchend">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        function touchend(args) {
            //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ touchEnd: "touchend" });
        function touchend(args) {
            //handle the event
        }
    </script>

touchStart

Event triggers when touch start happens on the item.

Name

Type

Description

argument

Object

Event parameters from ListView.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
item	object	Returns the current ListView item.
text	string	Returns the current item text.
index	number	Returns the current item index.
isChecked	boolean	Returns the current item is checked or not.
isInteraction	boolean	Returns the current item is intractable or not.
isSelected	boolean	Returns the current item is selected or not.

Example

<!-- Unobtrusive way of rendering -->
    <ul id="listview" data-role="ejmlistview" data-ej-touchstart="touchstart">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        function touchstart(args) {
            //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
    <ul id="listview">
        <li data-ej-text="Artwork"></li>
        <li data-ej-text="Abstract"></li>
        <li data-ej-text="2 Acrylic Mediums"></li>
        <li data-ej-text="Creative Acrylic"></li>
        <li data-ej-text="Modern Painting"></li>
        <li data-ej-text="Canvas Art"></li>
        <li data-ej-text="Black white"></li>
        <li data-ej-text="Children"></li>
        <li data-ej-text="Preschool Crafts"></li>
        <li data-ej-text="School-age Crafts"></li>
    </ul>

    <script>
        $("#listview").ejmListView({ touchStart: "touchstart" });
        function touchstart(args) {
            //handle the event
        }
    </script>

undefined