React-samples/src/listview/checklist.html at master · SyncfusionExamples/React-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div class="col-lg-12 control-section">
    <div id="flat-list">
        <h4>Flat List</h4>

    <!-- ListView element -->
    <div id="listview-def" tabindex="1">
    </div>
    </div>
    <div id="group-list">
    <h4>Group List</h4>

    <!-- Group ListView element -->
    <div id="listview-grp" tabindex="1">
    </div>
    </div>

    <div id="action-description">
        <p>This sample demonstrates the checkbox functionalities of the ListView. Click multiple list item to check or uncheck the items.</p>
    </div>

    <div id="description">
        <p>ListView component support checkbox feature which used to select multiple items from the list. This feature can be
		enabled by the property <code>showCheckBox</code>.</p>

        <p>In this sample, the checkbox is enabled on default list and group list.</p>
    </div>
</div>
<style>
    #listview-def,#listview-grp {
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
    .control-section{
        overflow: auto;
    }
    #flat-list,
    #group-list {
        width: 49%;
        margin: auto;
        margin-bottom: 15px;
    }

    #flat-list h4, #group-list h4 {
        padding-left: 16px;
    }
    #flat-list {
        float: left;
    }

    #group-list {
        float: right;
    }

    @media screen and (max-width: 590px) {
        #flat-list,
        #group-list {
            width: 100%;
        }
    }
</style>