Is there any way to dynamically add data into a gird?

Question

I have a carousel with n number of widgets and I want to load another n number of items to the carousel once the user focus the last item of the carousel. I have added afteralign event listener in the carousel to detect the navigation between carousel items and inside the listener I have created one widget and tried to append it to the current carousel using appendChildWidget() method

 _handleLazyLoading: function (evt) {
                var selectedItem = evt.target.getActiveChildWidget().getDataItem();
                if (selectedItem.page < selectedItem.totalPages) {
                    if (evt.target.getActiveChildIndex() === evt.target.getChildWidgetCount() - 3) {
                        var sampleData={"type":"VOD","id":1234,"accessLevel":"GRANTED","title":"sample","description":"A look back at all the Premier League action from the 31st of March 2018.","thumbnailUrl":"url of image","metaFields":{},"tags":
                        ["review","match-round-32"],"watchProgress":0,"favourite":true,"duration":3098,"watchedAt":1522675749000}
                        var videoCard=new CommonVideoCard(sampleData);
                        evt.target.appendChildWidget(sampleData)
                    }
                }
            }

This is what my event listener code. I have checked in the dom also, if i put a break point after the appending method then I can see the data in the dom after that it seems like the particualr carousel is stuck and I cannot navigate to other items in the carousel. I just have a try with removeWidget method and it works. Any help will be really appreciated.

Answer 1

set the setWidgetLengths(length); after appending a new child widget.

So the code will look like

 _handleLazyLoading: function (evt) {
                var selectedItem = evt.target.getActiveChildWidget().getDataItem();
                if (selectedItem.page < selectedItem.totalPages) {
                    if (evt.target.getActiveChildIndex() === evt.target.getChildWidgetCount() - 3) {
                        var sampleData={"type":"VOD","id":1234,"accessLevel":"GRANTED","title":"sample","description":"A look back at all the Premier League action from the 31st of March 2018.","thumbnailUrl":"url of image","metaFields":{},"tags":
                        ["review","match-round-32"],"watchProgress":0,"favourite":true,"duration":3098,"watchedAt":1522675749000}
                        var videoCard=new CommonVideoCard(sampleData);
                        evt.target.appendChildWidget(sampleData);
                        evt.target.setWidgetLengths(620);
                    }
                }
            }