Wijmo FlexGrid: How to display with full decimal point

Posted by: chst8937 on 28 October 2024, 8:32 pm EST

    • Post Options:
    • Link

    Posted 28 October 2024, 8:32 pm EST - Updated 28 October 2024, 10:18 pm EST

    Hi,

    I’m experiencing difficulties with displaying decimal points when importing an Excel file into a FlexGrid.

    The data within the cells contains the entire decimal value, but the screen only shows up to two decimal places. Here is my code:

    var wjGrid = wijmo.grid;
    var wjGridXlsx = wijmo.grid.xlsx;
    var grid = new wjGrid.FlexGrid('#flexgrid', {
        autoRowHeights: true,
        autoSizedColumn: true,
        itemsSource: []
    });
    
    document.querySelector("#loadXlsx").addEventListener('click', () => {
        let inputEle = document.querySelector('#importFile');
        if (inputEle.files[0]) {
            resetForm(!cntrFlg);
            wjGridXlsx.FlexGridXlsxConverter.loadAsync(grid, inputEle.files[0], { includeStyles: true, includeCellStyles: true });
        }
    });

    The issue arises when I plan to export the modified data to a CSV file. During the export process, only the data displayed on the screen is recognized, resulting in only two decimal places being exported. Below is the code that runs when the save button is clicked:

    var rng = new wijmo.grid.CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1);
    var csvData = grid.getClipString(rng, wijmo.grid.ClipStringOptions.CSV | wijmo.grid.ClipStringOptions.QuoteAll, true, true);
    
    var blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
    var formData = new FormData();
    formData.append('Upload', blob);

    How can I resolve this issue? I would like the entire decimal value to be displayed on the screen in the FlexGrid, as shown in the attached file.

  • Posted 29 October 2024, 12:57 am EST

    Hi Shawn,

    Make sure to set the format property of each number column to F3(for getting numbers up to 3 decimal point) or F4 depending on your use case.

    For this please refer to the attached sample application :

    https://stackblitz.com/edit/react-xqftte?file=index.js

    Additionally, for more information on formatting, please refer to the following pages of our documentation:

    Regards,

    Akshay

  • Posted 29 October 2024, 1:12 am EST - Updated 29 October 2024, 1:49 am EST

    Hi, Akshay.

    I am reaching out to discuss some challenges I am facing with the FlexGrid implementation.

    1. Dynamic Columns: My data files contain a variable number of columns, which makes it difficult to specify the columns when creating the grid. As a result, I am currently displaying the file as it is, without predefined column settings. I would like to know if there are any best practices or features in your library that can help manage this dynamic column scenario more effectively.

    2. Inconsistent Data Formats: Additionally, the data I receive does not have a consistent format. For instance, some numbers appear as 0.00, while others are formatted as 000.000. My goal is to standardize the numeric representation across the grid to ensure all numbers are displayed uniformly.

    Is there a recommended approach to handle this variability in data formatting?

    And Could you please point me to any resources or examples that demonstrate how to implement Globalize in a practical context?

    I appreciate any insights or suggestions you can provide regarding these issues.

    Thank you.

    ++ I discovered that the data format in this workbook is #,##0.00. Is there a way to modify it for display on the screen?

    there are three numbers on the workbook(which use for wjGridXlsx.FlexGridXlsxConverter.loadAsync), (5.077, 1886342, 1689945)(with format I tried but not affected)



    but each number has different format (5.08, 1886342, 1689945.00)

  • Posted 30 October 2024, 1:08 am EST

    Hi Shawn,

    It is not possible to directly use the “##00.00” string in FlexGrid as the Filter string much be a Standard Numeric Format string.

    For having dynamic digits after the decimal point I would suggest you to set the format string as ‘G99’ or ‘g99’.

    For reference, please check the following sample: https://stackblitz.com/edit/js-eawbjf?file=index.js

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels