1. Home
  2. Forum
  3. Vue
  4. Issue for ejs-grid with enableVirtualization='true' and frozenColumns=3

Issue for ejs-grid with enableVirtualization='true' and frozenColumns=3

Hi,

(1) if no recording are in the data grid, an additional vertical scroll bar is appear, we wonder if it can be removed?


(2) After we userowDataBound: function(args) {
        var rowIndex = parseInt(args.row.getAttribute('aria-rowindex'));
        args.row.querySelector('.e-rowcell').innerText = rowIndex;
   } 
 in order to show index number in data grid,  not only the first column in lock columns, but the first column 'Engine' in un-lock columns are also show as row index number, how to make 'Engine' column show its bind value?

(3) How to set up the selected row background color?

(4) After the recording are bounded to data grid, the row can not be selected by clicking it,  but after we vertically scroll data grid,  it works, we don't know why?

Thanks,

CZ


5 Replies
AG Ajith Govarthan Syncfusion Team April 13, 2020 11:48 AM UTC

Hi CZ, 

Greetings from Syncfusion. 

Query#1: if no recording are in the data grid, an additional vertical scroll bar is appear, we wonder if it can be removed? 
 
Based on the attached screenshot we can able to reproduce the reported issue at our end we have prepared sample based on your requirement in that we have used beforeDataBound event in that data count sent as argument and when count equals to zero we have hided the additional scroll using CSS properties. 
 
Code Snippet:  
App.vue. 

    beforeDataBound: function(args) { 
      var gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      if (args.count === 0) { 
        gridObj.getContent().children[0].classList.add("c-scroll"); 
      } 
    }, 

Query#2: in order to show index number in data grid,  not only the first column in lock columns, but the first column 'Engine' in un-lock columns are also show as row index number, how to make 'Engine' column show its bind value? 
 
From the attached code snippet we found that you have used rowDataBound event when the rowDataBound event used with frozen columns which will be triggered for two times for single row. So the rowindex will be updated on both frozen and movable first columns. To over come this we have maintained a global variable using that we have changed the innerText of the first frozen column. 
 
App.vue 

beforeDataBound: function(args) { 
      firstUpdate = true; 
      count = args.count; 
      var gridObj = document.getElementsByClassName("e-grid")[0] 
        .ej2_instances[0]; 
      if (args.count === 0) { 
        gridObj.getContent().children[0].classList.add("c-scroll"); 
      } 
    }, 
    rowDataBound: function(args) { 
      var rowIndex = parseInt(args.row.getAttribute("aria-rowindex")); 
      if (rowIndex !== count - 1 && firstUpdate) { 
        args.row.querySelector(".e-rowcell").innerText = rowIndex; 
      } else if (firstUpdate) { 
        args.row.querySelector(".e-rowcell").innerText = rowIndex; 
        firstUpdate = false; 
      } 
    } 

Query#3:  How to set up the selected row background color? 
 
You can change the selected row background by using the CSS properties we have shared the codeSnippet and sample for your reference. 
 
 
Based on the listed queries we have prepared sample for all the above queries please refer the sample for your reference. 
 
 
 
Query#4: After the recording are bounded to data grid, the row cannot be selected by clicking it,  but after we vertically scroll data grid,  it works, we don't know why? 

Based on the query we have prepared sample and found that everything works fine at our end. We have shared the prepared sample so please refer the sample for your reference. 
 

If the above solution doesn’t your requirement then please share the below details to validate further on your requirement. 

  1. Please share the complete grid code sample.
  2. Please share the video demonstration  of the issue reproduced sample.
  3. Please share the syncfusion package version.

Regards, 
Ajith G. 


CZ CZ April 13, 2020 04:36 PM UTC

Hi Ajith G. 

Thank you for your help! 

Query#1 

Can you give me a sample? I  have tried 

 beforeDataBound: function(args) { 
      var gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      if (args.count === 0) { 
        gridObj.getContent().children[0].classList.add("c-scroll"); 
      } 
    }, 
it doesn't work in my project.

Query#2

If there are a lot of data, the solution are not work.

Thanks
cz 


AG Ajith Govarthan Syncfusion Team April 14, 2020 03:38 PM UTC

Hi CZ, 
  
Sorry for the inconveniences. 
  
Query#1: if no recording are in the data grid, an additional vertical scroll bar is appear, we wonder if it can be removed? 
  
We have checked the provided sample in the last update and found everything works fine at our end. We have prepared sample a separate sample for query#1 which has no data and we have hided additional scroller in beforeDataBound event of the grid using CSS properties. We have attached the screenshot and sample so please refer the sample for your reference. 
  
Screenshot:  
  
 
  
Code Snippet:  
App.vue 
  
    beforeDataBound: function(args) { 
      var gridObj = document.getElementsByClassName("e-grid")[0] 
        .ej2_instances[0]; 
      if (args.count === 0) { 
        gridObj.getContent().children[0].classList.add("c-scroll"); 
      } 
    }, 
  
<style> 
.e-grid .e-content.c-scroll { 
  overflow-y: auto; 
} 
</style> 
  
  
Query#2: Query#2: in order to show index number in data grid,  not only the first column in lock columns, but the first column 'Engine' in un-lock columns are also show as row index number, how to make 'Engine' column show its bind value? 
  
In the previous update we have not enabled the virtualScroll feature and now we have enabled the virtualScroll and found that the rowindex were not set properly. Based on your requirement we have prepared sample in that we have used queryCellInfo event and rowDataBound when the data is loaded the queryCellInfo event will be triggered for all the cells to access the cell information and that event will send arguments like cell, column and etc. So based on the column field we have added a class for the particular column cells and after the queryCellInfo event completes for all the cell in the current row then rowDataBound event will get triggered and here we have query selected the particular cell using the added class and now we have added the rowindex in the innerText of the cell. 
  
Code Snippet:  
App.vue 
  
    rowDataBound: function(args) { 
      if (args.row.querySelector(".cc-count")) { 
        args.row.querySelector(".cc-count").innerText = parseInt( 
          args.row.getAttribute("aria-rowindex") 
        ); 
      } 
    }, 
    queryCellInfo: function(args) { 
      if (args.column.field === "OrderID") { 
        args.cell.classList.add("cc-count"); 
      } 
    } 
  }, 
  
  
Please get back to us if you need further assistance. 
  
Regards, 
Ajith G. 


CZ CZ April 15, 2020 01:43 PM UTC

Hi Ajith G.

It works,

Thank you

AG Ajith Govarthan Syncfusion Team April 16, 2020 04:36 AM UTC

Hi CZ, 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 
Ajith G. 


Loader.
Up arrow icon