Hi,

There are 3 ways to change our images in each of our control. They are:

1. You could change the image by changing ImagesSettings property in our control. You can change each attribute of image that you want to use in your customization. Example:
   

<ImagesSettings ButtonCenterActive="./btnCenter.png" />

2. You could also change the image by overwrite the image OnInitialize event in client side if the images attached in img tag (<img src="...." />). Although this only can be used if the style was static and you should handle the image source if this style was dynamic style which mean it has hover and active style. Example:
   

function OnInitialize(controlId)
{
   var combo = ISGetObject(controlId);
   combo.GetFrameElement().children[0].children[0].src = "./searchbutton.png";
}

3. You could also change the image if the image is set by using background-image property in the css. By overwrite the css you could 
   

.WG5-F{ background-image: url('/WebResources/Hello.png') !important; }

You could do these method on our control and please let me know if there is any scenario that you want to achieve using this method. Hope this helps.

Regards,
Bernard

What about the icon that shows in the left hand side for a new row or selected rows? (* and > icons)

I have also attached an image that shows the images that I need to change.

WebGrid provides flexibility for developer to customize many aspects of the user interface elements. Personally, it is suggested to specify the location of the image folder to have more option to customize the UI.

By default, image folder will be set to /CommonLibrary/Images/. However, you can specify the location of your own image folder.

To specify the location of image folder

1. Right click on the WebGrid to open WebGrid.NET designer.
2. Focus on Popular Settings – click See all properties.
3. Find ImageSettings.
4. Set the Folder to /MyCommonLibrary/WebGrid/Images.

Current row image

Following image shows the current row image.

In order to customize the image, please set CurrentRowImage property to the desired image. CurrentRowImage property specifies the image that represents the current selected/active row.

<ISWebGrid:WebGrid ID="WebGrid1" runat="server" ...>
    ...
    <LayoutSettings Hierarchical="True">
        <ImageSettings CurrentRowImage="wg_currow.gif" />
    </LayoutSettings>
</ISWebGrid:WebGrid>

New row image

Following image shows the new row image.

In order to customize the image, please set NewRowImage property to the desired image. NewRowImage property specifies the image to represent new row.

<ISWebGrid:WebGrid ID="WebGrid1" runat="server" ...>
    ...
    <LayoutSettings Hierarchical="True">
        <ImageSettings NewRowImage="wg_newrow.gif" />
    </LayoutSettings>
</ISWebGrid:WebGrid>

Hierarchical collapse image

Following image shows the hierarchical minus image.

In order to customize the image, please provide an image and named it as min-xp.gif; and then add the new image to the image folder.

Should you need to modify the plus image of hierarchical grid, please do the same steps for plus-xp.gif.

Hierarchical tree lines

The hierarchical tree lines consist of three kinds of image files. They are: I.gif; I_.gif; and _.gif image files. Should you need to modify them, you may replace those files with your image files.

This customization requires you to keep the new images have identical file name and extension.

Hope this helps.

Is there no way to change this globally? This will only work if I change each of the 400+ grids we have, so that makes this not an option.

You can try to put the ImageSettings in a separate xml file and load the xml file during Page_Load event. A simple sample is enclosed within this message. Please have the sample evaluated on your end and let us hear your feedback.

Again, this will result in 400+ changes. It would be appreciated if you made all styling done through CSS. This is a web control, not a windows control. All styling should be done through CSS. By not allowing styling to be done through CSS you end up having issues like this and needing to rely on proprietary configurations rather than by something that can be used globally and generically.

Please also update all your documentation to include examples of how to use the various methods, as there doesn't really seem to be any that I can see (at least on the client side).

I’d like to suggest you to utilize WebStyleManager ("%ProgramFiles%\Intersoft Solutions\WebUI Studio for ASP.NET\WebDesktop.NET 4.0\Bin\ISWebStyleManager.exe" for 32-bit operating system or "%ProgramFiles(x86)%\Intersoft Solutions\WebUI Studio for ASP.NET\WebDesktop.NET 4.0\Bin\ISWebStyleManager.exe" for 64-bit operating system) in order to apply theme for the whole WebGrid component in your project. The StyleManager is a standalone desktop (WinForm) application built on the top of WebUI.NET Framework 3.0 and .NET Framework 2.0 enabling a designer to add, edit or remove themes in a web application.

Here is the link to show a video on how to use our WebStyleManager. In that sample, it will create a theme style for WebDesktop. However, you can create it for WebGrid as well. During adding the component, you can add the WebGrid component instead of the WebDesktop component.

I enclosed one simple website which containing WebGrid. The entire grid in this project will use the same style which is defined in isl file. Please have the attached sample evaluated in your end and let us hear your feedback.

That is not acceptable. If there is no way to do this through CSS, then I consider this a bug in your application. You use CSS classes in other places to add images, however, for others you do not. You are inconsistent in your implementation and I'd like it rectified please.

...You use CSS classes in other places to add images, however, for others you do not...

Thank you for your valuable feedback. The WebGrid development team might has a reason why current row image and new row image can be easily customizable through ImageSettings property while it doesn’t for the expand/collapse image of hierarchical grid and hierarchical tree lines.

I will have this forwarded to the team to be discussed further. In the meantime, could you please let me know your feedback regarding the usage of the WebStyleManager which will allows you to change control-level appearance globally, in this case is WebGrid? Will this solution suits your need, to avoid changing each of the 400+ grids that you have in your project?