We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Kanban scrool to top when using updateCard

Thread ID:

Created:

Updated:

Platform:

Replies:

133077 Oct 8,2017 07:36 PM UTC Oct 25,2017 11:46 AM UTC Angular 9
loading
Tags: ejKanban
Marko
Asked On October 8, 2017 07:36 PM UTC

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 [Syncfusion]
Replied On October 9, 2017 09:57 AM UTC

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.    
  
  
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
Replied On October 10, 2017 06:55 PM UTC

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 [Syncfusion]
Replied On October 11, 2017 12:23 PM UTC

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> 




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.   
 
 
We have prepared a sample with your styles using angular.  Please find the below sample. 
                                                                                                                       
 
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
Replied On October 11, 2017 02:16 PM UTC

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 [Syncfusion]
Replied On October 12, 2017 04:27 AM UTC

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
Replied On October 22, 2017 06:57 PM UTC

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:


https://puu.sh/y4uEG/4fe095757d.png


https://puu.sh/y4uKj/75c99dedb9.png

So how could I have both scroller always wisible?



Attachment: angular2seeds_751f252f.rar

Buvana Sathasivam [Syncfusion]
Replied On October 23, 2017 09:04 AM UTC

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.   
   
To know more about the ejKanban component members. Please refer the below reference   
    
   
Regards,   
Buvana S.   
 


Marko
Replied On October 24, 2017 07:05 AM UTC

Hi,

I wannt to create the following:


https://puu.sh/y5MUc/fefab6935f.png

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 [Syncfusion]
Replied On October 25, 2017 11:46 AM UTC

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.     
  
  
 
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.   
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;