0

@NotifyChange makes the listbox always goes on top

asked 2012-11-20 10:34:42 +0800

elvin gravatar image elvin
66

Hi,

I have a listbox that has a function of dynamically adding new record to it, so on my VM i have a notifychange to tell the list has change and adding the new item on the last, i want to scroll directly to the new item using:

items.setSelectedIndex(items.getItemCount());

but due to the notifychange it seems its forcing it to go to the first index, is there a way to fix this?

delete flag offensive retag edit

6 Replies

Sort by ยป oldest newest

answered 2012-11-20 10:58:54 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

Can you please explore bit more as i am not seeing any code given by you for ur issue

link publish delete flag offensive edit

answered 2012-11-21 02:56:52 +0800

elvin gravatar image elvin
66

updated 2012-11-21 03:08:37 +0800

ok i have a zul file that dynamically add components by adding an object on the list and calling a notify change

zul:

<toolbar>
<toolbarbutton label="Add" disabled="@bind(empty vm.journal.company)" onClick="@command('addMoreItem', list=items)" image="/resources/images/plus.png"/>
</toolbar>
<listbox id="items" model="@load(vm.lineItem)" hflex="1" vflex="1" selectedItem="@bind(vm.itemDto)">
<template name="model" var="item">
<listitem>
 <listcell>.... some input components here</listcell>
<listitem>
</template>
</listbox>

VM:

	@Command @NotifyChange("lineItem")
	public void addMoreItem(@BindingParam("list")Listbox items){
		if (lineItem.get(lineItem.size()-1).getFxRate() == null){
			Clients.alert("Empty journal entry is not allowed", "Error", "ERROR");
		}else{
			LineItemDto item = new LineItemDto();
			lineItem.add(item);
			
			items.setFocus(true);
			items.setSelectedIndex(items.getItemCount());
			Clients.scrollIntoView(items.getSelectedItem());
		}
	}

The problem is that NotifyChange will always fires after the command method is executed and this will trigger a refresh on the listbox component, so it make my code for selecting the last component useless. Is there an event that listens to the notifychange that i can invoke another command once the notifychange is triggered?

link publish delete flag offensive edit

answered 2012-11-21 05:08:54 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

Are you adding a new item in list with some component in listbox ?

link publish delete flag offensive edit

answered 2012-11-21 05:31:46 +0800

elvin gravatar image elvin
66

I'm adding a new item on the list and let the template generate the new components. like so

	<div style="overflow:auto;" vflex="1">
	<listbox id="items" model="@load(vm.lineItem)" hflex="1" selectedItem="@bind(vm.itemDto)" >
		<listhead>
			<listheader align="center" label="Type" width="95px"/>
			<listheader align="center" label="B/C" width="60px"/>
			<listheader align="center" label="Account" width="320px"/>
			<listheader align="center" label="Balance"/>
			<listheader align="center" label="" width="40px"/>
			<listheader align="center" label="Debit Amount"/>
			<listheader align="center" label="Credit Amount"/>
			<listheader align="center" label="Fx Debit Amount"/>
			<listheader align="center" label="Fx Credit Amount"/>
			<listheader align="center" label="x" width="40px"/>
		</listhead>	
		<template name="model" var="item">
			<listitem>
			<listcell>
			<listbox mold="select" disabled="@load(empty vm.journal.description or empty vm.entryType)" onSelect="@command('setInputType', index=itemStatus.index)" model="@load(vm.ledgerInputTypes)" selectedItem="@load(item.inputType) @save(item.inputType)">
				<template name="model">
				<listitem label="@load(each.getLabel())"/>
				</template>
			</listbox>
			</listcell>
			<listcell>
				<listbox disabled="@load(empty item.inputType)" visible="@load(item.inputType eq 'LEDGER' ? 'false':'true')" mold="select" selectedItem="@load(item.balanceDirection) @save(item.balanceDirection)" onSelect="@command('showFilters', index=itemStatus.index)">
                    <listitem label="C" value="C"/>
                    <listitem label="B" value="B"/>
                </listbox>				
			</listcell>
			<listcell>
			<textbox readonly="true" disabled="@load(empty item.inputType)" visible="@load(item.inputType eq 'LEDGER' ? 'true':'false')" width="100%" value="@load(item.financialAccount.accountName) @save(item.financialAccount.accountName)" onClick="@command('showFAFilter', index=itemStatus.index)"/>
			<textbox readonly="true" disabled="@load(empty item.balanceDirection)" visible="@load(item.inputType eq 'LEDGER' ? 'false':'true')" width="100%" value="@load(item.bra.accountCode) @save(item.bra.accountCode)" onClick="@command('showFilters', index=itemStatus.index)"/>
			</listcell>
			<listcell>
			<decimalbox value="@load(item.balance) @save(item.balance)" readonly="true" width="100%" format="###,###,##0.00000"/>
			</listcell>
			<listcell>
			<label value="@load(item.financialAccount eq null ? item.bra.currency.currencyCode : item.financialAccount.currency.currencyCode) @save(item.financialAccount eq null ? item.bra.currency.currencyCode : item.financialAccount.currency.currencyCode)"/>
			</listcell>
			<listcell>
			<decimalbox disabled="@load(empty item.fxRate)" width="100%" value="@load(item.debitAmount) @save(item.debitAmount)" onChange="@command('computeFXAmount', isDebit=true, index=itemStatus.index)" format="###,###,##0.00000"/>
			</listcell>
			<listcell>
			<decimalbox disabled="@load(empty item.fxRate)" width="100%" value="@load(item.creditAmount) @save(item.creditAmount)" onChange="@command('computeFXAmount', isDebit=false, index=itemStatus.index)" format="###,###,##0.00000"/>
			</listcell>
			<listcell>
			<decimalbox disabled="@load(empty item.fxRate)" width="100%" readonly="true" value="@load(item.getFXDebitAmount()) @save(item.getFXDebitAmount())" format="###,###,##0.00000"/>
			</listcell>
			<listcell>
			<decimalbox disabled="@load(empty item.fxRate)" width="100%" readonly="true" value="@load(item.getFXCreditAmount()) @save(item.getFXCreditAmount())" format="###,###,##0.00000"/>		
			</listcell>
			<listcell>
			<image visible="@load(vm.lineItem.size() gt 1)" src="/resources/images/cancel.png" onClick="@command('removeItem', index=itemStatus.index)"/> 
			</listcell>
			</listitem>
		</template>		
	</listbox>	
	</div>

link publish delete flag offensive edit

answered 2012-11-21 06:35:02 +0800

elvin gravatar image elvin
66

Manage to get a solution, on the listbox added onAfterRender="@command('scrollTo')" and I remember the index of the selected item and set the selectedIndex.

link publish delete flag offensive edit

answered 2012-11-21 06:56:18 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

good work

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-11-20 10:34:42 +0800

Seen: 128 times

Last updated: Nov 21 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More