Getting Started

This section helps to understand the getting started of the ListBox widget with the step-by-step instructions.

Script/CSS reference

Create a new HTML file and include the below code

  • html
  • <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
    
    </body>
    </html>

    Add link to the CSS file from the specific theme folder to your HTML file within the head section. Refer the built-in theme which is mentioned here.

  • html
  •     <meta charset="utf-8" />
        <title>Getting Started - ListBox </title>
        <link href="http://cdn.syncfusion.com/18.3.0.35/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />

    Add links to the CDN Script files with dependencies to the head section.

  • html
  •     <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
        <script src="http://cdn.syncfusion.com/18.3.0.35/js/web/ej.web.all.min.js"></script>

    See Also

    Custom Script Generator

    NOTE

    To reduce the file size further please use GZip compression in your server.

    Create ListBox

    Create UL and LI elements and add in the <body> tag.

    Initialize the ListBox widget as below.

    <div>
                        <ul id="listbox">
                            <li>Audi A4</li>
                            <li>Audi A5</li>
                            <li>Audi A6</li>
                            <li>Audi A7</li>
                            <li>Audi A8</li>
                            <li>BMW 501</li>
                            <li>BMW 502</li>
                            <li>BMW 503</li>
                            <li>Batch</li>
                            <li>BMW 507</li>
                            <li>BMW 3200</li>
                            <li>Cut</li>
                        </ul>
                    </div>
    $(function () {
            $("#listbox").ejListBox();
          });

    Alt text

    Data binding

    We can populate data in the ListBox widget using dataSource and fields properties.

    See Also

    Data binding.

  • html
  • <ul id="listbox"></ul>
    
        <script type="text/javascript">
            jQuery(function ($) {
    
    
                bikeList = [
                    { bikeId: "bk1", bikeName: "Apache RTR" }, 
                    { bikeId: "bk2", bikeName: "CBR 150-R" }, 
                    { bikeId: "bk3", bikeName: "CBZ Xtreme" },
                    { bikeId: "bk4", bikeName: "Discover" }, 
                    { bikeId: "bk5", bikeName: "Dazzler" }, 
                    { bikeId: "bk6", bikeName: "Flame" },
                    { bikeId: "bk7", bikeName: "Fazer" }, 
                    { bikeId: "bk8", bikeName: "FZ-S" }, 
                    { bikeId: "bk9", bikeName: "Pulsar" },
                    { bikeId: "bk10", bikeName: "Shine" }, 
                    { bikeId: "bk11", bikeName: "R15" }, 
                    { bikeId: "bk12", bikeName: "Unicorn" }
                ];
                $("#listbox").ejListBox({
                    dataSource: bikeList,
                    fields: { 
                         id: "bikeId", 
                         text: "bikeName" 
                    }
                });
            });
    
        </script>

    Databinding Listbox

    Selection

    The ListBox widget supports item selection using selectedIndex and selectedIndices property.

    See Also

    Selection

  • javascript
  • jQuery(function ($) {
    
                $("#listbox").ejListBox(
                    {
                        selectedIndex: 2
                    });
            });

    Selection Listbox