how to enable virtual scrolling

[Luis Carlos]

Hi.

In this example https://jsplayground.syncfusion.com/kpxp2jch the grid rows disappear when I'm moving the scroll bar. I have been trying to do this effect in my web, but I couldn't.

When I add the "allowVirtualScrolling" parameter to settings  (see image 3), I see the grid with double footer as you can see in the first image, furthermore It shows an error (see imagen 2).

Thank you in advance.

Luis.

Image 1 - grid

Image 2 - error

Image 3 - scrollSettings

[Seeni Sakthi Kumar Seeni Raj]

Hi Luis,  

 

Thanks for contacting Syncfusion Support.  

 

Query #1: In this example https://jsplayground.syncfusion.com/kpxp2jch the grid rows disappear when I'm moving the scroll bar. I have been trying to do this effect in my web, but I couldn't 

 

To show a white space in the Grid while scrolling, you must set the allowVirtualScrolling as true alone. If you set the enableVirtualization of scrollSettings as true, it will remove the white space. So, we suggest to check this and remove the enableVirtualization (if you have given). If you are still facing the problem, please share the following details.  

 

 

1. Complete code example of the Grid
2. Stringified mode of the Grid
1. Open the console window after rendering the Grid
2. Type the ‘ JSON.stringify($(".e-grid").ejGrid("model"))  ’

 

 

3. Copy the retrieved string model to the text file and upload to us

 

Query #2: When I add the "allowVirtualScrolling" parameter to settings 

 

We could see you are using the scrollSettings.width as the 0 which is not recommended. So, we suggest to mention the width as a defined value like “auto” or any other defined number 

 

Regards,  

Seeni Sakthi Kumar S. 

[Luis Carlos]

I forgot to tell you that each row has a checkbox and detail column. 

Here, you have the grid setting just before render it.

{"locale":"es-ES","allowPaging":true,"allowGrouping":false,"allowFiltering":true,"groupSettings":{"enableDropAreaAutoSizing":true},"allowSorting":true,"allowResizing":true,"allowSelection":true,"allowTextWrap":true,"editSettings":{"allowEditing":false,"allowAdding":true,"allowDeleting":true},"toolbarSettings":{"showToolbar":true,"customToolbarItems":[{"templateID":"#0525d621-7307-4d39-94a8-77c50d3790d4","tooltip":"Exportar a excel"},{"templateID":"#4181e1c0-0fc7-426a-813f-e96cd9f81e7f","tooltip":"Número de registros"}],"toolbarItems":["search"]},"cssClass":"custom","filterSettings":{"filterType":"excel"},"allowSearching":true,"container":{"0":{},"length":1,"prevObject":{"0":{},"length":1,"context":{"location":{"rel='nofollow' href":"http://localhost/webpage","ancestorOrigins":{},"origin":"http://localhost","protocol":"http:","host":"localhost","hostname":"localhost","port":"","pathname":"/webpage/","search":"","hash":"#coro/cajon"},"description":"Sistema de Gesti�n de beticos"},"selector":"#62d6414b-fe71-49c9-837b-5263f5773034"},"context":{"location":{"rel='nofollow' href":"http://localhost/webpage/#coro/cajon","ancestorOrigins":{},"origin":"http://localhost","protocol":"http:","host":"localhost","hostname":"localhost","port":"","pathname":"/webpage/","search":"","hash":"#coro/cajon"},"description":"Sistema de cantimplora"},"selector":"#62d6414b-fe71-49c9-837b-5263f5773034 [data-html-id=\"tablacoros\"]"},"allowScrolling":true,"scrollSettings":{"height":360,"width":"auto","allowVirtualScrolling":true},"columns":[{"type":"checkbox","width":40,"excludeFromExcelExport":false,"allowEditing":false},{"headerText":"Fecha","field":"FechaE_date","cssClass":"center date","allowSorting":true,"textAlign":"center","headerTextAlign":"center","format":"{0:dd/MM/yyyy}","width":"100px","convertDate":{"format":"DD/MM/YYYY","changeData":"FechaE_date"},"sClass":"center date"},{"headerText":"Factura","cssClass":"right number","allowSorting":true,"textAlign":"right","headerTextAlign":"center","width":"150px","customFormat":{"changeData":"Invoice_NUEVO"},"sClass":"right number","field":"Invoice_NUEVO"},{"headerText":"Periodo","field":"PerFac","cssClass":"right number","allowSorting":true,"textAlign":"right","headerTextAlign":"center","width":"90px","sClass":"right number"},{"headerText":"Plazo","field":"NumPlazo","cssClass":"right number","allowSorting":true,"textAlign":"right","headerTextAlign":"center","width":"80px","sClass":"right number"},{"headerText":"Vencimiento","field":"FLimite_date","cssClass":"center date","allowSorting":true,"textAlign":"center","headerTextAlign":"center","format":"{0:dd/MM/yyyy}","width":"118px","convertDate":{"format":"DD/MM/YYYY","changeData":"FLimite_date"},"sClass":"center date"},{"headerText":"Total","field":"Importe","cssClass":"right number","allowSorting":true,"textAlign":"right","headerTextAlign":"center","width":"80px","sClass":"right number"},{"headerText":"Pendiente","field":"ImpPte","cssClass":"right number","allowSorting":true,"textAlign":"right","headerTextAlign":"center","width":"100px","sClass":"right number"},{"headerText":"Estado","field":"DenEstado","cssClass":"left text","allowSorting":true,"textAlign":"left","headerTextAlign":"center","sClass":"left text"},{"headerText":"Ord. Corte","field":"NumTra","cssClass":"right number","allowSorting":true,"textAlign":"right","headerTextAlign":"center","width":"120px","sClass":"right number"},{"headerText":"Recargo","field":"ImpRecargo","cssClass":"right number","allowSorting":true,"textAlign":"right","headerTextAlign":"center","width":"90px","sClass":"right number"},{"headerText":"Gastos","field":"ImporteGastos","cssClass":"right number","allowSorting":true,"textAlign":"right","headerTextAlign":"center","width":"80px","sClass":"right number"},{"headerText":"Servicio","field":"Nombre","cssClass":"left text","allowSorting":true,"textAlign":"left","headerTextAlign":"center","sClass":"left text"},{"headerText":"Detalles","cssClass":"center noRowEvent text","allowSorting":false,"textAlign":"center","headerTextAlign":"center","width":"90px","sClass":"center noRowEvent text"},{"field":"Id","isPrimaryKey":true,"visible":false}],"dataSource":[{"FechaE":1411077600000,"Descripcion":"...","PerFac":202403,"ClaseCon":1,"Contrato":100109,"Vencimiento":1411077600000,"FLimite":1414710000000,"Importe":100.23,"Moneda":"EUR","NumDomic":null,"Estado":1,"DenEstado":"Confirmado","IndIReal":"S","ImpPte":101.23,"Fraccion":"N","GestImpag":1,"DenTercero":"BATMAN","DenCIF":"99999999M","Usuario":"luis","TipFacSerCobFallido":"N","TipFacSerCobEjecut":"N","TipFacSercoroParc":"S","TipFacSerCobParFra":"S","TipFacSerPagaboPte":"N","TipFacSerPagaBobco":"N","Domicilio":"CL/ FALSA, 123","SituacionContr":3,"Nombre":"Madrid","Marca":"S","NumTra":12673,"SituacionCont":null,"SituacionSum":null,"IndRecargo":"S","ContRecargo":0,"ImpRecargo":0,"ImporteGastos":0.47,"NumPlazo":1,"Ejercicio":2214,"NumFac":1028547,"SerieFac":"011","FechaE_date":"19/09/2314","Invoice_NUEVO":"010101","FLimite_date":"31/10/2314","Id":"aa7539-4767-4c0d-9bf5-3e81a8d934dc"},{"FechaE":1411077600000,"Descripcion":"...","PerFac":202403,"ClaseCon":1,"Contrato":100109,"Vencimiento":1411077600000,"FLimite":1414710000000,"Importe":100.23,"Moneda":"EUR","NumDomic":null,"Estado":1,"DenEstado":"Confirmado","IndIReal":"S","ImpPte":101.23,"Fraccion":"N","GestImpag":1,"DenTercero":"BATMAN","DenCIF":"99999999M","Usuario":"luis","TipFacSerCobFallido":"N","TipFacSerCobEjecut":"N","TipFacSercoroParc":"S","TipFacSerCobParFra":"S","TipFacSerPagaboPte":"N","TipFacSerPagaBobco":"N","Domicilio":"CL/ FALSA, 123","SituacionContr":3,"Nombre":"Madrid","Marca":"S","NumTra":12673,"SituacionCont":null,"SituacionSum":null,"IndRecargo":"S","ContRecargo":0,"ImpRecargo":0,"ImporteGastos":0.47,"NumPlazo":1,"Ejercicio":2214,"NumFac":1028547,"SerieFac":"011","FechaE_date":"19/09/2314","Invoice_NUEVO":"010101","FLimite_date":"31/10/2314","Id":"aa7539-4767-4c0d-9bf5-3e81a8d934dc"}],"detailColumn":{}}

[Luis Carlos]

And I've attached the grid model.

Note: The data sources is fake.

If you need any information, let me know, thanks.

Luis.

Attachment: model_98b64dd9.rar

[Seeni Sakthi Kumar Seeni Raj]

Hi Luis,  

 

Query: When I add the "allowVirtualScrolling" parameter to settings  (see image 3), I see the grid with double footer as you can see in the first image, furthermore It shows an error (see imagen 2). 

 

From the provided grid model we could see that, you have set allowPaging as “true” due to this default pager will show in the grid and also you have enabled allowVirtualScrolling as “true” due to virtual scrolling the page status information will show in grid due to this double footer is displayed. To avoid the reported issue remove the allowPaging property (or) set allowPaging as “false”. 

 

For your convenience we have created the sample based on the your model. 

 

1. Please refer the below output image which is created based on the model shared at September 4, 2018 11:45 AM

 

 

 

2. Also refer the below output image which is created based on the model shared at  September 4, 2018 11:51 AM

 

 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/virtualscrolling_sample1720405812.zip  

 

If you are still facing problem, please share a video demo of the issue. 

 

Regards, 

Seeni Sakthi Kumar S. 

[Luis Carlos]

Hi.

I've set the "allowPaging" parameter from true to false, as per your reply and It works perfectly, however the grid footer is english, besides of grid language is spanish, as you can see in the bellow images.

Thanks again.

Luis Carlos.

[Luis Carlos]

I've forgotten to ask you if the virtual scrolling is possible using the following parameters.

editSettings: {

    allowEditing: true,

    allowAdding: true,

    allowDeleting: true

}

Thanks.

Luis Carlos.

[Seeni Sakthi Kumar Seeni Raj]

Hi Luis,  

 

Query #1: Pager Message not applying the Locale.  

 

Since the Pager message for the Virtual Scrolling is handled by the Grid, PagerInfo must be set in the ej.Grid.Locale as shown in the following code example.  

 

<div id="Grid"></div> 

<script type="text/javascript"> 

    ej.Grid.Locale["es-ES"] = { 

        PagerInfo: "{0} de {1} páginas ({2} artículos)", 

            . . . 

                      . ..  

    }; 

 

    $(function () { 

        $("#Grid").ejGrid({ 

            dataSource: window.gridData, 

            groupSettings: { enableDropAreaAnimation: false }, 

            locale: "es-ES", 

            allowScrolling: true, 

            scrollSettings: { width: 500, height: 400, allowVirtualScrolling: true }, 

              . . . 

                     . . . 

        }); 

    }); 

</script> 

 

Refer to the following code example.  

 

http://jsplayground.syncfusion.com/xtv5kaix 

 

Query #2: Editing support in the Grid.  

 

Editing/Adding support is not provided for the Normal Virtual Scrolling in the Grid. But it has been provided for the Enhanced Virtual Scrolling feature. To enable this, you have to set the enableVirtualization as true. Refer to the following Help Document for the Enhanced Virtual Scrolling.  

 

https://help.syncfusion.com/js/grid/scrolling#enhanced-virtual-scrolling 

 

But this feature will not behave like the normal virtual scrolling.  

 

1. It will not show the white space while scrolling the Grid
2. Pager message will not be shown

 

Regards,  

Seeni Sakthi Kumar S. 

[Luis Carlos]

Good evening.

The header checkbox and row checkboxes do not work properly any way. I've attached a zip which contains two files, one of them is the model using allowVirtualScrolling as true, and another is the model using enableVirtualization as true.

I will be awaiting for your reply, thank you again.

Regards, Luis Carlos.

Attachment: models_551c5306.rar

[Seeni Sakthi Kumar Seeni Raj]

 

Please share your exact issue with replication procedure for further assistance. 

Regards, 

Seeni Sakthi Kumar S. 

[Seeni Sakthi Kumar Seeni Raj]

Hi Luis, 

 

Please ignore previous update. 

 

We have prepared the sample with your Grid models. We have faced some issues in following scenario. If we use enableVirtualization click the check box to unselect the row, sometime check box are not unticked but row selection will cleared. If we use allowVirualScrolling alone, we have faced header check box issue. That is after select all the records, unselect any one of the records in Grid. That time Grid header check box does not change to unchecked state. Also please refer the following screenshots, 

 

If use enableVirtualization, 

 

 

If use allowVirtualScrolling alone, 

 

 

Please share your exact issue with replication procedure for further assistance. 

Regards, 

Seeni Sakthi Kumar S.