How to change CSS for individual columns

[Sam Tran]

Hi,

I want to change the background color of only one specific column on KanBan, how can I do that?

I might also want to modify other visual properties as well (like different border color, header text color, etc.)

How would I go about setting the styles for individual columns based on the column key?

Thanks!

[Buvana Sathasivam]

Hi Sam,   

  

Thanks for using Syncfusion products.   

  

As per the current Structure, all css property work based on Kanban board.  If you wish to customize css property on column key value, please follow the below work around solution.  We have added new class for already created columnRows based on column mapping key using actionComplete event.  Please find the below code.   

  

KanbanFeatures.cshtml   

  

@(Html.EJ().Kanban("Kanban")   

       …………   

       .ClientSideEvents(eve =>   

        {   

          eve.ActionComplete("complete"); // action complete event   

        })   

)   

   

<script>   

    function complete(args) {  Triggered when after completing every operation in Kanban board   

        var obj = $("#Kanban").data("ejKanban"); // Create object   

        for (var i = 0; i < args.model.columns.length; i++) {    

            var key = args.model.columns[i].key;  // Get column key   

            obj.getContentTable().find(".e-columnrow td[data-ej-mappingkey=" + key +"]").addClass("e-" + key);  // Find all td using same key values and add class   

            obj.getHeaderTable().find(".e-headerdiv").eq(i).addClass("e-header" + key);// Find header div and add class   

        }   

    }   

</script>   

<style>   

    .e-kanban .e-kanbancontent .e-rowcell.e-Open { // Set background color based on key   

        background: #fae8b1;   

        border-color: #856a17;   

    }   

   

    ……………….   

   

    .e-kanban .e-kanbanheader .e-headercelldiv .e-headerOpen { // Set color of header text   

        color: #856a17;   

    }   

   

    …………..   

</style>   

  

For your convenience, we have prepared a simple sample with your requirement. Refer the sample link on below.         

Sample: http://www.syncfusion.com/downloads/support/forum/133405/ze/SyncfusionMvcApplication69-1713491752    

  

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

   

Please check the shared details, if the provided information doesn’t meet your requirement, please give us more information to provide an alternative solution.      

   

   

Regards,   

Buvana S.   

 

[Sam Tran]

Thanks Buvana,

Your sample project worked perfectly.  For some reason, when I put the same code in my project, the header css worked, but the column background did not.

I had to make the following changes for it to work:

JS:

    function actionComplete(args) {

        var obj = $("#Kanban").data("ejKanban");

        for (var i = 0; i < args.model.columns.length; i++) {

            var key = args.model.columns[i].key;

                obj.getContentTable().find(".e-columnrow td[ej-mappingkey=" + key + "]").addClass("eCustom" + key);

                obj.getHeaderTable().find(".e-headerdiv").eq(i).addClass("eCustomHeader" + key);

        }

    }

CSS:

.eCustom-1 {

    background: #FFF8E1 !important;

    border-color: #FFB300 !important;

}

.eCustomHeader-1 {

    color: #FFA000 !important;

}

[Buvana Sathasivam]

Hi Sam,   

    

Thanks for your update.   

  

Query #1:  “For some reason, when I put the same code in my project, the header css worked, but the column background did not.”   

  

We suspect that the cause of the issue is, due to unspecified class hierarchy of the Kanban CSS property.  Normally, CSS property preferred hierarchy of the class.  So, you can specify class hierarchy of the Kanban CSS property with newly added class.  If you use class hierarchy class with newly added class, then Kanban column background color will set properly.  Please refer to the following code.   

  

<style>   

    .e-kanban .e-kanbancontent .e-rowcell.e-Open {  // Root CSS with newly added class   

        background: #fae8b1;   

        border-color: #856a17;   

    }   

    ……………   

    .e-kanban .e-kanbanheader .e-headercelldiv .e-headerOpen { // Header CSS   

        color: #856a17;   

    }   

</style>   

    

If you wish to use only newly added class, you can use important CSS property.     

  

<style>   

    .e-Open {   

        background: #fae8b1 !important;   

        border-color: #856a17 !important;    

   }   

   …………   

   .e-headerOpen {   

        color: #856a17!important;   

    }   

  

Kindly check the previously updated sample.   

  

Regards,    

Buvana S.