kanban column background

[Marco Salvatori]

how can i define the background of the columns?

transparent would also be fine.

I couldn't find any information about it.

[Vinitha Jeyakumar]

Hi Marco, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query “how can i define the background of the columns?” 

 

Your requirement can be achieved by using the following CSS styles code to modify the appearance of the background of Kanban columns. 

 

Code snippet:  

  .e - kanban 

  .e - kanban - table.e - content - table 

  .e - content - row:not(.e - swimlane - row) 

  td 

{ 

    background - color: black; 

} 

 

You can also find all the CSS classes for the Kanban component in the below link, 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/kanban/style/ 

 

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

 

We will include the styles code for defining the column background in our documentation page and let you know once it is published in live. 

 

Regards, 

Vinitha 

[Marco Salvatori]

optimal.

I was almost there.

to be able to do it at runtime?

i tried to give an id to the column

<e-kanban-column headerText = "Done" keyField = "Close" template = "# headerTemplate" allowToggle = "true" id = "columnClose"> </e-kanban-column>

  and then

document.getElementById ("columnClose"). addClass ("e-columnstyle");

but the id does not exist ...

[Vinitha Jeyakumar]

Hi Marco, 

 

 

Currently, we are validating your reported query. We will update you the further details on 06/08/2021. 

 

Regards, 

Vinitha

[Vinitha Jeyakumar]

Hi Marco, 

 

 

Good day to you, 

 

 

We have further validated your query “how can i define the background of the columns” 

 

The “Id” is not a property of ColumnsModel. Hence, you are not able to give id property to the Kanban column. 

 

API link: https://ej2.syncfusion.com/documentation/api/kanban/columnsModel/ 

 

But, your requirement can be achieved by getting the className of the Kanban columns by using the “queryCellInfo” event. In which, you can dynamically add a class to the Kanban columns. Please check the below code snippet for your reference, 

 

Code snippet:  

<script> 

    var elem; 

    function OnQueryCellInfo(args) { 

        this.elem = args.element.getElementsByClassName( 

            'e-content-cells e-drag e-drop e-droppable' 

        ); 

        if (this.elem != null) { 

            for (var i = 0; i < this.elem.length; i++) { 

                this.elem[i].classList.add("e-columnstyle"); 

            } 

        } 

    } 

 

</script> 

<style> 

 

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

        background-color: black; 

    } 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167818/ze/Kanban_core21634634851 

 

API : https://ej2.syncfusion.com/documentation/api/kanban/#querycellinfo 

 

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

 

Regards, 

Vinitha 

[Marco Salvatori]

excellent

thank you very much...

[Vinitha Jeyakumar]

Hi Marco, 

 

 

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

 

Regards, 

Vinitha.