d='content'>
        <script type="text/javascript">
            $(document).ready(function () {           
                var url = "../sampledata/customers.txt";
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName' },
                        { name: 'ContactName' }
                    ],
                    id: 'id',
                    url: url,
                    async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                // Create a jqxDropDownList
                $("#jqxWidget").jqxDropDownList({ checkboxes: true, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25});
                $("#jqxWidget").jqxDropDownList('checkIndex', 0);
                // subscribe to the checkChange event.
                $("#jqxWidget").on('checkChange', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);
                            var checkedelement = $("<div></div>");
                            checkedelement.text("Checked: " + item.checked);

                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                            $("#selectionlog").append(checkedelement);

                            var items = $("#jqxWidget").jqxDropDownList('getCheckedItems');
                            var checkedItems = "";
                            $.each(items, function (index) {
                                checkedItems += this.label + ", ";                          
                            });
                            $("#checkedItemsLog").text(checkedItems);
                        }
                    }
                });
            });
        </script>
        <div>
            <div style='float: left;' id='jqxWidget'>
            </div>
            <div style="float: left; margin-left: 20px; font-size: 13px; font-family: Verdana;">
                <div id="selectionlog"></div>
                <div style='max-width: 300px; margin-top: 20px;' id="checkedItemsLog"></div>
            </div>
          
        </div>
    </div>
</body>
</html>