Exception occur when click a row in data grid if both :enableVirtualization='true' and :frozenColumns=2 are set up
Hi,
Since there are over 100 columns in data grid, we set up :frozenColumns=3 to make sure first three columns always be visible.
After we set up dataSource to the data list we get from server, it shows correctly, then we click a row, an exception occur from console in google developer tools.
If we scroll the grid up and down for several times, and click a row, again, it maybe work fine, the row can be selected.
If we don't set up frozenColumns or :enableVirtualization='true' at same time, it works very well. it looks like there are some issues when frozenColumns and :enableVirtualization='true' set up at same time, I attach code and what we got from google developer tools, the selected row uid is "grid-row21", but current show rows uid is from "grid-row71", please tell us how to fix this?
(1) Code
<ejs-grid ref='gmapoverviewgrid'
width='100%'
:height="gridheight"
rowHeight=30
:allowFiltering='false'
:allowSorting='true'
:allowResizing='true'
:enableVirtualization='true'
:frozenColumns=2
.....
:columns = datasheetColumns
:dataSource="mapItemList" >
</ejs-grid>
export default {
...
data(){
return {
mapItemList: [],
datasheetColumns: []
};
},
...
}
After we get the record array from the server, we assign it to mapItemList, it can show correctly,
(2) Error
when click a row, get an exception, below is detail we get from google developer tools
(2-1) error in selection selectRow
(2-2) error in selectRow
(3-3) error in getRowObjectFromUID
select row uid="grid-row21" which is no tin current row list, I don't know how to set up to prevent this happen.
Thanks,
SIGN IN To post a reply.
21 Replies
Hi Manivel,
In our project, the data grid columns are large and dynamically, so we get its setting from the database and binding its to columns property, like :columns = columns,all these columns are readonly, but we need to add a new column as first column which is checked box and editable, please let us how can we implement this?
Just like below picture, column Id, Name(english), Name, ...are dynamically set up in database, we can bind these columns by vue grid columns property, but visible column different from other columns, it is editable, it is a checkbox, not set up in database, we check and unchecked it, after its status change, we need to get its status change event and do the relative work.
Thanks,
Hi Manivel ,
1. The sample you provide is what we want to do, we are working on this function in our project right now.
We get error in our project when we implement this function. so we download the sample you provide and try to make it work. we install package by "npm install " and run it, and we get below error,
2. If it is possible to refresh a special row?
In our application, when click a row in a grid, we need to update this row value and refresh its display in data grid, we implement this by binding to "recordClick" and modify this row data and re-bind grid dataSource, it works. but if we have selected a row, after re-bind, the selected row will be un-selected, we have to write extra code,
We wonder if we can only refresh this row display without re-bind grid dataSource ?
Thanks,
CZ
i Manivel,
Thank you for your help.
Query:1We get error in our project when we implement this function. so we download the sample you provide and try to make it work. we install package by "npm install " and run it, and we get below error
After we copy vue.config.js from our project to this demo project, it works in demo project, we make a little change to bind standard html5 check box in template.
But copy the code to our project, it doesn't work in our project, we check the @syncfusion/ej2-vue-grids version on both project and event binding to same columns in demo project, we always get same error,
(1) code: -- this code works in demo project
load: function(args) {
var columns = this.$refs.gmapoverviewgrid.$el.ej2_instances[0].columns;
if (columns.length > 0 && columns[0].field != "customcolumn" ) {
columns.unshift({
field: "customcolumn",
headerText: "Visible",
width: "90",
template: this.gridSearchTemplate
});
}
},
gridSearchTemplate: function() {
return {
template: Vue.component("GridSearchTemplate", {
template: `<div ><input type="checkbox" :change="checkboxChange"/></div>`,
data() {
return {};
},
methods: {
checkboxChange: function(args) {
alert("checkbox state changed");
}
}
})
};
.....
(2) Error we get in google developer tools
(3) We trace in template.js
In 71, str is function, not the template content.
We try several hours and could not find out the reason what is wrong.
Query: 2. If it is possible to refresh a special row?
If we use below code to bind the current page data, we can refresh whole page, the update value can be refresh in GUI(showingmapItemPageInfo is dataSource we bind)
recordClick:function(args) {
args.rowData.Show = !args.rowData.Show;
this.$nextTick(() => {
var pageinfo = {
count: this.showingmapItemPageInfo.count,
result: this.showingmapItemPageInfo.result
};
this.showingmapItemPageInfo = pageinfo;
});
}
but if we call updateRow , the update value can not be refresh in GUI, below is the code
recordClick:function(args) {
args.rowData.Show = !args.rowData.Show;
this.$nextTick(() => {
this.$refs.gmapoverviewgrid.updateRow(args.rowIndex,args.rowData);
});
}
Thanks
cz
Hi Regards,
We have followed your instruction to to refresh package step by step, we make @syncfusion/ej2-vue-grids same version, reboot up machine and clean google chrome cache, we are afraid if it is related with load event, so we try to bind template in columns directly like below
Thank you for your help.
Query: copy the code to our project, it doesn't work in our project, we check the @syncfusion/ej2-vue-grids version on both project and event binding to same columns in demo project, we always get same error, In 71, str is function, not the template content.
We try several hours and could not find out the reason what is wrong
<ejs-grid :dataSource="data" height=310>
<e-columns>
<e-column headerText='Employee Image' width='150' textAlign='Center' :template='cTemplate'></e-column>
...
</e-columns>
</ejs-grid>
No Matter what step we try, we still get same error, we are not figure out what is wrong, only different in our project we have much more components than in demo project, do you have any clue?
Query: recordClick event will not fire when click on cells of locked-columns, how to make it make its event fire?
Thanks,
CZ
:recordClick='recordClick'
SIGN IN To post a reply.
