Hi.
I’m testing Smart.grid in Vue3.
Testing the “Infinite” scroll, I found that the newly added ROW was not selective.
But I don’t know if it’s a bug or something wrong.
Please check my source…
<div><template></div>
<div><smart-grid id=”grid” ref=”grid”></smart-grid></div>
<div></template></div>
<div><script></div>
<div>import “smart-webcomponents/source/styles/smart.default.css”;</div>
<div>import “smart-webcomponents/source/modules/smart.grid.js”;</div>
<div>import doRequest from “../../assets/common/common”;</div>
<div>import {tempList} from “@/assets/common/tempList”;</div>
<div>import _ from ‘lodash'</div>
<div>export default {</div>
<div>name: “imageFile”,</div>
<div>data(){</div>
<div>return{</div>
<div>pageNum: 0,</div>
<div>listData: null,</div>
<div>grid: null</div>
<div>}</div>
<div>},</div>
<div>mounted() {</div>
<div>window.Smart(“#grid”,</div>
<div>class {</div>
<div></div>
<div>get properties() {</div>
<div>return {</div>
<div>scrolling: “infinite”,</div>
<div>appearance: {</div>
<div>showRowHeader: true,</div>
<div>allowHover: true,</div>
<div>showRowHeaderNumber: true</div>
<div>},</div>
<div>sorting: {</div>
<div>enabled: false</div>
<div>},</div>
<div>selection: {</div>
<div>allowCellSelection: true,</div>
<div>enabled: true,</div>
<div>// allowCellSelection: true,</div>
<div>allowRowHeaderSelection: true,</div>
<div>// allowColumnHeaderSelection: true,</div>
<div>mode: ‘extended'</div>
<div>},</div>
<div>columns: [</div>
<div>{ label: ‘품목코드’, dataField: ‘itemSeq’, align: “center”, cellsAlign: “left”, width:100},</div>
<div>{ label: ‘이미지’, dataField: ‘image’, align: “center”, cellsAlign: “left”, width:100,</div>
<div>template: (object) => {</div>
<div>object.template = <img src='data:image/png;base64,${object.value}' width='100px'/></div>
<div>}</div>
<div>},</div>
<div>{ label: ‘품명’, dataField: ‘itemName’, align: “center”, cellsAlign: “left”, width:500},</div>
<div>{ label: ‘품번’, dataField: ‘itemNo’, allowHide:true, width:200 },</div>
<div>{ label: ‘규격’, dataField: ‘spec’, width:200 },</div>
<div>{ label: ‘단위’, dataField: ‘unitName’, width:200 },</div>
<div>{ label: ‘단가’, dataField: ‘price’, width:200 },</div>
<div>],</div>
<div></div>
<div>};</div>
<div>}</div>
<div>}</div>
<div>);</div>
<div></div>
<div>this.$refs.grid.dataSource = new window.Smart.DataAdapter({</div>
<div>virtualDataSourceCache: true,</div>
<div>virtualDataSource: (resultCallback, details)=>{</div>
<div>console.log(“virtualDataSource”, details)</div>
<div>doRequest(“post”, “./getProductListForBase64.do”, {pageNum: ++this.pageNum, rowPerPage: 20})</div>
<div>.then(result => {</div>
<div>let dataList = _.isUndefined(result.data.list)?tempList:result.data.list</div>
<div>console.log(“dataList.length”, dataList.length)</div>
<div>setTimeout(()=>{</div>
<div>resultCallback({</div>
<div>dataSource: dataList,</div>
<div>// virtualDataSourceLength: dataList.length</div>
<div>})</div>
<div>}, 100)</div>
<div></div>
<div>})</div>
<div>},</div>
<div>id: ‘itemSeq'</div>
<div>})</div>
<div>},</div>
<div>methods:{</div>
<div></div>
<div>},</div>
<div>};</div>
<div></div>
<div></script></div>
<div><style scoped></div>
<div></div>
<div></style></div>