Customize Kanban column background color

[Devinitely]

Is it possible to customize the background color of the Kanban columns so that they are not the default gray color?

[Vinitha Jeyakumar]

Hi Claire, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query “Customize Kanban column background color” 

 

Your requirement to customize the background color of the Kanban column can be done by customizing the below CSS Style code. Please check the below code, 

 

Code snippet: 

<style> 

    .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td { 

        background-color: black; 

    } 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168633/ze/Kan_Colr2933547 

 

Please check the above code snippet and sample for your reference and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha. 

[Devinitely]

Thank you, that works!

[Vinitha Jeyakumar]

Hi Claire, 

 

 

You are welcome. Please get back to us if you need any further assistance. 

 

Regards, 

Vinitha. 

[Jordi]

Thank you, this was a very userful answer.

[Jordi]

Hi

I reused the Status field as a css classes, just adding a class for each of the statuses I want to customize, like this:

Just add the task status as a class within the div

<KanbanCardSettings ContentField="Summary" HeaderField="Title" SelectionType="@SelectionType.Multiple">

<Template>

@{

Task card = (Task)context;

<div class="card-template ​@card.Status">

<div class="e-card-header">

<div class="e-card-header-caption">

<div class="e-card-header-title e-tooltip-text">@card.Titlediv>

div>

div>

<div class="e-card-content">

<div class="e-text e-tooltip-text">@card.Summarydiv>

div>

<div class="e-card-footer">

@{

@foreach (string tag in card.Tags)

{

<div class="e-card-tag e-tooltip-text">@tagdiv>

}

}

div>

div>

}

< //Template>

< //KanbanCardSettings>

And then go ahead and append this outside the @code{} part.

Using the different values that you know the status field will have (mine are "programada", "activa" and so on...

<style type="text/css">

.PROGRAMADA{

background-color: #79c8f7;

}

.ACTIVA{

background-color: #79f7a8;

} <//style>

My final Kanban looks like this:

[Buvana Sathasivam]

Hi Jordi,

In your shared code, you are setting the card template CSS class and applying styles to each card background. If you wish to apply a background colour to each column using a swimlane layout, you can apply the below styles.

Index.razor

<style>

    .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td[data-key="Open"] {

        background-color: #79c8f7;

    }

    .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td[data-key="InProgress"] {

        background-color: #79f7a8;

    }

</style>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sfkanban-back381610295

If the above solution does not meet your requirements, kindly get back to us with more details about your requirements.

Regards,

Buvana S

[Jordi]

Hello

Wow! that's very useful! I actually spent like 4 hours searching fos this detail within the documentation.

Along this lines, i have 2 questions:

What would be the class to change the header's colors in the same fashion?

Also, Can the column headers stay visible while scrolling?

Thanks a lot!

[Indrajith Srinivasan]

You can change the header’s color in the same manner by using the below CSS styles.

 

.e-kanban .e-kanban-table.e-header-table .e-header-row:not(.e-swimlane-row) th[data-key="Open"] {

        background-color: #79c8f7;

    }

    .e-kanban .e-kanban-table.e-header-table .e-header-row:not(.e-swimlane-row) th[data-key="InProgress"] {

        background-color: #79f7a8;

    }

In order to freeze the headers, check the below documentation for reference.

Documentation: https://blazor.syncfusion.com/documentation/kanban/swimlane#enable-frozen-rows