Weird scroll issue with Grid and inline editing

[Michael Lambert]

If I'm editing a grid with scrolling and there are enough rows in the grid to have to scroll bars, when I go into inline editing the line being edited will scroll off the the screen or some random place (see video) whereby I'll have to scroll either up or down to find the row.  This doesn't happen every time, but very frequently.  It's make editing the grid almost unusable.

Solutions?

Mike

Attachment: ScrollIssue_8ff68d7f.zip

[Renjith Singh Rajendran]

Hi Michael, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We are not able to reproduce the reported issue. We have prepared a sample based on your requirement, which could be downloaded from the link below, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-1487450299 

If you are still facing the issue, please get back to us with the following details, 

1. Essential Studio version details.
2. Share full Grid code example.
3. Share exact scenario or proper replication procedure.
4. If you have enable any adaptor in your sample then provide those detail.
5. If possible share a simple issue reproducing sample or reproduce the issue in the attached sample.

 

The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards, 

Renjith Singh Rajendran. 

[Michael Lambert]

Sorry, forgot to include this in the original post:
The version is: 15.46000.0.17
This issue happens with Chome, FireFox, IE

<ej-grid id="grdHaaS" allow-filtering="true" min-width="500" allow-text-wrap="true" show-column-chooser="true" allow-sorting="true"
         allow-scrolling="true" is-responsive="true" show-summary="true" show-stacked-header="true" allow-searching="true" toolbar-click="ToolBarClick"
         query="new ej.Query().where('Bu', 'equal', 'CPBU', true)">
    <e-datamanager url="/Haas/GetOpex" adaptor="UrlAdaptor" />
    <e-edit-settings allow-adding="false" allow-editing="false" edit-mode="Normal" />
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string>{"search"}'
            custom-toolbar-items='@new List<object>() { new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#Filter" },
                                                        new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#AutoSize" },
                                                        new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#RefreshData" }}'/>           

    <e-filter-settings filter-type="Excel" />
    <e-scroll-settings width=@("100%") height=@("100%") enable-touch-scroll="false" />
    <e-summary-rows>
        <e-summary-row title="Totals">
            <e-summary-columns>
                <e-summary-column summary-type="Sum" format="{0:C0}" display-column="EstimateOpex" datamember="EstimateOpex" />
                <e-summary-column summary-type="Sum" format="{0:C0}" display-column="ActualOpex" datamember="ActualOpex" />
                <e-summary-column summary-type="Sum" format="{0:C0}" display-column="M1Q1" datamember="M1Q1" />
.....
            </e-summary-columns>
        </e-summary-row>
    </e-summary-rows>
    <e-stacked-header-rows>
        <e-stacked-header-row>
            <e-stacked-header-columns>
                <e-stacked-header-column header-text="Q1" css-class="blue2BG" text-align="Center" column='@new List<string> {"M1Q1","M2Q1","M3Q1","Q1Total" }' />
                <e-stacked-header-column header-text="Q2" css-class="blue2BG" text-align="Center" column='@new List<string> {"M1Q2","M2Q2","M3Q2","Q2Total" }' />
                <e-stacked-header-column header-text="Q3" css-class="blue2BG" text-align="Center" column='@new List<string> {"M1Q3","M2Q3","M3Q3","Q3Total" }' />
                <e-stacked-header-column header-text="Q4" css-class="blue2BG" text-align="Center" column='@new List<string> {"M1Q4","M2Q4","M3Q4","Q4Total" }' />
            </e-stacked-header-columns>
        </e-stacked-header-row>
    </e-stacked-header-rows>

    <e-columns>
        <e-column field="HaaStrackingId" header-text="ID" allow-editing="false" is-primary-key="true" width="75" />
        <e-column field="Period" header-text="Period" width="110" />
        <e-column field="DateRequested" header-text="Requested" format="{0:MM/dd/yyyy}" width="120" />
        <e-column field="DateDelivered" header-text="Delivered" format="{0:MM/dd/yyyy}" width="120" />
        <e-column field="Bu" header-text="BU" edit-type="DropdownEdit" datasource="@ViewBag.BUs" width="100" />
        <e-column field="ProjectName" header-text="Project Name" width="120" />
        <e-column field="Description" header-text="Description" width="250" />
        <e-column field="Type" header-text="Type" width="120" />
        <e-column field="Tier" header-text="Tier" width="100" />
        <e-column field="QtyServers" header-text="Qty" width="90" />
        <e-column field="M1Q1" header-text="M1Q1" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="M2Q1" header-text="M2Q1" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="M3Q1" header-text="M3Q1" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="Q1Total" header-text="Q1 Total" format="{0:C0}" text-align="Right" width="100" css-class="blue2BG" />
        <e-column field="M1Q2" header-text="M1Q2" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="M2Q2" header-text="M2Q2" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="M3Q2" header-text="M3Q2" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="Q2Total" header-text="Q2 Total" format="{0:C0}" text-align="Right" width="100" css-class="contacts" />
        <e-column field="M1Q3" header-text="M1Q3" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="M2Q3" header-text="M2Q3" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="M3Q3" header-text="M3Q3" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="Q3Total" header-text="Q3 Total" format="{0:C0}" text-align="Right" width="100" css-class="blue3BG" />
        <e-column field="M1Q4" header-text="M1Q4" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="M2Q4" header-text="M2Q4" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="M3Q4" header-text="M3Q4" format="{0:C0}" text-align="Right" width="100" />
        <e-column field="Q4Total" header-text="Q4 Total" format="{0:C0}" text-align="Right" width="100" css-class="blue4BG" />
        <e-column field="FYTotal" header-text="FY4 Total" format="{0:C0}" text-align="Right" width="120" css-class="qtrCSS" />

    </e-columns>

</ej-grid>

[Renjith Singh Rajendran]

Hi Michael, 

We have analyzed your query. We are able to reproduce the reported issue. We have logged the issue “Editing a record scrolls the grid when `is-responsive` and `min-width` are enabled” as a defect. 

Fix for this issue will be included in the 2018 Volume 1, SP1 release which is expected to roll out in the month of March 2018. 

Until then we appreciate your patience. 

Regards, 

Renjith Singh Rajendran. 

[Michael Lambert]

Any ETA on when this update will be made available?

Thanks

[Farveen Sulthana Thameeztheen Basha]

Hi Michael,  

  

Fix for this issue will be included in the 2018 Volumn 1 SP! release which is expected to roll out at the end of March 2018. 

  

Regards, 

  

Farveen sulthana T