How to Remove background gradation color in Command Bar Item in RadGrid

[Vishnu]

Hello Team,
Our requirement is to remove all the color gradiations (color combination of 2 or more colors) from our entire web application. 
As part of Grid. I have applied plain / flat color to the columns. But I am unable to do the same with Command Bar Item, I mean above the columns header. You can have clean look in attached image. 

Guys, please let me know. How to remove gradiation color from grid command bar. 
Just I want to keep background color as light gray (#E6E6E6). Let me know if you need any more information.


Thanks a lot in advance for any inputs.

[Princy]

Hi Vishnu,

You can set the CSS for the CommandItem as shown below:

CSS:

<style type="text/css">
 .RadGrid_SkinName .rgCommandRow table
 {
   background-color:#E6E6E6;
 }
</style>

Thanks,
Princy

[Vishnu]

Hello Princy,
Thank you very much for your quick response.

I have tried your css style as below - 
 .RadGrid_SkinName .rgCommandRow table       
         {
           background-color:#E6E6E6 !important;
         }

It works only for IE 10, but not with Google Chrome & Mozilla Firefox.

Can you please suggest me how to make it work in Chrome & Firefox.

[Princy]

Hi Vishnu,

Can you make sure that you have set the SkinName in your css class. I was able to get it to work in all browsers. Please try the sample code snippet.

ASPX:

<telerik:RadGrid ID="rgrdSample" runat="server" AutoGenerateColumns="false" AllowPaging="true"    AllowSorting="true" Skin="Metro" OnNeedDataSource="rgrdSample_NeedDataSource">
    <MasterTableView CommandItemDisplay="Top">
        <Columns>
            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" />
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" />
            <telerik:GridTemplateColumn UniqueName="Number" SortExpression="Number" DataField="Number" HeaderText="Number">
                <ItemTemplate>
                    <%#Eval("Number", "{0:#,0.00}")%>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

CSS:

<style type="text/css">
    .RadGrid_Metro .rgCommandRow table
    {
        background-color: Pink;
    }
</style>

C#:

protected void rgrdSample_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
        dynamic data = new[] {
    new { ID = 1, Name = "Name1", Number=12.36},
    new { ID = 2, Name = "Name2", Number=10.28},
    new { ID = 3, Name = "Name3", Number=963.2},
    new { ID = 4, Name = "Name4", Number=10.28},
    new { ID = 5, Name = "Name5", Number=7143.05},
    new { ID = 6, Name = "Name6", Number=567.25},
    new { ID = 7, Name = "Name7", Number=100.02},
    new { ID = 8, Name = "Name8", Number=100.02},
    new { ID = 9, Name = "Name9", Number=89632.25}
    };
 rgrdSample.DataSource = data;
 }

Thanks,
Princy

[Vishnu]

Princy, Thanks for pointing at skin name.
Now I have applied as below css style- 
.RadGrid_Silk .rgCommandRow table       
         {
           background-color:#E6E6E6 !important;
         }

Now its working fine in IE10, Chrome & Firefox as well. I am really happy for your support.

But only small issue is there at right corner of Command Bar in all browser. Still some area is not applied this css. I wondered why it has not applied entire thing. Please check the attached image.

Princy what's would you suggest.. 

[Vishnu]

Hello Prince, 
my previous issue I have resolved it. Actually, there is a html table in the command bar, table has 98% width. later I stretched to 100%. Now its covered fully. No problem. 

Really very thank full to your great support.. :)

Our requirement is to remove gradiation color & make controls(buttons, dropdownlist..) as flat style.

1. in RadGrid at the footer, we have pagination. So there navigation buttons & dropdownlist has gradiations. (ref image - footer.png)
2. While adding New row record in RadGrid, there also Save Cancel button are there. (ref image - addnewitem.png)
3. Filter columns in RadGrid, there also gradiation is there. (ref image - filterbkcolor.png)

all I wanted to remove the gradiation & set the plain color background as #E6E6E6 with border black color.

Please suggest me how to achieve it. Lemme know if you any query.
Thanks in advance.

[Princy]

Hi Vishnu,

The Filter icon, Pagination icons and icons in Command-bar are using Images, hence its not possible to set the background-color. If you do not want the default view you can overriding the default CSS.

CSS:

<style type="text/css">
    .RadGrid_Default .rgSave, .RadGrid_Default .rgAdd,
    .RadGrid_Default .rgRefresh, .RadGrid_Default .rgEdit,
    .RadGrid_Default .rgDel, .RadGrid_Default .rgFilter,
    .RadGrid_Default .rgPagePrev, .RadGrid_Default .rgPageNext,
    .RadGrid_Default .rgPageFirst, .RadGrid_Default .rgPageLast,
    .RadGrid_Default .rgExpand, .RadGrid_Default .rgCollapse,
    .RadGrid_Default .rgSortAsc, .RadGrid_Default .rgSortDesc,
    .RadGrid_Default .rgUpdate, .RadGrid_Default .rgCancel,
    .RadGrid_Default .rgUngroup, .RadGrid_Default .rgExpXLS,
    .RadGrid_Default .rgExpDOC, .RadGrid_Default .rgExpPDF,
    .RadGrid_Default .rgExpCSV
    {
        background: url(../RadGrid8/Image/image.jpg) !important;
    }
</style>

Thanks,
Princy

[Vishnu]

Hi Princy,
I have tried your above CSS style, but it didn't work for me.
I tried below Css Style -

.RadGrid_Silk .rgSave, .RadGrid_Silk .rgAdd,
.RadGrid_Silk .rgRefresh, .RadGrid_Silk .rgEdit,
.RadGrid_Silk .rgDel, .RadGrid_Silk .rgFilter,
.RadGrid_Silk .rgPagePrev, .RadGrid_Silk .rgPageNext,
.RadGrid_Silk .rgPageFirst, .RadGrid_Silk .rgPageLast,
.RadGrid_Silk .rgExpand, .RadGrid_Silk .rgCollapse,
.RadGrid_Silk .rgSortAsc, .RadGrid_Silk .rgSortDesc,
.RadGrid_Silk .rgUpdate, .RadGrid_Silk .rgCancel,
.RadGrid_Silk .rgUngroup, .RadGrid_Silk .rgExpXLS,
.RadGrid_Silk .rgExpDOC, .RadGrid_Silk .rgExpPDF,
.RadGrid_Silk .rgExpCSV
{
background: url(../RadGrid8/Image/image.jpg) !important;
}

But, This new style hiding my pagination buttons at footer in Grid. Can you please suggest me...??

[Princy]

Hi Vishnu,

The above CSS is a sample to replace all the pager, filter, export etc with an Image specified by the url property. If you donot want the gradation on these icons, you can replace them with another image of your choice.

CSS:

//Here set the path of the image you want to set
background: url(../RadGrid8/Image/image.jpg) !important;

Thanks,
Princy

[Venelin]

Hi Vishnu,

Essentially you have to go trough each element that you want to change and override its original styles. You can easily do this by inspecting the element(s) in question using your browser's web DOM inspector tool, copy the rule that sets the background, increase its specificity and change the property value as desired. Here is some helpful articles:

http://blogs.telerik.com/aspnet-ajax/posts/08-06-17/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin.aspx

http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

The reason why I provide these links is that the approach mentioned there is better that using !important clause. Never use it unless you need to override an inline style. You can run in to problem with it.

If you encounter any difficulties please let us know so we can provide more examples.

Regards,
Venelin
Telerik