Scroll event on kanban list

Webix JS
1

Hello,

I have implemented scrollview in my webapp and within that as a body I have implemented kanban with kanbanlist. as below.

cols.push({
header: “headername”
body: {
view: “kanbanlist”,
status: “status”
type: ‘cards’,
},
});

I have custom data load event within which i am doing below and implemented kanban.
this.ui = webix.ui({
container: this.el.nativeElement.querySelector(“#kanban-container”),
view: “scrollview”,
scroll: “x”,
body: {
height: 700,
width: 1000,
view: “kanban”,
cols: result.cols,
data: result.data
},
});

This works fine but I want to do custom implementation of data load by doing custom lazy loading. For that I want to use scroll event. I tried different way but not able to capture scroll event. Can you please provide some guidance on this?

2

@Natalia_Shilova Can you help on this?

3

Hello Sandeep_Parmar,

You can enable dynamic rendering feature for the lists.
Please check the example:
https://snippet.webix.com/xzk1p0v6

Please make sure to define the fixed item height for the dynamic list ( dynamic rendering will not work for lists where item height set to “auto” )

Also, while in common lists, this feature allows both dynamic rendering and data loading on demand, in case of kanban only dynamic rendering can be applied. You still need to load all data at once.

4

Hello @Natalia_Shilova what about onscroll event though ? I want to capture scroll event on this body. Is it possible? so based on that I can implement any custom logic ?

header:“Backlog”,
body:{
view:“kanbanlist”,
dynamic:true,
type:{ height: 90 }, // default height of card’s template for content is 86 px
status:“new”
}

5

Hello Sandeep_Parmar,

You can capture scroll event using onAfterScroll event in the kanbanlist: const listArray = $$("kanban").queryView("kanbanlist", "all")

Please check the example: Code Snippet