LIDOR SYSTEMS

Advanced User Interface Controls and Components

Items with Custom CheckBox in Angular ListView

Created: 18 January 2018

Each item in IntegralUI ListView component can display custom content of HTML elements or other Angular components. In case of a checkbox, you can use the standard input element or for easy customization the span element.

ListView component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

In this example, ListView has vertical layout, where each item contains a checkbox, large icon and a label. CheckBox is aligned on the right side of item space, while icon and label are centered. Whenever the item's checkbox is clicked, the item becomes selected or highlighted.

How to Display a CheckBox in ListView Items

First, you need to determine what kind of element or a component you will use for a CheckBox. In this example, the standard HTML span element is used, where it is customized via CSS classes so that it appears like a checkbox.

Once you have a checkbox element ready, you only need to add it to the item template. In this case, the item template consists of:

  • checkbox on the right side
  • large icon in the middle
  • a label on the bottom
<iui-listview #listview [appRef]="applicationRef" [items]="items" [allowDrag]="true" [controlStyle]="listStyle" [scrollMode]="scrollType" [virtualMode]="true" [itemSize]="{ width: 144, height: 144 }">
    <ng-template let-item>
        <div class="listview-cboxitm-item">
            <span class="listview-cboxitm-checkbox" [ngClass]="{ 'listview-cboxitm-checkbox-true': item.checked }" (mousedown)="checkBoxClicked($event, item)"></span><br/>
            <div align="center">
                <div class="listview-cboxitm-icon-large">
                    <span class="listview-cboxitm-icons {{item.icon}}"></span>
                </div><br />
                <span class="listview-cboxitm-title-large">{{item.text}}</span>
            </div>
        </div>
    </ng-template>
</iui-listview>

                            
.listview-cboxitm-normal
{
    width: 650px;
    height: 400px;
}
.listview-cboxitm-normal .iui-listitem
{
    border: thin solid #e5e5e5;
}
.listview-cboxitm-item
{
    color: black;
    overflow: hidden;
    padding: 3px 0;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.listview-cboxitm-checkbox
{
    background: url(app/integralui/resources/checkbox/checkbox-unchecked-4.png) no-repeat 0 0;
    display: inline-block;
    float: right;
    padding: 0;
    margin: 4px 7px 0 7px;
    width: 16px;
    height: 16px;
}
.listview-cboxitm-checkbox-true
{
    background: url(app/integralui/resources/checkbox/checkbox-checked-4.png) no-repeat 0 0;
}
.listview-cboxitm-title-large
{
    color: black;
    display: inline-block;
    overflow: hidden;
    padding: 3px 0;
    text-overflow: ellipsis;
    width: 100%;
    vertical-align: middle;
}
.listview-cboxitm-icon-large
{
    margin: 10px auto;
}
.listview-cboxitm-icons
{
    background: url(app/integralui/resources/movie-genres.png) no-repeat 0 0;
    display: inline-block;
    padding: 0;
    margin: 3px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.action
{
    background-position: 0 0;
}
.adventure
{
    background-position: -24px 0;
}
.comedy
{
    background-position: -48px 0;
}
.action
{
    background-position: -72px 0;
}
.sci-fi
{
    background-position: -120px 0;
}
.biography
{
    background-position: 0 -24px;
}
.horror
{
    background-position: -24px -24px;
}
.drama
{
    background-position: -48px -24px;
}
.music
{
    background-position: -72px -24px;
}
.romance
{
    background-position: -96px -24px;
}
.western
{
    background-position: -120px -24px;
} 
                            

Depending on the item checked field value, a different CSS class is used to alter the appearance of the span element during run-time. If the item is checked, an icon with check mark is used, while when unchecked an icon showing empty rectangle is applied.

How to Handle Events from Item CheckBox

The above code only displays a checkbox in each item space. However, it is still not fully functional. For this purpose, you need to handle the mousedown event where you will change the value of item checked field.

public checkBoxClicked(e: any, item: any){
    if (item){
        let currentValue = item.checked == true ? true : false;
        item.checked = !currentValue;
    }

    e.stopPropagation();
}                            

To avoid selection when checkbox is clicked, just call the stopPropagation method.This will make sure that only the checkbox value changes, without further proceeding with default functionality from within the ListView control.

Note Instead of mousedown event, you can handle the click event, but we have noticed that it doesn't work well with ng-template. For this purpose, the mousedown event is more appropriate.

Conclusion

Adding a CheckBox in ListView items in Angular is very simple. You only to add the checkbox element or component to the item template, place it at specific position using CSS and handle the checkbox events.

The ListView component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.