Bind messages in Conversation UI on demand with tabs strip

[Casey]

Hello Telerik

The Conversation UI is binded inside each kendo tabs strip , each Conversation UI initially load 10 messages, when scroll reach top, new messages should bind to existing feed. each tab's Conversation UI should bind new messages  only when scroll reach top and bind new messages for respective tab's conversation Ui's feed .

How can I achieve this customization within current available API.

Please see the below stack blitz demo and update it 

https://stackblitz.com/edit/angular-x7vrdm?file=app%2Fapp.module.ts

Please watch loom video for more details

https://www.loom.com/share/4098c8839df142acaf005a231f267827

[Svet]

Hi Nilesh,

Thank you for the provided video demonstrating the requirement.

I saw that we have a currently open feature request based on your earlier provided feedback:

https://feedback.telerik.com/kendo-angular-ui/1407301-how-do-i-get-event-when-scroll-reached-at-top-in-conversation-ui-for-angular

I understand that this may be disappointing, but I have to confirm that so far there isn't a built-in option released that allows to achieve the requirement with a supported feature of Kendo UI for Angular.

What could be done as a workaround is to handle the generic (scroll) event of the element holding the chat messages and if the scrollTop position is equal to 0 then some new messages can be passed to the Conversational UI. The (tabSelect) event of the TabStip component could also be handled in order to update the messages on each tab change. Please check the following example demonstrating these suggestions:

https://stackblitz.com/edit/angular-x7vrdm-in3vbv?file=app/app.component.ts

The essential parts are the following:

@Component({
  providers: [ ChatService ],
  selector: 'my-app',
  template: `
   <kendo-tabstrip [ngStyle]="{'width': '400px'}" (tabSelect)="onTabSelect($event)">
        <kendo-tabstrip-tab
          *ngFor="let item of items let i=index"
          [title]="item.name"
          [selected]="i == selected"
        >
            <ng-template kendoTabContent>
      <kendo-chat
        [messages]="feed | async"
        [user]="user"
        (sendMessage)="sendMessage($event)"
      >
      </kendo-chat>
        </ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `
})
export class AppComponent {
...
  public onTabSelect(e){
    console.log(e)
  }

    ngAfterViewInit(){
    document.querySelector('.k-message-list.k-avatars').addEventListener('scroll', (e)=>{
      if(e.target.scrollTop === 0){
        console.log(e);
      }
    })
  }
}

Please let me know in case I could provide any additional details on the suggested approach.

I would like to add that generally we provide technical assistance about the built-in features of all Kendo UI for Angular components and how to configure them properly. We also try to provide guidelines and/or workarounds for accomplishing use-case scenarios that require some custom logic to be implemented. However that isn't always possible as such effort falls out of the scope of the support service. Please check what is included and what isn't at the following link:

https://www.telerik.com/account/support/scope

I would like to use this opportunity to also suggest the Progress Professional Services which specialize in developing custom tailored implementations, features customization and others which may be relevant for achieving the required custom scenario:

https://www.progress.com/services/outsourcing 

Please let me know in case you would like to benefit from their expertise and I will connect you with a member from their team.

Regards,
Svetlin
Progress Telerik

[Casey]

Hello Svetlin,

Thank you for quick reply . Above possible solutions is not working all the time , its only work when page is load for Team A Conversion UI, its not working on Team B ,C, D. when user come back again to Team A  at that time it's also not working.

https://stackblitz.com/edit/angular-x7vrdm-in3vbv?file=app/app.component.ts

 Video link
https://www.loom.com/share/b86aabe497704497bcf3b8e8dfa29b03

[Svet]

Hi Nilesh,

Thank you for getting back to us.

What could be done is to use the following custom JavaScript logic:

 

    ngAfterViewInit(){
    document.querySelector('.k-message-list.k-avatars').addEventListener('scroll', (e)=>{
      if(e.target.scrollTop === 0){
        console.log(e);
      }
    })
  }

 

inside the (tabSelect) event handler within a setTimeout as follows:

 

  public onTabSelect(e){
    console.log(e);
    setTimeout(()=>{
      document.querySelector('.k-message-list.k-avatars').addEventListener('scroll', (e)=>{
        if(e.target.scrollTop === 0){
          console.log(e);
        }
      })
    })
  }

Here is an updated example:

https://stackblitz.com/edit/angular-x7vrdm-vwecnk?file=app/app.component.ts

That approach will make sure to attach the scroll event to each element with classes .k-message-list.k-avatars on each tabSelect event. 

I would like to add, that the demonstrated approach is based on a custom logic rather than on a supported feature of Kendo UI for Angular and thus it may require further adjustments or modifications in order suite the requirements of the project. I hope it points you in the right direction of moving forward.

Regards,
Svetlin
Progress Telerik