1. Home
  2. Forum
  3. Blazor
  4. Pinned/locked/frozen Kanban card and/or Kanban header text with multiple lines

Pinned/locked/frozen Kanban card and/or Kanban header text with multiple lines

Hi, I am wondering if it is possible to freeze/lock/pin a kanban card, similar to what you have done with the 

KanbanSwimlaneSettings.EnableFrozenRows functionality? What I am trying to do is always show a card at the top of the column as the user scrolls.

If this is not possible, then I am hoping I can merge the card details into the Header, so the Header will look like a card? Is it is possible to define a KanbanColumn Template that will allow you to have multiple lines of text in a header?



15 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team November 16, 2021 10:44 AM UTC

Hi Sam, 
 
Greetings from Syncfusion support, 
 
We have validated your reported queries, 
 
Query 1: “What I am trying to do is always show a card at the top of the column as the user scrolls” 
 
No Kanban cards doesn’t have any built-in support for this usecase. 
 
Query 2: “Then I am hoping I can merge the card details into the Header, so the Header will look like a card? Is it is possible to define a KanbanColumn Template that will allow you to have multiple lines of text in a header?” 
 
Yes, we have template support for the Kanban column headers. You can customize the headers now based on your needs. Check the below documentation for reference. 
 
 
Please get back to us if you face any difficulties, 
 
Regards, 
Indrajith 


SA Sam November 16, 2021 01:40 PM UTC

With the header template, what div class should i use if I want to display a table in the header?

I want to display data similar to a card, but in the header, is that possible?


Thanks


IS Indrajith Srinivasan Syncfusion Team November 17, 2021 12:50 PM UTC

Hi Sam, 
 
Good day to you, 
 
We have validated your reported query “what div class should i use if I want to display a table in the header?” .You can use the below card template classes, to show the data in the header. Check the below shared documentation for reference. 
 
 
Please get back to us if you face any difficulties, 
 
Regards , 
Indrajith 


SA Sam November 22, 2021 05:35 AM UTC

Thanks Indrajith, I can work with this.

Another question related to the Kanban view in responsive mode. Your documentation states:

"In responsive mode, the first column occupies 80% and the second column occupies 20% of the screen layout."

Is there a way to change this ratio to, for example, 90%/10%, or even 100%/0% (so each column will take up the full width of the screen layout?


Thanks


IS Indrajith Srinivasan Syncfusion Team November 23, 2021 12:00 PM UTC

Hi Sam, 
 
Good day to you, 
 
We have validated your reported query “Is there a way to change this ratio to, for example, 90%/10%, or even 100%/0% (so each column will take up the full width of the screen layout”. The SfKanban responsive layout by default is rendered based on the screen size, the width will be split for the respective columns based on which the Drag and Drop operations are performed. If you want to show single column alone for the SfKanban, we suggest you to set the width for the SfKanban only if the screen width is lower (in mobile layout). Check the below shared style reference and screenshot for reference. 
 
CSS: 
 
 
@@media only screen and (max-width: 600px) { 
  .e-kanban .e-kanban-table { 
    width: 200vh; 
  } 
} 
 
 
Screenshot:  
 
 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


IS Indrajith Srinivasan Syncfusion Team November 23, 2021 12:00 PM UTC

Hi Sam, 
 
Good day to you, 
 
We have validated your reported query “Is there a way to change this ratio to, for example, 90%/10%, or even 100%/0% (so each column will take up the full width of the screen layout”. The SfKanban responsive layout by default is rendered based on the screen size, the width will be split for the respective columns based on which the Drag and Drop operations are performed. If you want to show single column alone for the SfKanban, we suggest you to set the width for the SfKanban only if the screen width is lower (in mobile layout). Check the below shared style reference and screenshot for reference. 
 
CSS: 
 
 
@@media only screen and (max-width: 600px) { 
  .e-kanban .e-kanban-table { 
    width: 200vh; 
  } 
} 
 
 
Screenshot:  
 
 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


IS Indrajith Srinivasan Syncfusion Team November 23, 2021 12:00 PM UTC

Hi Sam, 
 
Good day to you, 
 
We have validated your reported query “Is there a way to change this ratio to, for example, 90%/10%, or even 100%/0% (so each column will take up the full width of the screen layout”. The SfKanban responsive layout by default is rendered based on the screen size, the width will be split for the respective columns based on which the Drag and Drop operations are performed. If you want to show single column alone for the SfKanban, we suggest you to set the width for the SfKanban only if the screen width is lower (in mobile layout). Check the below shared style reference and screenshot for reference. 
 
CSS: 
 
 
@@media only screen and (max-width: 600px) { 
  .e-kanban .e-kanban-table { 
    width: 200vh; 
  } 
} 
 
 
Screenshot:  
 
 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


SA Sam November 25, 2021 08:43 AM UTC

Hi, this doesnt seem to work for mine (although it does in the example). I don't perform any drag-drop operations.


IS Indrajith Srinivasan Syncfusion Team November 26, 2021 06:37 AM UTC

Hi Sam, 
 
Good day to you, 
 
Since the issue is not reproduced, with the shared sample from our end. Can you please share us a minimal issue reproducing sample or code blocks to validate the reported issue from our end ? 
 
Regards, 
Indrajith 


SA Sam January 5, 2022 06:17 AM UTC

Hi Indrajith,

Apologies for the late reply. I actually have 2 Kanban components on the same Index.html, they reside on 2 SfTab pages on an SfTab component. 

The problem is that one Kanban will only have a single column but the other Kanban will have multiple columns. The style messes up the Kanban component with the single column. Is there any way to apply the style to ONLY the Kanban with multiple columns ? I have attached my code.


Thanks,

Sam





 


Attachment: Index_14db77cb.zip

BS Buvana Sathasivam Syncfusion Team January 6, 2022 04:32 PM UTC

Hi Sam, 

Thanks for your update. 

We have checked your shared code. You can achieve your requirement by using the CssClass property, which is used to add the custom class name to the Kanban root element. It will be helpful to differentiate between the Kanban single column and Kanban multiple columns. Can you please find the below code? 

<SfTab> 
    ….. 
      <ContentTemplate> 
            <SfKanban TValue="TasksModel" CssClass="e-single-kanban">…..</SfKanban> 
       </ContentTemplate> 
        … 
       <ContentTemplate> 
             <SfKanban TValue="TasksModel" CssClass="e-multiple-kanban">…..</SfKanban> 
       </ContentTemplate> 
</SfTab> 
<style> 
    @@media only screen and (max-width: 600px) { 
        .e-multiple-kanban.e-kanban .e-kanban-table { 
            width: 200vh; 
        } 
    } 
</style> 



Please let us know if you have any queries. 

Regards, 
Buvana S 


SA Sam January 7, 2022 01:24 AM UTC

Hi Buvana,


Thank you for the reply, we are getting very close, but I discovered that when you use column templates, then the style is ignored. Please find attached my code, in the multiple-columns Kanban I've added a template for each column and the width reverts to the original.




Attachment: Index_9d511ed7.zip

BS Buvana Sathasivam Syncfusion Team January 7, 2022 05:20 PM UTC

Hi Sam, 
 
Thanks for your update. 
We have checked your query and were able to reproduce the issue. The issue is that source level table styles override your code. You can set the background color on the card template TD element. You can also change the width of each column based on viewport width using the col element like below. 
  
<style> 
    @@media only screen and (max-width: 600px) { 
        .e-multiple-kanban.e-kanban .e-kanban-table col { 
            width: 85vw !important; 
        } 
    } 
    .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) .e-card-content td { 
        background-color: #fff; 
    } 
</style> 
 
 
Please check the above solution and sample and get back to us if you have any issues. 
 
Regards, 
Buvana S 


Marked as answer
SA Sam January 8, 2022 05:12 AM UTC

Hi Buvana,

At first I thought it wasn't working, but then I realized that my index page had no padding (MainLayout was NOT wrapping @Body in a <div class="content px-4"> tag), so alI I had to do was increase the style width to 95vw, and it worked!


Thank you!


BS Buvana Sathasivam Syncfusion Team January 10, 2022 08:07 AM UTC

Hi Sam,  
 
We are happy to hear your problem has been solved.  
 
Please let us know if you have any further queries.  
   
Regards,  
Buvana S  
 


Loader.
Up arrow icon