wijlist

The wijlist widget is a UI that allows end-users to select one or more items from a list.

Open the .cshtml file for the View in which you want to display a list. Add a DOM <div> element, such as this:

<div id="list">
</div>

Next, you need to initialize the widget and add items to the array. To do this, you will need to create an array and add it to the list using the setItems method. After that, you will initialize the list and then render the list on the client browser using the renderList method. You can do this by adding the following script to your project:

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var testArray = [{
                label: 'c++',
                value: 'c++'
            }, {
                label: 'java',
                value: 'java'
            }, {
                label: 'php',
                value: 'php'
            },
               {
                label: 'javascript',
                value: 'javascript'
             }];
            var list = $("#list");
            var input = $('#testinput');
            //initialize list
            list.wijlist({});
            list.wijlist('setItems', testArray);
            list.wijlist('renderList');
            list.wijlist('refreshSuperPanel');
        });
    </script>

When you run your project, it will look similar to the following image:

For more information about wijlist, click one of the exteranl links to view our Wijmo wiki documentation: