### Requirements:
I want to create a group model list which will able to render quickly at least 500 rows without pagination and fixed height.
i have following 4 functionality with this group model:

- Add: i can add one or many items to the list by a global level button
- Delete: i can delete a particular item from the list by row level button
- Edit: i can edit the whole list by a single global level button
- Expand/Collapse: Able to expand/collapse the whole list group with a global level button

### Approach:
As browser is getting hanged while rendering 500 rows, so i decided the following approach:
- If i have more than 100 rows to render in the list group, i will collapse all groups with defering the children. When i expand a particular group, then it's children will render.

Here is the listbox with grouping example, i also try the same with grid. i tried with the group model with AbstractGroupsModel, GroupsModelArray, SimpleGroupsModel implementations. Actually i need an auto-notifiable GroupModel like ListModelList(In case of simple listbox) in any operations(add, edit and delete).
``` html
<listbox model="@load(vm.employeeGroupModel)" >
	<listhead sizable="true">
		<listheader label="Header1" width="20%"></listheader>
		<listheader label="Header2" width="20%"></listheader>
		...
	</listhead>
	<template name="model:group">
		<listgroup label="@load(each)" open="true"/>
	</template>
	<template name="model">
		<listitem fulfill="self.what.onOpen">
			<listcell>
				<!-- Each listcell has two componenents, If user click on edit button, the edtable component will display -->
				<label visible="@bind(!vm.editMode)" value="@load(each.empId)"></label>
				<textbox visible="@bind(vm.editMode)" value="@load(each.empId)"></textbox>
			</listcell>
			<listcell>
				<label visible="@bind(!vm.editMode)" value="@load(each.joiningDate)"></label>
				<datebox visible="@bind(vm.editMode)" value="@load(each.joiningDate)"></datebox>
			</listcell>
			...
		</listitem>
	</template>
</listbox>
```

### Issues:

1. Unable to apply fulfill attribute in listitem component.
2. If i will be able to apply this attribute, then how i can make this in conditional basis. Means if i have less than 100 rows, then fulfill attribute should not apply and all the listgroups should render in expand mode.
3. During add a new item or delete a item, i need to notify the whole groupModel which taking more time to repaint the DOM.
4. i am facing an issue during expand/collapse. Some of the listgroup is not expanding/collapsing if i have large number of rows. i have the following logic for expanding/collapsing:

``` java
private void collapseAll() {
    	List<Listitem> items = listbox.getItems();
    	for (Listitem listitem : items) {
		if(listitem instanceof Listgroup) {
			((Listgroup)listitem).setOpen(false);
		}
	}
 }

private void expandAll() {
List<Listitem> items = listbox.getItems();
	for (Listitem listitem : items) {
		if(listitem instanceof Listgroup) {
			((Listgroup)listitem).setOpen(true);
		}
	}
 }

 ```