1 Attachment(s)
[OPEN] [#1875] Data binding weird issue
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')
Attachment 25585
this issue occur sometimes when the user refresh the binding in my form, below is my code for reproduce the issue:
Code:
@{
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.