Export Icons on the header

[Michael]

Using a RadGrid for Winforms,
I am trying to enlarge the actual icons in the header of the grid. For example "pdf", "csv", and "Xls" . Is there a PNG somewhere that I can do this, or a style tag that can go in the aspx page?

Any help is appreciated.

[Galin]

Hello Michael,

You can find the sprite image with this icons in ~Telerik Installation Folder\Skins\Common\Grid. Also it is attached to this post.

I hope this helps.

Regards,
Galin
Telerik

[Michael]

Galin,
I have re-sized this file (export.gif) and saved it. I did not see it make a difference in the size displayed in the Web Page.  I found some style tags in the Grid.MetroTouch.CSS but was unable to get them to re-size the images after the Web Page was rendered either.

Is there any inline Style tags you or anyone can offer to make the icons larger? I was able to find some to align them left, but these are working for resizing. Please see attached for an image of the icons on my page

[Galin]

Hi Michael,

There is no property that allows you to change the size of the icons, but those buttons have the following CSS classes:
.rgExpXLS, .rgExpDOC, .rgExpPDF, .rgExpCSV
and using them you can easy enlarge and style the icons, example for the Export CSV icon:

div.RadGrid .rgExpCSV {
    background: url(path/icon.png);
    height: 32px;
    width: 32px;
}

Also you can use the bigger icons in this demo.

I hope this helps.

Regards,
Galin
Telerik

[Neil N]

Does this still work? Looks like images were replaced by font glyphs. I'd like to replace the icons embedded in the grid with something users can actually recognize.

[Vessy]

Hi Neil,

The styles provided by Galin are applicable only in RadGrid is used in Classic render mode. If you are using the control in Lightweight rendering, you can enlarge the icons by increasing the font-size:

        div.RadGrid .t-font-icon.rgIcon.rgExpCSVIcon:before {
            font-size: 32px;
        }

If you want to use a custom image icon, you can do it like follows:

        div.RadGrid .t-font-icon.rgIcon.rgExpCSVIcon:before {
            content: ""
        }

        div.RadGrid .t-font-icon.rgIcon.rgExpCSVIcon {
            background-image: url("Images/Excel_HTML.png");
            height: 32px;
            width: 32px;
        }

Regards,
Vessy
Progress Telerik

[Neil N]

Thanks, worked perfectly.

[Vessy]

Hi,

You are welcome, Neil, I am glad the proposed solution is working for you.

Regards,
Vessy
Progress Telerik