Revision history [back]

Hi again.

@JJ I'm sure that the row is already rendered, because i'm using an ArrayList as model so there is no ROD. what I'm searching is a method to scroll to a specified row in the client Side. I'm learning how to do it with Jqeury , but no chance ;( the problem occur when I invoke notify change in the ViewModel to rerender the row using this property (inplace="${item.editable}")

<listbox id="grid" onCtrlKey='@command("renderEditCarModal")'
                                 ctrlKeys="^a#f1" span="true"

                                 sizedByContent="false" height="250px" model="@bind(vm.carList)">   

                            <auxhead >
                                <auxheader colspan="1" ></auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%" ></textbox>
                                </auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%" ></textbox>
                                </auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%"></textbox>
                                </auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%"></textbox>
                                </auxheader>
                                <auxheader colspan="1" >
                                    <textbox width="80%"></textbox>
                                </auxheader>
                            </auxhead>

                            <listhead sizable="true">
                <!--                <column visible="true" width="45px">check</column>-->
                                <listheader width="25px"></listheader>
                                <listheader width="75px">id</listheader>
                                <listheader draggable="true">name</listheader>
                                <listheader draggable="true">Company</listheader>
                                <listheader draggable="true">Price</listheader>
                                <listheader draggable="true">Status</listheader>
                            </listhead>

                            <template name="model" var="item">

                                <listitem onClick="@command('selectCar', car=item , row=self)" >
                                    <listcell >
                                        <checkbox  checked="${item.status == 1 ? 'true' : false}" 
                                                   visible="true">
                                        </checkbox>
                                    </listcell>
                                    <listcell
                                        style="padding:0px 5px 0px 0px;margin:0px;width:100%">
                                        <textbox value="@bind(item.id)" readonly="true" inplace="${item.editable}"
                                                                     style=" ${item.status == 1 ? 'background-color:rgb(230,230,230)' : '' } ;width:100%;text-align:right;">
                                        </textbox>
                                    </listcell>
                    <!--
                    -->
                                    <listcell style="padding:0px;margin:0px;width:100%">
                                        <textbox value="@bind(item.name)" inplace="${item.editable}" 
                                                 style="width:100%" >

                                        </textbox>
                                    </listcell>
                                    <listcell style="padding:1px;margin:0px;width:100%">
                                        <textbox value="@bind(item.company)" inplace="${item.editable}"
                                                 style="width:100%">
                                        </textbox>
                                    </listcell>
                                    <listcell style="padding:1px;margin:0px;width:100%">
                                        <textbox value="@bind(item.price)" inplace="${item.editable}"
                                                 style="width:100%">
                                        </textbox>
                                    </listcell>
                                    <listcell style="padding:1px;margin:0px;width:100%">
                                        <textbox value="@bind(item.status)" inplace="${item.editable}"
                                                 style="width:100%">
                                        </textbox>
                                    </listcell>
                                </listitem>

                            </template>

                        </listbox>

Here is the method invoked when I click on the row (listItem)

@Command
    @NotifyChange({"wheelList" , "carList"})
    public void selectCar(@BindingParam("car") Car car , @BindingParam("row") Listitem row) {
        this.selectedCar = car;
        this.selectedCar.setEditable(false);

        row.getListbox().setSelectedItem(row);
         Clients.scrollIntoView(row);
        wheelList = wheelService.SelectByIdCar(selectedCar.getId().toString());
    }