Kanban scrool to top when using updateCard

[Marko]

Hi,

I have the following code:

let kanbanObj = $("#ejKanban").data("ejKanban");
kanbanObj.updateCard(this.editedTask.id, this.editedTask);

And this code update view of changed card (it call action with request type save and action edit), which works well, but it allways scroll to top of Kanban if I wasn't already on top of it.

So is there any solution which just update text on card and not jump to top?

Regards,
Marko

[Buvana Sathasivam]

Hi Marko,   

  

Thanks for using Syncfusion products.   

  

We tried to reproduce the reported scenario, but we were unable to reproduce the issue.  We have prepared a simple sample with Kanban using angular below for your reference.    

  

Sample: http://www.syncfusion.com/downloads/support/forum/133077/ze/Angular15.3.0.331554500183    

  

Please use the above sample to reproduce your issue and if possible please share us the code snippets of the page you were using.  This information will be helpful for us to analyze further on the issue and to provide a prompt solution.      

   

Regards,   

Buvana S.   

 

[Marko]

Hi,

yes I foun out why I have this problem. I wanted to have Kanban sized of 100vh - 290px, what I writed in css, because scrollSettings dosen't support this calculation or I can't make it right.

So baisicly there is question how to make kanban height 100vh - 290px or otherwise where to put this style.

Currently I have:

<style>
   .e-kanbancontent { height: calc(100vh - 290px) !important; width: 100% !important; }
   ej-kanban .e-content { overflow-y: scroll !important; }
</style>

and this obviesly  is not good solution.

For more details you can look at my example code. So when scrolling kanban down and than clicking update button, then the kanban window scrolls up, which I don't wannt to.

Regards,
Marko

Attachment: angular2seeds_fe0a68ba.rar

[Buvana Sathasivam]

Hi Marko, 

Thanks for your update. 

Query #1: “I wanted to have Kanban sized of 100vh - 290px, what I writed in css, because scrollSettings dosen't support this calculation or I can't make it right.” 

Yes.  Kanban scrollSettings properties does not support viewport dimensions of “calc(100vh - 290px)”.  So, you can use this property on css styles.

Query #2: “So baisicly there is question how to make kanban height 100vh - 290px or otherwise where to put this style.” 

You can use encapsulation for referring style properties into Kanban component.  Please refer to the following code. 

Kanban.component.ts 

import {ViewEncapsulation} from '@angular/core';  // import view encapsulation 

@Component({ 

    ………. 

    encapsulation: ViewEncapsulation.None   // Set encapsulation mode as none 

}) 

Kanban.component.html 

<style>   // Set styles 

   .e-kanbancontent { height: calc(100vh - 290px) !important; width: 100% !important; } 

   ej-kanban .e-kanbancontent { overflow-y: scroll !important; } 

</style> 

Common links: https://angular-2-training-book.rangle.io/handout/advanced-components/view_encapsulation.html  

Query #3: “So when scrolling kanban down and than clicking update button, then the kanban window scrolls up, which I don't wannt to.” 

We tried to reproduce the reported scenario, but we were unable to reproduce the issue.   

 

Video:  http://www.syncfusion.com/downloads/support/forum/133077/ze/new-1011088930  

 

We have prepared a sample with your styles using angular.  Please find the below sample. 

                                                                                                                       

Sample: http://www.syncfusion.com/downloads/support/forum/133077/ze/angular2-seeds-1419561066  

 

Please share us the screenshot with your issue or video demo of the issue that you are facing.  This information will be helpful for us to analyze further on the issue and to provide a prompt solution.      

Regards, 

Buvana S. 

[Marko]

Hi,

thank you for your reply, I have changed .e-content to .e-kanbancontent and now I don't get to scroll problem any more.

So my style code is now:

.e-kanbancontent { height: calc(100vh - 290px) !important; width: 100% !important; }
ej-kanban .e-kanbancontent { overflow-y: scroll !important; }
ej-kanban .e-content { height: auto !important; }

I don't know why, but now I don't have class e-content in Kanban from your example, but in my code there is...

Anyway thank you for your asistence, my problem has been solved now.

Regards,
Marko

[Buvana Sathasivam]

Hi Marko,  

   

We are glad to know that your problem is solved.  Please let us know if you need any assistances, we would be happy to assist you.          

      

 

Regards,   

Buvana S.   

 

[Marko]

Hi,

I found new problem in last solution. So if I have a few columns with fixed width, that I get kanban x-owerflow, then the scrollbar is always on the bottom of the tasks, so if I wannt to scrool right or left, I first need to scroll down on y cordinate, to get x scroller. For example look at pictures:

So how could I have both scroller always wisible?

Attachment: angular2seeds_751f252f.rar

[Buvana Sathasivam]

Hi Marko,   

  

Thanks for your update.   

  

As per the current Structure, Kanban horizontal scroll bar are created based on individual column width or Kanban width.  If you set individual Kanban column width exceed window width, then horizontal scroll bar is created on Kanban board.  In your sample, vertical scroll bar is created based on overflow-y and height css property.  As mentioned earlier, Kanban scroll settings property does not support viewport dimensions.  Now, shown vertical scroll bar is not a Kanban scroll bar.  But, the horizontal scroll bar is Kanban scroll bar.  This horizontal scroll bar created based on individual column width.  So, we suggest you to remove view port dimensions and use normal height and width scroll settings property of Kanban control.  Could you please share screenshot for which type of issue your facing while using normal height and width scrollSettings properties of Kanban control. Also let us know if you need to set dimension using view port, if so we can provide an alternative solution.   

   

If you set Kanban height and width for scrollSettings property, Kanban shows with horizontal and vertical scroll bar.  Please refer to the below screenshot.   

   

   

For your convenience, we have prepared the simple sample with scrollSettings properties. Please the sample link on below.   

Sample: http://www.syncfusion.com/downloads/support/forum/133077/ze/angular2-seeds-306383600    

   

To know more about the ejKanban component members. Please refer the below reference   

API link: https://help.syncfusion.com/api/js/ejkanban#members:scrollsettings-height    

UG link: https://help.syncfusion.com/angular/kanban/scrolling    

    

   

Regards,   

Buvana S.   

 

[Marko]

Hi,

I wannt to create the following:

So I wannt to have kanban, which takes full window height minus height of header and button, which together takes 200px, so Kanban height should be 100vh - 200px, on any window size (so i can not assume this in advance in px).

So is there any good solution for this?

Regards,
Marko

[Buvana Sathasivam]

Hi Marko,   

  

Thanks for your update.   

  

Query: “So I wannt to have kanban, which takes full window height minus height of header and button, which together takes 200px, so Kanban height should be 100vh - 200px, on any window size (so i can not assume this in advance in px).”   

  

We have achieved your requirement using load event.  You can subtract viewport height with 200px and assign this value to Kanban scrollSetting height using load event.  Please refer to the following code.   

  

kanban.component.html   

  

<ej-kanban id="Kanban"    

              ………………   

             allowScrolling="true"     // Enabled allowScrolling property   

             (load)="load($event)">      // Load event   

</ej-kanban>   

  

kanban.component.ts   

  

export class KanbanComponent {   

       load(args){              // Triggered when load Kanban control   

           let height = window.innerHeight - 200;    // Get current window height and subtract   

           args.model.scrollSettings.height = height; // Set scroll settings height   

       }   

}   

  

For your convenience, we have prepared a simple sample available in the link below.     

  

Sample: http://www.syncfusion.com/downloads/support/forum/133077/ze/angular2-seeds485273375    

  

API link: https://help.syncfusion.com/api/js/ejkanban#events:load  

https://help.syncfusion.com/api/js/ejkanban#members:scrollsettings-height  

 

Please check a sample and let us know if we misunderstood your requirements.  If so, provide us more details relevant to your requirement.  So that, we can check and provide solution.      

   

Regards,   

Buvana S.