Change font of Kanban header

[Sam Tran]

Hi,

I tried this:

.e-kanban .e-kanbanheader .e-headercelldiv .e-headerOpen {

    font-family: Calibri,Tahoma, Verdana, Arial !important;

    font-size: 16px !important;

}

but it doesn't work to change the font of the Kanban header, is there a CSS tag to globally set the header of Kanban?

I also need the CSS tag to globally change the header font of Grid also!

Thanks!

[Arun Palaniyandi]

Hi Sam Tran,    

   

Thanks for using Syncfusion Products.    

 

Query1:but it doesn't work to change the font of the Kanban header, is there a CSS tag to globally set the header of Kanban? 

 

With the solution given in your previous forum 133405 , we found the header font changed with using you shared CSS. In that solution we have achieved the requirement based on column mapping key and actionComplete event.  If you map the correct key in actionComplete event and then use the correct class hierarchy class with newly added class, then Kanban column background color will set properly. Hence we request you to check whether you have bound the column key in the actionComplete event and used the correct class hierarchy class with newly added class. 

 

If your issue is not resolved after using the solution given in forum , can you share the specific requirement details so that we can check and provide you better solution based on your scenario. 

 

 

Query2: Need the CSS tag to globally change the header font of Grid also!  

Based on your query we suspect that you want to customize the style for Grid header. So, we suggest you to use the following class to customize the Grid header font style.  

Refer the below code example.  

  

[GridFeatures.cshtml]  

  

<style type="text/css">  

  

     #FlatGrid .e-headercelldiv{  

  

         font-style: italic;  

         color: red;  

     }  

 </style>  

  

  

 

We have prepared a sample and it can be downloadable from the below location.  

  

Sample: http://www.syncfusion.com/downloads/support/forum/135014/ze/SyncfusionMvcApplication13_(4)-657921256.zip  

  

Refer the classes for Grid header.  

  

e-gridheader	This is class is added in the root element of header element. In this class, You can override thin line between header and content of grid.
e-table	This class is added at 'table' of grid header. This CSS class makes table width as 100 %.
e-columnheader	This class is added at 'tr' of grid header.
e-headercell	This class is added in 'th' element of grid header. You can override background color of header and border color
e-headercelldiv	This class is add in div which present 'th' element in header. You recommend you to use e-headercelldiv to override skeleton of header

  

We have already discuss about the above mention query in the following documentation link.  

  

Link: https://help.syncfusion.com/js/grid/style-and-appearance  

 

 

Please let us know if you have any queries in future. 

 

Regards, 

Arun P.