[OPEN] [#1875] Data binding weird issue

[user2022]

I have the weird issue when working with data binding as in the attached image. the error message: Can not read properties of null (reading 'id')


this issue occur sometimes when the user refresh the binding in my form, below is my code for reproduce the issue:

@{
    ViewBag.Title = "Ext.net - ui form";
    var X = Html.X();
}

@(
    X.FormPanel()
        .ID("frmEdit")
        .Title("UI form")
        .Width(1000)
        .Height(250)
        .BodyPadding(5)
        .Layout(LayoutType.Column)
        .Items(
            X.FieldSet()
                .ColumnWidth(0.4)
                .MarginSpec("0 0 0 10")
                .Border(false)
                .Items(
                    X.DisplayField().ID("pnlImg").ViewModel(new
                    {
                        data = new
                        {
                            thumbnailImgUrl = ""
                        }
                    }).Bind(a => a.Add(new Parameter("html", "<a href='{thumbnailImgUrl}'><img style='max-width: 100%; max-height: 100%;' src='{thumbnailImgUrl}'></a>")))
                )
        )
        .Buttons(
            X.Button().Text("Set photo").OnClientClick("setImage()"),
            X.Button().Text("Mass set photo").OnClientClick("massiveTest()")
        )
)

<script>
    var imgIndex = 1;
    var setImage = function () {
        App.pnlImg.getViewModel().set('thumbnailImgUrl', '/img/landscape-0' + imgIndex + '.jpg');

        imgIndex++;
        if (imgIndex > 4) imgIndex = 1;
    };

    var massiveTest = function () {        
        setTimeout(function () {
            console.log('set photo massively');
            App.pnlImg.getViewModel().set('thumbnailImgUrl', '/img/landscape-0' + imgIndex + '.jpg');

            imgIndex++;
            if (imgIndex > 4) imgIndex = 1;

            massiveTest();
        }, 200);
    }
</script>

As you can see in the image, the massiveTest function run and refresh the data binding every 200 ms, it run for more than 100 times and the issue occur, but sometimes my end-user got this issue even on the first time they refresh the data binding.

What should I do to clear this issue ?

Thanks in advance.

[fabricio.murta]

Hello @user2022!

Thanks for the test case, that was a tricky one!

In your test case, change line 20, where it reads X.DisplayField(), use X.Component() instead.

This should get rid of the issue. Would that simpler component be enough to fulfill your usage scenario? It looks like there's an issue with the DisplayField where garbage collection incorrectly destroys resources pertaining the component, which leads to the errors you described. Simply switching to another component that doesn't employ the affected features, or a component that correctly wraps ups them, is enough to avoid the crash.

We have logged the issue as #1875 in our bug tracker and will post an update here as soon as we get the issue fixed.

Let us know if you need some specific feature the DisplayField() would allow you to and we'll see what needs to be done to get the component going without further do.

If you don't really need anything from the component, you'll be benefitting from a little "lighter" experience, as the bare X.Compoent() will carry on less payload to the page.

Hope this helps!

[user2022]

Hello @fabricio.murta,

Using the Component class works perfectly for my needs, thanks a lot for your help.
Please close this thread.

[fabricio.murta]

Hello again, @user2022!

Glad we could help you find a solution that was both lighter in browser load and usable for your usage patterns!..

We'll keep this open so that we can track and post an update as soon as we get the fix to the DisplayField component ready.