Styling the Panel behind the Toolbar Buttons

[Reid]

I cannot figure out how to color the background of the Toolbar in a Kendo UI Grid.  I can style the buttons but I want the <div> or panel behind the buttons to be a different color that what you see in the attachment, white.

 

Thanks

[Eyup]

Hi Reid,

You can achieve this requirement using the following CSS rule:

<style>
  div.k-toolbar
  {
    background-color: lime;
  }
</style>

Here is a live dojo sample:
https://dojo.telerik.com/APAyECoC/2

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[Reid]

Hi Eyup,

 

This does not work.  I tried it in a new Telerik ASP.NET Core solution freshly created just to test this and added that style declaration and the color did not change.  But after adding ..k-grid to the start of the style it did.  Another trick was to make the width 100%.

 

Thanks,

Reid

 

<style>
  k-grid div.k-toolbar
  {
    background-color: lime;
    width:100%;    

  }
</style>

 

[Eyup]

Hello Reid,

Thank you for sharing your specific approach with our community. I hope it will prove helpful to other developers as well.
Feel free to turn to us if new questions arise.

Regards,
Eyup
Progress Telerik