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

Spreadsheet row/cell height bug

Hi.


I use spreadsheet, but if I enter data using Korean, the height of header cell and input cell does not match and it is selected strangely even when selected. Please refer to the red box in the attached photo.

syncfusion sheet bug.PNG

I think it will be solved if you tell me how to set the cell height default value.


I would appreciate it if you could give me a solution as soon as possible.


10 Replies

VR Vasanth Ravi Syncfusion Team October 12, 2022 10:43 AM

Hi TaeWook,


We have checked your requirement and it can be achieved through beforeCellRender() event. Using needHeightCheck property you can set the required height for the cell that contains Korean characters.


CODE BLOCK:


beforeCellRender(args) {

            var textContainsRowIdx = [1, 2, 3, 4, 5];

            if (textContainsRowIdx.indexOf(args.rowIndex) != -1) {

              args.needHeightCheck = true;

            }

}

 


Stackblitz Sample: https://stackblitz.com/edit/hkygeq?file=index.ts


Please do refer to the above provided sample and snippet. Kindly get back to us if you need further assistance regarding.


Regards,

Vasanth R



TK TaeWook Kang October 12, 2022 08:29 PM

Thank you for your answer.

But it didn't work out perfectly.

The first time you read a saved file, the height is good, but the same thing happens when you enter additional data later.

 

As you can see, up to the 7th row is data that has already been read from the stored state, and the 8th to 13th row entered after that is still experiencing problems.

So I added the same code to the cellSave event and tested it, but it was not solved.


Below is my code.

@{
    ViewData["Title"] = "Working note";
}
<div class="row">
    <div class="col-xl-12">
        <ejs-spreadsheet id="spreadsheet" openUrl="Open" saveUrl="Save" height="840px" created="spreadsheetOpen" fileMenuBeforeOpen="fileMenuBeforeOpen" fileMenuItemSelect="fileMenuItemSelect" beforeCellRender="beforeCellRender" cellSave="cellSave"></ejs-spreadsheet>
    </div>
</div>


<script>
    function spreadsheetOpen() {
        var spreadsheet = document.getElementById('spreadsheet').ej2_instances[0];
        spreadsheet.addFileMenuItems([{ text: 'Save', iconCss: 'e-save e-icons' }], 'Open');


        fetch('/WorkingNote/LoadExcel', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ FileName: "WorkingNote", sJobNo: sessionStorage.getItem('JobKey') })
        })
        .then((response) => response.json())
            .then((data) => {
                spreadsheet.openFromJson({ file: data });
        })
    }


    function fileMenuBeforeOpen() {
        var spreadsheet = document.getElementById('spreadsheet').ej2_instances[0];


        spreadsheet.hideFileMenuItems(['Save As', "New", "Open"]);
    }


    //File - Save Click 시 file server에 저장
    function fileMenuItemSelect(args) {
        if (args.item.text == "Save") {
            var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
            var pdfSettings = { FitSheetOnOnePage: false };


            spreadsheet.saveAsJson().then((Json) =>
                fetch("/WorkingNote/SaveExcel?sJobNo=" + sessionStorage.getItem('JobKey'), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        FileName: "WorkingNote",
                        JSONData: JSON.stringify(Json.jsonObject.Workbook),
                        ContentType: "Xlsx",
                        VersionType: "Xlsx",
                        SaveType: "Xlsx",
                        PDFLayoutSettings: JSON.stringify(pdfSettings)
                    })
                })
                    .then((response) => response.json())
                    .then((data) => {
                        console.log(data);
                    })
            );
        }
    }


    function beforeCellRender(args) {
        args.needHeightCheck = true;
    }


    function cellSave(args) {
        args.needHeightCheck = true;
    }
</script>




VR Vasanth Ravi Syncfusion Team October 13, 2022 10:35 AM

Hi TaeWook,


We have been checking your issue with the provided snippet at our side. We need some more time to validate it and to provide better solution regarding. So, we will update you further details on October – 17, 2022.


We appreciate your patience until then.


Regards,

Vasanth R



VR Vasanth Ravi Syncfusion Team October 18, 2022 11:29 AM

Hi TaeWook,


We have prepared a sample that meets out your requirement. Using actionComplete() event you can avail the requirement. You can fetch the index value of the row that has been edited and can adjust the height with setRowheight() property. Here by we attach the sample and code block for reference.


CODE BLOCK:


actionComplete(args) {

    let sheet = spreadsheet.getActiveSheet();

    let cellIdx: number[];

    if (args.action == 'clipboard' || args.action == 'autofill') {

      let newRange = args.eventArgs.pastedRange ? args.eventArgs.pastedRange : args.eventArgs.fillRange;

      let address = newRange.indexOf('!') > -1 ? newRange.split('!')[1] : newRange;

      cellIdx = getRangeIndexes(address);

      for (let i = cellIdx[0]; i <= cellIdx[2]; i++) {

        for (let j = cellIdx[1]; j <= cellIdx[3]; j++) {

          spreadsheet.setRowHeight(27, i, sheet.id - 1);

        }

      }

    }

    if (args.action == 'cellSave') {

      let cell: string = spreadsheet.getActiveSheet().activeCell;

      cellIdx = getRangeIndexes(cell);

      spreadsheet.setRowHeight(27, cellIdx[0], sheet.id - 1); // height, row_index, sheet_index

      // you can customize and set the height as required.

    }

  }

 


Stackblitz Sample: https://stackblitz.com/edit/hkygeq?file=index.ts


Hereby attached API links for your kind reference.


https://ej2.syncfusion.com/documentation/api/spreadsheet/#actioncomplete


https://ej2.syncfusion.com/documentation/api/spreadsheet/#setrowheight


Kindly get back to us if you need further assistance regarding.


NOTE: If this post is helpful, please mark it as an answer so that other members can locate it more quickly.


Regards,

Vasanth R



TK TaeWook Kang replied to Vasanth Ravi October 27, 2022 12:03 AM

Hello.

Thank you for your reply. But there's a big problem.


In addition to entering data into cells using Korean, the same problem occurs when increasing the text size of a particular cell. I don't think it's going to be solved by adding a code. Please completely improve the spreadsheet so that it can be used in Korean. Not available in this state.


And there's another problem. If you move the focus (blue border) without double-clicking the cell and enter the text immediately, the first letter is entered in English even if you enter Korean. You'll understand if you watch the video.


Please check the attached video for details.


I would appreciate it if you could improve it as soon as possible. I'm in a hurry.


Attachment: Spread_sheet_bug_bc72d32.zip


VR Vasanth Ravi Syncfusion Team October 27, 2022 10:17 AM

Hi Taewook,


We have checked your reported issue and modified the provided sample with setTextLineHeight(). The text line height for each characters varies according to the language specified. We hereby attach the modified sample for your kind reference.


CODE BLOCK:

beforeCellRender(args) {

    args.needHeightCheck = true;

    setTextLineHeight(1.45);

  },

 


Stackblitz Sample:
https://stackblitz.com/edit/hkygeq-umkgya?file=index.ts


Kindly get back to us if you need further assistance regarding.



Regards,

Vasanth R



TK TaeWook Kang November 7, 2022 06:32 PM

I would appreciate it if you could tell me how to handle it with javascript code, not typescript.



VR Vasanth Ravi Syncfusion Team November 9, 2022 09:40 AM

Sorry for the inconvenience caused.

 

We have modified the sample for the requested platform and attached it below.

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Forum_Attachment-1541944758 

 

NOTE: If this post is helpful, please mark it as an answer so that other members can locate it more quickly.



TK TaeWook Kang November 9, 2022 08:04 PM

Please also give me information about getRangeIndexes.



SP Sangeetha Priya Murugan Syncfusion Team November 16, 2022 08:44 AM

We have corrected the sample based on your requirement by using the getRangeIndexes method, as shown below. And this method returns the cell address in array format.


Code Block:


 

 

 

<script>

 

function actionComplete(args) {

    var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');

        let sheet = spreadsheet.getActiveSheet();

        let cellIdx = [];

        if (args.action == 'clipboard' || args.action == 'autofill') {

            let newRange = args.eventArgs.pastedRange ? args.eventArgs.pastedRange : args.eventArgs.fillRange;

            let address = newRange.indexOf('!') > -1 ? newRange.split('!')[1] : newRange;

          cellIdx = ejs.spreadsheet.getRangeIndexes(address);

            for (let i = cellIdx[0]; i <= cellIdx[2]; i++) {

                for (let j = cellIdx[1]; j <= cellIdx[3]; j++) {

                    spreadsheet.setRowHeight(27, i, sheet.id);

                }

            }

        }

        if (args.action == 'cellSave') {

            let cell = spreadsheet.getActiveSheet().activeCell;

          cellIdx = ejs.spreadsheet.getRangeIndexes(cell);

            spreadsheet.setRowHeight(27, cellIdx[0], sheet.id); // height, row_index, sheet_index

            // you can customize and set the height as required.

        }

    }

 

    function beforeCellRender(args) {

        args.needHeightCheck = true;

ejs.spreadsheet.setTextLineHeight(1.45);

    }

 

</script>

 


Please find the sample link below.


Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core-sample-1864646998


Loader.
Live Chat Icon For mobile
Up arrow icon