Setting scroll of spreadsheet

[Stephen Welborn]

Is there anyway to set the scroll all the way to the left when opening a spreadsheet?
When I open a spreadsheet it tends to want to scroll right.

[Sangeetha Priya Murugan]

Hi Stephen,

We suspect that you need to scroll the spreadsheet from right to left. And your requirement can be achievable by setting enableRtl as true while initializing the spreadsheet as shown below.

//Initialize Spreadsheet component

let spreadsheet: Spreadsheet = new Spreadsheet({

  enableRtl: true,

  ..//

});

 

Sample Link: https://stackblitz.com/edit/3wube9?file=index.ts

API Link: https://ej2.syncfusion.com/documentation/api/spreadsheet/#enablertl

If the above suggestion doesn’t meet your requirement. Please get back to us with detailed description of your issue with video demonstration or screenshots. If possible, please share the rendering and customization codes. Based on that we will be able to check and provide you a better solution quickly.

[Stephen Welborn]

Would like to programmatically scroll from javascript.  Is that possible??

[Sangeetha Priya Murugan]

Hi Stephen,

Your requirement can be achieved by setting the scrollTop/scrollRight for sheet content and scroller elements as shown below.

function scrollRight() {

  scrollRightPosition = scrollRightPosition + 100;

  spreadsheet.getScrollElement().scrollLeft = scrollRightPosition; // To scroll right

}

 

function scrollBottom() {

  scrolBottomPosition = scrolBottomPosition + 100;

  // To scroll bottom

  spreadsheet.getMainContent().parentElement.scrollTop = scrolBottomPosition;

}

 

For your convenience, we have prepared the sample based on our suggestion, please find the link below.

Sample Link: https://stackblitz.com/edit/3wube9-ddrce8?file=index.ts,index.html

Meanwhile, you also use our goTo method for scroll to the particular cell address based on your need. For more details, please refer to the below link.

https://helpej2.syncfusion.com/documentation/api/spreadsheet/#goto

Please check the above details and kindly get back to us with more details like detailed description of your use case scenario with video demonstration. And confirm whether you need of rtl mode in your end? Based on the provided details we can be able to check and proceed further.

[Stephen Welborn]

I initilize via 

<ejs-spreadsheet id="spreadsheet3" height="500px" allowResizing="true" actionBegin="actionBegin" onCut="return false" showRibbon="false" style="height:1000px" saveUrl="/ForecastInput/saveSpreadsheetCombined" allowSave="true" allowInsert="false" openUrl="/ForecastInput/Open" created="onCreated" allowOpen="true" beforeOpen="beforeOpen" dataSourceChanged="dataSourceChanged">

    @*frozenColumns="4"*@

</ejs-spreadsheet>

Then 

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

var scrollRightPosition = scrollRightPosition + 100;

                spreadsheetObj.getScrollElement().scrollLeft = scrollRightPosition;

Then I get.

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'scrollLeft')

[Stephen Welborn]

Also tried.

 var sheet = spreadsheetObj.getActiveSheet();

                sheet.selectedRange = "E4";

                sheet.goTo('E1');

[Stephen Welborn]

Uncaught (in promise) TypeError: sheet.goTo is not a function

[Sangeetha Priya Murugan]

Hi Stephen,

Based on your provided codes, we suspect that you are not properly getting the spreadsheet instance in your ASP.NET Core application. For your convenience, we have prepared a sample based on the provided codes. In this, we have programmatically scrolled the spreadsheet using our previously suggested solution in button-click events. Please find the attached sample below.

Code Block:

   <ejs-spreadsheet id="spreadsheet" height="500px" allowResizing="true" onCut="return false" showRibbon="false" style="height:1000px" saveUrl="Home/save" allowSave="true" allowInsert="false" openUrl="Home/Open">

</ejs-spreadsheet>

    <button id="customRight" class="e-btn">scroll right</button>

    <button id="customBottom" class="e-btn">scroll bottom</button>

    <button id="goto" class="e-btn">Go TO</button>

</body>

 

<script>

    let scrollRightPosition = 500;

    let scrolBottomPosition = 300;

    document.getElementById('customRight').addEventListener('click', scrollRight);

    document.getElementById('customBottom').addEventListener('click', scrollBottom);

    document.getElementById('goto').addEventListener('click', gotoFunction);

    function gotoFunction() {

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

        spreadsheet.goTo('AB100');

    }

    function scrollRight() {

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

        scrollRightPosition = scrollRightPosition + 100;

        spreadsheet.getScrollElement().scrollLeft = scrollRightPosition; // To scroll right

    }

 

    function scrollBottom() {

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

        scrolBottomPosition = scrolBottomPosition + 100;

        // To scroll bottom

        spreadsheet.getMainContent().parentElement.scrollTop = scrolBottomPosition;

    }

</script>

Please check the above details and get back to us if you need any further assistance on this.

[Sangeetha Priya Murugan]

Sample attached.

Attachment: coresample_fc7a71fe.zip