[Solved] Custom Skin

[Chris]

Hi,

I am really confused how to create and use Custom Skin for my grid and other controls.  I have read thru your online documentation but still guiding me to nowhere.  From reading other post, it suggests that I should use Theme.  Are there any solid example on how to create and apply a Theme to my grid control?

I see an example with this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="Custom" %>

However, I am using ascx file which <%@ Control %> doesn't provide Theme attribute.  How would I apply the Theme?

Chris

[Petja]

Hi Chris,

In order to use a skin, which is not embedded in the assembly, you need to do the following:

1. Set EnableEmbeddedSkins="False" for the RadGrid.
2. Register the skin's CSS file manually on the pages or via a ASP.NET Theme.
3. Some RadGrid images are not references by the skin as background images, but are true image elements. These include pager, filtering and command images. You can reference them in the RadGrid's server tag or by using a theme. For example:

<PagerStyle
   FirstPageImageUrl="..."
   LastPageImageUrl="..."
   NextPageImageUrl="..."
   PrevPageImageUrl="..."
>
</PagerStyle>

<CommandItemSettings
    AddNewRecordImageUrl="..."
    RefreshImageUrl="..." />

or to use Themes as put all above settings in the theme skin file.

Find attached two sample projects demonstrating both approaches.

Let us know if you have further questions.

Best wishes,
Petja
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

I am using a theme to specify my grid custom skin and have implemented it in the same manner as your CustomSkinTheme.zip example.  I can't work out how to specify the Edit, Update and Cancel image urls for ImageButton GridEditCommandColumns.  I can specify them in every instance of the grid, using the EditImageUrl and similar properties of the GridEditCommandColumn, but I want to do this once for my skin so I don't need to do so on each grid, just like the built-in skins.

[Sebastian]

Hi Tim,

Consider taking advantage of the ASP.NET 2.0 Theme mechanism and modify the grid structure in SkinFile.skin (residing in the App_Themes/Business folder of the second project) to include EditFormSettings tag with nested EditColumn holding the image urls for the edit/update/cancel images. Thus you should be able to reuse these edit column definitions throughout all grids in your web site.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

Thanks for your quick response.  However, unfortunately I already tried this and it doesn't seem to affect the images for the GridEditCommandColumn, only for the edit form when EditMode is set to "EditForms".

Generally I use a GridEditCommandColumn with EditMode set to "InPlace" and in this scenario the images for the Edit, Update and Cancel buttons are not picked up from the EditFormSettings-EditColumn properties.

[Sebastian]

Hello Tim,

With EditForm = InPlace you will need to specify the settings for the image urls directly through the GridEditCommandColumn definition, namely:

<Columns>
  <telerik:GridEditCommandColumn ButtonType="ImageButton"    .....image url definitions........ />
</Columns>

Best regads,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

Hi Stephen,

This is an unfortunate regression then, since with the original RadGrid I can specify the GridEditCommandColumn button images for a custom skin simply by placing the image in the RadControls\Skins\Grid\<SkinName> folder in my web app, whereas with the Prometheus version I have no way of centrally specifying these images and have to do it individually for every single RadGrid instance as you describe.

A potential solution for this would seem to me that you could change the grid so that it uses the EditFormSettings-EditColumn ImageUrl properties to define the images for the GridEditCommandColumn button images as well as for the Edit Form.  Otherwise you need a new setting such as "EditCommandColumnSettings".

Regards,
Tim.

[Tim]

I am also running into the same problem with the GridButtonColumn.  With the original RadGrid I can specify

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" />

in a grid using a custom skin and the image button is automatically rendered with my web app's RadControls\Grid\Skins\<SkinName>\Delete.gif image.

With the Prometheus version with a custom skin I can find no way of specifying that image centrally, so I now have to specify the ImageUrl property explicitly for every GridButtonColumn in my project.

[Sebastian]

Hi Tim,

I am happy to inform you that for the next service pack of RadGrid Prometheus (expected in the begging of next week) we will expose ImagesPath property with which you can specify the location of the default images when having UseEmbeddedSkins = false for the grid. Here is the information that will be included in the online documentation as well (chapter RadControls Prometheus Fundamentals -> Controlling visual appearance -> How skins work):

In order to set the filtering/sorting/paging/expand as well as the data editing images (edit/update/delete/add record/refresh) create your own images and set the path to them through the ImagesPath property of RadGrid. Note that the names of these images should match those for the predefined skins in order to be referenced properly from the folder pointed through the ImagesPath property. Below is a list of those images:

Filtering images
Filter.gif
SelectedMenu.gif
NotSelectedMenu.gif

Sorting images
SortAsc.gif
SortDesc.gif

Expand/Collapse images
SinglePlus.gif
SingleMinus.gif

Pager images
PagingFirst.gif
PagingLast.gif
PagingNext.gif
PagingPrevious.gif

Edit/Update/Delete/Insert/Cancel/Add record/Refresh images
Edit.gif
Update.gif
Delete.gif
Insert.gif
Cancel.gif
AddRecord.gif
Refresh.gif

Kind regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

Excellent.  Thank you.