EasyUI Forum
April 29, 2024, 05:13:16 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Angular - DataGridComponent selectRow method not working  (Read 5419 times)
Swany
Newbie
*
Posts: 44


View Profile Email
« on: December 28, 2018, 11:49:42 AM »

Please see topic for more information: https://www.jeasyui.com/forum/index.php?topic=7760.0

If I have a virtualScroll set to true for a DataGridComponent and call selectRow it does not work.

I have the idField value set and I bind the 'selection' to the datagrid.
I load a grid with data.
I scroll half way down the grid.
I edit the row by passing the row to a dialog.
I save the save data and call service to get the data and reload the grid.
The grid selects row but does not scroll to the selected row.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: December 29, 2018, 12:30:33 AM »

It isn't a good idea to load a large data after edit and save a row. So please set the 'lazy' to true to turn on the lazy mode.
Code:
<eui-datagrid #dg style="height:250px"
[virtualScroll]="true"
[lazy]="true"
[data]="data"
        [total]="total"
        idField="inv"
        selectionMode="single"
        [(selection)]="selection"
[pageNumber]="pageNumber"
[pageSize]="pageSize"
[rowHeight]="rowHeight"
(pageChange)="onPageChange($event)"
>
<eui-grid-column field="inv" title="Inv No"></eui-grid-column>
<eui-grid-column field="name" title="Name"></eui-grid-column>
<eui-grid-column field="amount" title="Amount" align="right"></eui-grid-column>
<eui-grid-column field="price" title="Price" align="right"></eui-grid-column>
<eui-grid-column field="cost" title="Cost" align="right"></eui-grid-column>
<eui-grid-column field="note" title="Note"></eui-grid-column>
</eui-datagrid>

After saving the row, reload only this row and update to the dataset.

Code:
const index = this.data.indexOf(this.selection);
if (index >= 0){
    let row = ...  // the new row
    let data = this.data.slice();
    data.splice(index, 1, row);
    this.data = data;
    this.selection = row;
}

If you really want to use un-lazy mode, update the specified row and then refresh the virtual scroll view.
Code:
if (this.selection){
Object.assign(this.selection, {  // update the current row
name: 'name updated'
})
this.dg.view2.body.vscroll.refresh();  // refresh the virtual scroll view
}
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!