This is a migrated thread and some comments may be shown as answers.

Export Icons on the header

7 Answers 329 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 19 Dec 2013, 04:21 PM
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.

7 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 23 Dec 2013, 09:46 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Michael
Top achievements
Rank 1
answered on 06 Jan 2014, 06:41 PM
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

0
Galin
Telerik team
answered on 09 Jan 2014, 05:05 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Neil N
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 27 Aug 2020, 09:42 PM
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.
0
Vessy
Telerik team
answered on 31 Aug 2020, 09:44 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Neil N
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 01 Sep 2020, 03:21 PM
Thanks, worked perfectly.
0
Vessy
Telerik team
answered on 01 Sep 2020, 05:52 PM

Hi,

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

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Galin
Telerik team
Michael
Top achievements
Rank 1
Neil N
Top achievements
Rank 1
Iron
Veteran
Iron
Vessy
Telerik team
Share this question
or