VirtualScrolling refresh not working when enabled, with grouping.

[FRANN LP]

Hello, i can't refresh the content of my grid, when i click a button to get a new dataSource, it doesn't nothing, but when i change the propertie of enableVirtualization to "false", the content of the grid is refreshing properly.

Code example above:

Hello, i can't refresh the content of my grid, when i click a button to get a new dataSource, it doesn't nothing, but when i change the propertie of enableVirtualization to "false", the content of the grid is refreshing properly.

Code example above:

functiongenerarReporte() {
    grid.dataSource = null;
    letformStatus = formObj.validate();
    if (formStatus) {
    mostrarCargandoLayout();
    vardataManager = null;
    vardataSource = newej.data.DataManager({
        url:urlAPI + "api/Configuracion/_ct_rpt_libroAuxiliarMayor",
        adaptor:newej.data.WebApiAdaptor
    }).executeQuery(newej.data.Query().addParams('organizacionId', org)
        .addParams("cuenta1", comboBoxCuenta1.itemData.value)
        .addParams("cuenta2", comboBoxCuenta2.itemData.value)
        .addParams("criterio", comboBoxCriterios.value)
        .addParams("fecha1", $("#txtFechaInicial").val())
        .addParams("fecha2", $("#txtFechaFinal").val())
        .addParams("centrocostoId", -1)
        .addParams("divisionId",comboBoxProyecto.value)
        .addParams("usuarioId", usuarioId)
        .addParams("etiquetaId", comboBoxEtiqueta.value)
        .addParams("conex", utf8_to_b64(cadena)))
        .then((e) => {
            //dataManager = e.result;
            //grid.setProperties({
            //  columns: [],
            //  columnModel: [],
            //  dataSource: e.result
            //});
            grid.columns = [];
            grid.columns = columnas;
            grid.dataSource = e.result;
           // grid.hideSpinner();
            grid.refresh();
            ocultarCargandoLayout();
        });
    }
    grid.executeQuery


}
 functioninitGrid() {


            ej.grids.Grid.Inject(ej.grids.ExcelExport, ej.grids.Toolbar, ej.grids.Filter,ej.grids.Group, ej.grids.VirtualScroll);
            grid = newej.grids.Grid({
                dataSource: [],
                recordDoubleClick:recordDoubleClick,
                height:500,
                enableVirtualization:true,
                allowGrouping:true,
                groupSettings: { captionTemplate:'#captiontemplate',showDropArea:false, columns: ['concepto_Padre','concepto']},
                allowExcelExport:true,
                filterSettings: { type:'Excel' },
                locale:'es-MX',
                columns:columnas,
                aggregates: [{
                    columns: [
                        {
                            type:'Sum',
                            field:'cargos',
                            format:'N2',
                            footerTemplate:'${Sum}',
                            textAlign:'Right',
                            groupFooterTemplate:'${Sum}'
                        },
                        {
                            type:'Sum',
                            field:'abonos',
                            format:'N2',
                            footerTemplate:'${Sum}',
                            textAlign:'Right',
                            groupFooterTemplate:'${Sum}'
                        },
                        {
                            type:'Custom',
                            field:'Saldo',
                            format:'N2',
                            customAggregate:customAggregateFn,
                            footerTemplate:'${Custom}',
                            textAlign:'Right',
                            groupFooterTemplate:'${Custom}'
                        },
                    ]
                },
                ]
            });
            grid.toolbarClick = function (args) {
                if (args['item'].id === 'Grid_excelexport') {
                    varexcelExportProperties = {
                       fileName:"LibroAuxiliarMayor.xlsx"
                    };
                    grid.excelExport(excelExportProperties);
                }
            };
            grid.appendTo('#Grid');
}


$(document).ready(function () {
    ocultarCargandoLayout();
    $("#toolbar").kendoToolBar({
        items: [
            {
                id:"btnGenerar",
                icon:"report-header-section",
                type:"button",
                text:"Generar",
                click:generarReporte
            },
               {
                id:"btnGenerarPdf",
                icon:"print",
                type:"button",
                text:"Imprimir",
                click:generarPdf
            },
               {
                id:"btnGenerarPreview",
                icon:"file-data",
                type:"button",
                text:"Previsualizar impresión",
                click:generarPreview
            },
            {
                id:"btnGenerarExcel",
                icon:"file-excel",
                type:"button",
                text:"Exportar",
                click:generarExcel
            },
        ]
    });
    checkboxChecked();
    fillFechaInicial();
    fillFechaFinal();
    fillPeriodo();
    fillCmbCuenta1();
    fillCmbCuenta2();
    fillCmbCriterios();
    fillCmbDivision();
    fillCmbEtiqueta();
    fillProyecto();
    cargaMesActual();
    ej.base.L10n.load({
        'es-MX': {
            'grid': {
                'EmptyRecord':'Sin registros por mostrar.',
                'Expand All':'Expandir todo',
                'Collapse All':'Colapsar todo',
                'FilterButton':'Filtrar',
                'Search':'Buscar',
                'CustomFilter':'Filtrado customizado',
                'Matchs':'No se encontraron coincidencias',
                'EnterValue':'Ingresa el valor',
                'ClearFilter':'Limpiar filtrado',
                'ShowRowsWhere':'Columnas',
                'AND':'Y',
                'OR':'O',
                'ShowRowsWhere':'Mostrar filas en',
                'MatchCase':'Coincidencia',
                'Matchs':'Sin coincidencias encontradas',
                'NoResult':'Sin coincidencias encontradas',
                'SelectAll':'Seleccionar todo',
                'TextFilter':'Tipo filtrado',
                'ClearButton':'Limpiar',
                'OKButton':'OK',
                'CancelButton':'Cancelar',
                'StartsWith':"Empieza con",
                'EndsWith':'Termina con',
                'Contains':'Contiene',
                'Equal':'Igual',
                'NotEqual':'Diferente',
                'LessThan':'Menor que',
                'LessThanOrEqual':'Menor que o igual que',
                'GreaterThan':'Mayor que',
                'GreaterThanOrEqual':'Mayor que o igual que',
                'EnterValue':'Ingresa un valor',
                'FilterMenu':'Filtrar'
            },
        }
    });
    initGrid();
});

[FRANN LP]

Update: i downloaded the latest version "20.2.0.43" and now is refreshing the data, but when i scroll down in the scroll, the first dataSource appears again, and the new dataSource dissapeared

[Rajapandi Ravi]

Hi Frann,

Greetings from Syncfusion support

We have checked your shared information, before we start providing solution to your query, we need more information for our clarification. Please share the below details that will be helpful for us to provide better solution.

1)            Please share your exact requirement scenario with detailed description.

2)            Please share the Usecase scenario about why you like to add to add the new datasource to the Grid.

3)            In your query you are adding a new datasource by button click, please confirm you like to remove the old datasource and add the new one or like to add the new datasource to the existing one.

4)            Please share your requirement and problem scenario in video demonstration format.

5)            If possible please share any simple issue reproducible sample that would be helpful for us to provide better solution.

Regards,

Rajapandi R