[CLOSED] grid with Infinite scroll throw error if it's inside form panel [Archive]

user2022

Sep 24, 2022, 5:24 PM

The below code throw javascript error (I just remove the store's proxy setting for simplicity)

X.FormPanel().Title("UI form").Width(1000).Height(250).BodyPadding(5).Layout(La youtType.Column)
.Items(
X.GridPanel().ID("grdDetail").ColumnWidth(1).ColumnModel(
X.Column().DataIndex("FullName").Text("Full name"),
X.Column().DataIndex("CallingName").Text("Calling name")
)
.Store(
X.Store().Fields(f =>
{
f.Add(new string[] { "FullName", "CallingName" });
})
.RemoteSort(true)
.RemoteFilter(true)
.PageSize(50)
.LeadingBufferZone(0)
.Buffered(true)
)
)

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

If I remove the line
.Buffered(true) then it works but the grid is not having infinite scrolling, how can I make grid with infinite scroll live inside the form panel ?

Thanks in advance.

fabricio.murta

Sep 30, 2022, 5:14 PM

Hello,

Sorry for the long delay to respond your inquire, but as there was no full test case, we had difficulty finding a time window to build a sample off your code snippet.

Kindly review our dedicated threads on posting code samples to help us improve how fast we can answer your inquiries:

- Tips for creating simplified code samples (http://forums.ext.net/showthread.php?61176-Tips-for-creating-simplified-code-samples)
- More Information Required (http://forums.ext.net/showthread.php?10205-More-Information-Required)
- Forum Guidelines (http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics)

And, finally, the answer! After trying to see differences between your snippet and completing it in various ways with the Infinite Scrolling - Overview example (https://github.com/extnet/mvc.ext.net/blob/master/src/Areas/GridPanel_Infinite_Scrolling/Views/Overview/Index.cshtml), I finally found that all that was left is to give the panel a height. That's right, .Height(500).

This is required because when buffered scrolling is employed, the grid requires an initial height to be set in order to correctly infer what's on screen, what's buffered, and whether the user is scrolling close enough to the limit to make a request for further records (page). It's a bit complicated, but that's required to make infinite scrolling possible.

In the end, the test case turned into:

Model:

public ActionResult c63290_infiniScrollJsErr() => View(new object[]
{
new object[] { "3m Co", "3MCO" },
new object[] { "Alcoa Inc", "ALCI" },
new object[] { "Altria Group Inc", "ALGI" },
});

View:

@model System.Collections.IEnumerable
@{
Layout = null;
var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
<title>63290 - grid with Infinite scroll throw error if it's inside form panel</title>
</head>
<body>
<div>
@Html.X().ResourceManager()
@(
X.GridPanel().ID("grdDetail").ColumnWidth(1).ColumnModel(
X.Column().DataIndex("FullName").Text("Full name"),
X.Column().DataIndex("CallingName").Text("Calling name")
)
.Height(500) // this was required to avoid the error.
.Store(
X.Store().Fields(f =>
{
f.Add(new string[] { "FullName", "CallingName" });
})
.DataSource(Model)
.RemoteSort(true)
.RemoteFilter(true)
.PageSize(50)
.LeadingBufferZone(0)
.Buffered(true)
)
)
</div>
</body>
</html>

Unfortunately, this height requirement by grids is "by design" by the Ext JS framework, which Ext.NET relies on. Similar issues, that are dependent on specific features, may happen to other container components just like the buffered scrolling with Grid Panels. An indication of such a case is, when the javascript error is thrown, you can see the component drawn on screen with a small width/height, usually enough to show the top-right portion of the title bar when it has one.

Hope this helps!

user2022

Oct 04, 2022, 8:08 AM

Hello @fabricio.murta,

Thanks for your support and great explaination.

Please close this thread.

fabricio.murta

Oct 12, 2022, 2:31 PM

Thanks for the feedback, and glad we could help you at least understand that limitation that sometimes takes place!