Advanced User Interface Controls and Components
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.
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.
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:
<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.
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.
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.