How to select a row for ejs-grid with enableVirtualization='true'
13 Replies
Hi Chunfeng,
You’re welcome. We are happy to assist you.
Query – 1: “In our project, we use axios.post to send parameters to our web server and get data, I like to know if we can get "skip, take and sort parameters " of the grid after scrolling and integrate into our post parameters to the server and get return data?”
On scrolling past the records in a page, actionBegin event will be triggered with requestType as “virtualscroll”(This will be returned in the event arguments). In this event the page number value will be returned based on which you can calculate the records to skip and take and then send request to your server with these values as demonstrated in the below code snippet,
|
// Grid’s actionBegin event function
actionBegin: function(args) {
if (args.requestType == "virtualscroll") {
// Get the current page value
var curPage = args.virtualInfo.page;
// Calculate the records to skip
var recordsToSkip = this.$refs.grid.ej2Instances.pageSettings.pageSize * (curPage - 1);
// Get the records to take
var recordsToTake = this.$refs.grid.ej2Instances.pageSettings.pageSize;
// With these value you can send request to your server
}
} |
The sorted columns can be accessed from the grid instance’s sort module as demonstrated in the below code snippet,
|
this.$refs.grid.ej2Instances.sortModule |
The sorted column properties will be returned as displayed in below image,
You can pass these skip, take and sort parameters in your server request and assign the returned data to the Grid’s data source.
Query – 2: “I don't know if we can show row sequence number in grid, such as first row show 0, second row show 1”
You can achieve this requirement by assigning the row index value to the required column’s innerText using the rowDataBound event of the Grid. This is explained below,
Initially bind rowDataBound event to the Grid which will be triggered before each row is appended to the Grid. Here you can get the row element’s index value from the arguments and assign it to the required column’s innerText. This is demonstrated in the below code snippet,
|
// Grid’s rowDataBound event
rowDataBound: function(args) {
// Row index is returned and assigned to the required cell’s innerText
var rowIndex = parseInt(args.row.getAttribute('aria-rowindex'));
// Here we have assigned it to the first column’s cell
args.row.querySelector('.e-rowcell').innerText = rowIndex;
} |
Sample for your reference,
Query – 3: “For grid header text if it can be wrap to next line with header height increased if its column width is not enough to show whole text, but the data row are not, it keep same height.”
From your query we suspect your requirement is to wrap the header text and content. You can enable text wrap by setting the allowTextWrap property of the Grid to true. By default it wraps both header and content. You can change it to wrap either header or content alone by using the textWrapSettings property.
If we misunderstood your query or if you require further assistance please get back to us.
Regards,
Sujith R
Hi Sujith,
Thank you for your professional help.
About Query – 2:
The grid columns are set up dynamically, the first columns will bind to a check box which user can click it, after it is clicked, a event will occur and we need get this check box status and this row binding value to do related work.
See below pictures, it is what we will do
The first column is a check box, when a check box is checked or un-checked, we will show or hide its location on a map, multiple locations can be show on the map at same time. only first column is clickable, the reset columns are just show some information.
Thanks,
chunfeng
SIGN IN To post a reply.
