We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid with scrolling and resizable columns sometimes doesn't let columns resize

Hi Syncfusion Team,

I've noticed a strange behaviour of my grid.

The grid is a bit complex, with sorting, filtering and grouping. It has many columns (more than the page width) and I've enabled the horizontal virtual scrolling. These columns can be resized.

After I scroll, I cannot resize the columns. The scrolling is both via the virtual scroller (horizontally) and the browser scroller (vertically). With the browser scroller, if I scroll all way back to top the resize works again.

I've tried with Chrome (v. 61.0.3163.100), Firefox (v. 55.0.3), Edge (Microsoft Edge 40.15063.0.0, Microsoft EdgeHTML 15.15063), Internet Explorer 11 (v. 11.608.15063.0), Safari (v. 10.0.3).

Syncfusion ej version : 15.3.0.29

The behaviour is present in Chrome (always), in Edge and Internet Explorer (the last two randomly)

Here's the grid definition:
@(Html.EJ().Grid<DtoAnagraficaReport>("GrigliaAnagrafica")
          .Datasource(d => d.URL(Url.Action("DataSourceAnagrafica")).Adaptor(AdaptorType.UrlAdaptor))
          .AllowFiltering()
          .FilterSettings(f => f.FilterType(FilterType.Excel))
          .AllowSorting()
          .SortSettings(s => s.SortedColumns(c => c.Field("Cognome").Direction(SortOrder.Ascending).Add()))
          .AllowPaging()
          .AllowReordering()
          .AllowResizing()
          .AllowScrolling()
          .AllowGrouping()
          .PageSettings(p=>p.PageSize(20).PageSizeList(new List<int>{5,10,15,20,50}))
          .ShowColumnChooser()
          .ToolbarSettings(t => t.ShowToolbar().ToolbarItems(i =>
          {
              i.AddTool(ToolBarItems.ExcelExport);

          }))
          .Mappers(m => m.ExportToExcelAction(Url.Action("ExportToExcel")))
          .Columns(c =>
          {
              if (Html.PermessoAccessoDatiCompleto(User))
              {
                  c.Field(f => f.CodiceFiscale).Width(80).HeaderText("Codice fiscale").IsPrimaryKey(true).Add();
              }
           
              c.Field(f => f.Cognome).Width(200).Add();
              c.Field(f => f.Nome).Width(80).Add();
              c.Field(f => f.Comitato).Width(200).Add();
              if (Html.PermessoAccessoDatiCompleto(User))
              {
                  c.Field(f => f.DataNascita).HeaderText("Data di nascita").Format("{0:dd/MM/yyyy}").Width(80).Add();
                  c.Field(f => f.LuogoNascita).HeaderText("Luogo di nascita").Width(80).Add();
                  c.Field(f => f.Citta).HeaderText("Residenza").Width(80).Add();
                  c.Field(f => f.Cap).HeaderText("Cap").Width(80).Add();
                  c.Field(f => f.Indirizzo).HeaderText("Indirizzo").Width(80).Add();
               
              }
              c.Field(f => f.Email).Width(80).Add();
              c.Field(f => f.Telefono1).HeaderText("Telefono").Width(80).Add();
              c.Field(f => f.Telefono2).HeaderText("Telefono 2").Width(80).Add();
              c.Field(f => f.Formazione).Width(80).Add();
              c.Field(f => f.Medico).HeaderText("M/I").Width(80).Add();
              c.Field(f => f.Direttore).HeaderText("Direttore corso").Width(80).Add();
              c.Field(f => f.Affiancamenti).Width(80).Add();
              c.Field(f => f.AffiancamentiFormatore).HeaderText("Affiancamenti con formatore").Width(80).Add();
              c.Field(f => f.DataUltimoCorsoFaculty).HeaderText("Ultimo corso faculty").Format("{0:dd/MM/yyyy}").Width(80).Add();
              c.Field(f=>f.GiorniDaUltimoCorsoFaculty).HeaderText("Giorni ultimo corso faculty").Width(80).Add();
              c.Field(f => f.DataUltimoCorsoDirettore).HeaderText("Ultimo corso direttore").Format("{0:dd/MM/yyyy}").Width(80).Add();
              c.Field(f=>f.GiorniDaUltimoCorsoDirettore).HeaderText("Giorni ultimo corso direttore").Width(80).Add();
          })

          )



3 Replies

VN Vignesh Natarajan Syncfusion Team October 5, 2017 03:02 PM UTC

Hi Chiara, 
Thanks for using Syncfusion products. 
We have analyzed your query and we have prepared a sample based on the code snippet you shared. We have tried to resize the column after scrolling the grid scroller(horizontal) and browser scroller (vertical). We could not able to reproduce the issue.   
We have checked with Google Chrome version 61.0.3163.100  
We have prepared a sample based on the code snippets you shared. Please refer the below link for the sample 
  
For your convenience, we have prepared a video demonstration which can be downloaded from below link 
  
Please provide the following details to help you as soon as possible 
  
  1. Provide the video demonstration of the issue
 
  1. Share the screenshot of the script error in console window(if any)
 
  1. Or try to reproduce the issue in the attached sample.
 
 
 
Regards, 
Vignesh Natarajan 
 



CD Chiara De Acetis October 9, 2017 03:26 PM UTC

Hi, sorry for the delay in answering and thanks for the reply.

I managed to reproduce the problem with the sample.

I've uploaded two video:

  • The first one (GridProblemFromExample) show the issue with the project sample.
  • The second video (GridProblemWithTopMargin) is your example with a minor edit (just a <div style="margin-bottom:200px;"></div> in the _Layout.cshtml just before @RenderBody() tag)

Both shows the behaviour noticed in my first question.

There is a verbose warning in the chrome console, I added the screen in the .zip


Attachment: RequestedFiles_2d044418.zip


TS Thavasianand Sankaranarayanan Syncfusion Team October 11, 2017 01:48 PM UTC

Hi Chiara, 

We have analyzed and checked your given video demonstration. We are able to reproduce the reported issue from our end. We have confirmed the issue “Column resizing is not proper when scroll the vertical scrollbar is a defect and logged a defect report. The fix will be included in our Volume 4, 2017 which has been scheduled to be rolled out in the month of November 2017. 

Regards, 
Thavasianand S. 


To post a reply.
Loader.
Up arrow icon