PDA

View Full Version : [CLOSED] Lockable grid auto scrolling problem



AlbertoCe
Nov 25, 2014, 10:12 PM
Hi,

I have this problem: when I select one of the latest visible rows on a lockable grid (that has no locked column) it scroll the rows towards the top putting the selected row at the middle of the grid. In this way the row under the mouse pointer is no longer the one I selected.
This is the code to reproduce the problem.

VIEW



@using Ext.Net;
@using Ext.Net.MVC;
@model System.Collections.IEnumerable
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Sample</title>
<link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
<style>
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
}
</style>

<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script> </head>
<body>
@(Html.X().ResourceManager())
@(
Html.X().Viewport()
.ID("mainViewport")
.Layout(LayoutType.Border)
.Items(vpitems =>
{
vpitems.Add(

Html.X().Panel()
.ID("processArea")
.Region(Region.Center)
.Layout(LayoutType.Fit)
.Items(
i => i.Add(

Html.X().GridPanel()
.EnableLocking(true)
.Title("Array Grid")
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("company"),
new ModelField("price", ModelFieldType.Float),
new ModelField("change", ModelFieldType.Float),
new ModelField("pctChange", ModelFieldType.Float),
new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
)
)
.DataSource(Model)
)
.ColumnModel(
Html.X().Column().Text("Company").DataIndex("company").Flex(1),
Html.X().Column().Text("Price").DataIndex("price").Renderer(RendererFormat.UsMoney),
Html.X().Column().Text("Change").DataIndex("change").Renderer("change"),
Html.X().Column().Text("Change").DataIndex("pctChange").Renderer("pctChange"),
Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange")
)

)
)
);

})
)


</body>
</html>


CONTROLLER



using System.Collections;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using ExtGridLockScroll.Models;

namespace ExtGridLockScroll.Controllers
{
public class ExtNetController : Controller
{
public ActionResult Index()
{
ExtNetModel model = new ExtNetModel()
{
Title = "Welcome to Ext.NET",
TextAreaEmptyText = ">> Enter a Message Here <<"
};

return View(Companies.GetAllCompanies());
}

public ActionResult SampleAction(string message)
{
X.Msg.Notify(new NotificationConfig
{
Icon = Icon.Accept,
Title = "Working",
Html = message
}).Show();

return this.Direct();
}
}

public class Companies
{
public static IEnumerable GetAllCompanies()
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" },
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" },
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
}
}
}

AlbertoCe
Nov 26, 2014, 9:12 PM
Hi Daniil,

I share the project I used to reproduce the problem.
You can find it here:

https://onedrive.live.com/redir?resid=BD980AE915BDA4D2!36053&authkey=!AGQkaHdxzzNwBd8&ithint=file%2czip

Moreover I attached two images of the chrome window before and immediately after the mouse click.

Let me know if I could do anything more to help you reproduce the problem.

Best regards,
Alberto

Daniil
Nov 27, 2014, 2:57 PM
Thank you for sharing a test project, but sorry, we don't deal with projects unless we explicitly requests. Please read 7. C) here.
Forum Guidelines For Posting New Topics
(http://forums.ext.net/showthread.php?3440)

If requested by a member of the Ext.NET support team, create a simplified Visual Studio (or Visual Web Developer) Project which demonstrates how to reproduce the problem.

I wrote this:

Tested with the latest v2 in IE10, Firefox and Chrome. What are your testing conditions?

Could you, please, answer the question? What is the Ext.NET version and the browser(s) you are testing with?

AlbertoCe
Nov 27, 2014, 3:06 PM
Hi Daniil,

I used the nuget package Ext.NET.MVC4 version 2.5.3.1 with Chrome version 39.0.2171.71 m.
To create the test project I just copied your "GridPanel -> ArrayGrid -> Simple" sample and increase the number of rows used by the grid and setting the EnableLocking property to true (".EnableLocking(true)").

Best regards,
Alberto.

Daniil
Nov 28, 2014, 3:14 PM
I still cannot reproduce.

I tested with Ext.NET v2.5.3.1 in the exact same version of Chrome. When I select the last row the scrollbar stays at the same position, it doesn't move at all.

Could you deploy a test case on the Internet and provide us with a link? Do you have such a possibility?

AlbertoCe
Nov 28, 2014, 3:43 PM
Hi Daniil,

I just published the test project here :

http://demo.basisgroup.com/extgridlock/extnet

Best regards,
Alberto

AlbertoCe
Nov 28, 2014, 3:49 PM
Hi Daniil,

I noticed just now that if I lock a column and then unlock it the scroll bug does not occur.
So you should open the page and just click on the last visible row.

Best regards,
Alberto

Daniil
Nov 30, 2014, 10:47 PM
The online test case doesn't reproduce the issue for me.


I noticed just now that if I lock a column and then unlock it the scroll bug does not occur.
So you should open the page and just click on the last visible row.

Yes, after loading the page I do nothing except scrolling to the bottom and clicking the last row.

Please clarify is it reproducible in Chrome only?

Is it not reproducible in Firefox or IE?

Also could you, please, provide a screencast of the issue? Maybe, it would clarify something.

AlbertoCe
Dec 01, 2014, 5:38 AM
Hi Daniil,

You should not scroll manually to the bottom.
You should just open the page and click on one of the latest VISIBLE rows and the grid will automatically scroll the rows putting the selected one in the middle of the grid.

Seems to be e Chrome related problem only.

Best regards,
Alberto

Daniil
Dec 01, 2014, 4:40 PM
Sorry, I didn't get it before. Now I am able to reproduce. Yes, it appears to happen in Chrome only. I will try to find a reason of such the behavior.

AlbertoCe
Dec 09, 2014, 11:54 AM
Hello Daniil,

Any news about this problem ?

Best regards,
Alberto.

Daniil
Dec 10, 2014, 10:54 AM
Unfortunately, no news. So far I am unable to determine a reason of the problem. I will post a follow-up if some new information appears.

AlbertoCe
Dec 12, 2014, 1:23 PM
Hi Daniil,

It is a problem related to ExtJs ? Should we open a bug report on their support website ?

Best regards,
Alberto.

Daniil
Dec 12, 2014, 11:00 PM
Yes, the problem is reproducible with ExtJS without Ext.NET. If you report it to Sencha, it would be good. Maybe, they will answer something.

Anyways, I am still investigating this issue.

Daniil
Dec 19, 2014, 9:30 AM
Please try this patch.


Ext.selection.RowModel.override({
onLastFocusChanged: function (oldFocused, newFocused, supressFocus) {
var views = this.views,
viewsLn = views.length,
rowIdx,
i = 0;

if (oldFocused) {
rowIdx = views[0].indexOf(oldFocused);
if (rowIdx != -1) {
for (; i < viewsLn; i++) {
views[i].onRowFocus(rowIdx, false, true);
}
}
}

if (newFocused) {
rowIdx = views[0].indexOf(newFocused);
if (rowIdx != -1) {
for (i = 0; i < viewsLn; i++) {
if (views[i].panel.isLocked) {
if (views[i].headerCt.getVisibleGridColumns().length > 0) {
views[i].onRowFocus(rowIdx, true, supressFocus);
}
} else {
views[i].onRowFocus(rowIdx, true, supressFocus);
}
}
}
}
this.callSuper(arguments);
}
});

AlbertoCe
Jan 09, 2015, 11:13 AM
Daniil,

Sorry for the late answer: it works !

Thank you very much for your support.

Best regards,
Alberto

Daniil
Jan 09, 2015, 12:01 PM
Thank you for the confirmation!