[Solved] Advanced styling of the RadDock, is it done with events?

[Daniel]

Hello,

I am trying to make two customizations to the RadDock style that, as far as I can tell, aren't a part of the styles that are editable through skinning.

The first, is that I want to change the opacity of the RadDock when dragging starts, and reset it back when dragging stops, creating a translucent effect when I'm dragging the module. Do I need to swap the CSS style on client side event? I only see the DockPositionChanging event.

The second customization is I want to change the style of the drop cue, or the area displaying within a RadDockLayout that outlines where the RadDock I'm currently dragging, will be dropped if I let go out of the mouse button. I couldn't find this style in the skin; do I need to this on an event as well?

[Petya]

Hello Daniel,

1. The events you probably need are OnClientDragStart and OnClientDragEnd as you can test here.

2. To change the styles for the "drop cue" you need to modify the rdPlaceHolder classes in Skins/Dock.css and Skins/[Used_skin]/Dock.[Used_skin].css files. For example to have a red background for the "drop cue" you could modify the rdPlaceHolder class in Skins/Dock.css as follows:

.rdPlaceHolder
{
    border-style:dashed;
    border-width:1px;
    background-color: Red;
}

Here is a useful link as to how to modify an existing skin for a Prometheus control. Let us know if you need further assistance with this.

Sincerely yours,
Petya
the Telerik team

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

[Daniel]

Thanks for replying. I'll post my results with the client-side code when I've had a chance to work with it.

I did originally modify the .rdPlaceholder CSS attribute in my custom skin to include a background-color, but this was ignored. I also noticed in your reply that you said I must change both the Dock.css file as well as the Dock.[Skin].css file.

Since I'm using ASP.NET Theming I have the Dock.[Skin].css file in my App_Themes folder, but I do not have the "master" Dock.css file within my solution.

I tried importing the Dock.css into App_Themes folder, above the level of the actual skin, and modifying it in addition to the rdPlaceholder in the skin, and it was ignored.

I also tried modifying the master Dock.css file in Program Files\Telerik\Prometheus and it was likewise ignored (though I do not like this approach since I want to have control over the .css in VSS, so I would use the Dock.css in my own directory). I ensured that EnableEmbeddedSkins="false" in both the RadDock being created and the RadDockZone that it would appear in.

Whatever I'm doing wrong is preventing any rdPlaceholder styling from appearing different than the default.

[Petya]

Hello Daniel,

You should add Dock.css in the Theme folder. However, currently the Dock.css file is always loaded from the dll so in order for the changes you made to your Dock.css file to take place you should always mark the new styles with !important, for example:

.rdPlaceHolder
{
    border-style:dashed;
    border-width:1px;
    background-color: Red !important;
}

In this way your styles will override those from the dll's Dock.css file. This should solve the issue. Let us know how it goes.

Best wishes,
Petya
the Telerik team

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

[Daniel]

Using !important on changed elements does not affect the rdPlaceholder, it is still appearing for me how it is loaded from the .dll; I have tried with and without Dock.css in App_Themes and making the !important changes in that file.

I am using a custom skin App_Themes\MySkin and can verify that the dock is styling as per the CSS in Dock.MyTheme.css for other elements, except for any overrides I've put in rdPlaceholder marked as !important.

[Petya]

Hello Daniel,

I am attaching a simple project demonstrating all my settings that result in the achieving the Red background for the placeholder element. Please take a look at it and compare it to your settings. Let us know if you have questions regarding the attached project.

Greetings,
Petya
the Telerik team

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

[Daniel]

I used your example to pinpoint the issue. I am now able to apply the appropriate styling to the RadDock but I still see this as a bug considering the following information:

1) I have to put Dock.css in "MyTheme" folder, not "App_Themes". I would expect that if I'm going to have several themes, and I want them all to inherit from a default Dock.css, i.e. the Dock.css won't have the naming convention of "RadDock_MyTheme .rdPlaceholder" but rather simply ".rdPlaceholder", then why wouldn't I then put this in "App_Themes" and have all my themes start with this CSS file and then move on to their theme-specific CSS? As it stands now I'd have to place a Dock.css file, *and* a Dock.MyTheme.css file in every theme. I don't think this is the expected result to bypass the .dll styles.

2) I have to add my !important overrides to the non-skinned Dock.css file rather than Dock.MyTheme.css; Consider this example:

In Dock.css:

.rdPlaceHolder
{
    border-style: dashed;
    border-width: 1px;
    background-color: Green !important;
}

In Dock.MyTheme.css:

.RadDock_MyTheme .rdPlaceHolder
{
    background-color: Red !important;
}

Will result in a green background! Even removing the green attribute from .rdPlaceholder in Dock.css and you'd get the standard default white for any .Skin file using the "MyTheme" theme and EnableEmbeddedSkins = false.

What is really happening then, presumably, is that for CSS attributes that exist in the "default" Dock.css file, those attributes will be ignored if they're specified in Dock.MyTheme.css; but ones that are not specified, like images, etc., will show up as expected if they exist in Dock.MyTheme.css;

I believe that this functionality needs to change in two ways:

1) If I override attributes like .rdPlaceholder in Dock.MyTheme.css, then these should take precedence over Dock.css. Indeed these are currently not even read, considering I can define .rdPlaceholder in Dock.MyTheme.css and not in Dock.css and end up with the default .dll's styling.

2) I should be able to place Dock.css, Slider.css, Window.css, etc., in App_Themes, and have all themes used by the Skin with embedded styles disabled use these as the base. Then apply overrides in App_Themes\MyTheme\Dock.MyTheme.css. I should not need to have two Dock.css / Dock.MyTheme.css files in every theme just to specify the base styles, wouldn't you agree?

Daniel

[Daniel]

For anyone landing on this thread you can achieve style changes to the RadDock using OnClientDragStart and OnClientDragEnd events of the client API. When you're building your RadDock control in code-behind, assign the client-side events using the required properties and make their names the names of the client-side event handlers you write:

// Wire up the client-side effects
dock.OnClientDragStart = "OnClientDragStart";
dock.OnClientDragEnd = "OnClientDragEnd";

Then, in your markup, use this script to get the Sys.UI.DomElement object and make changes to its style there. This particular script will make your RadDock semi-transparent while it's being dragged, and restore full opacity when you're done dragging it.

    <script type="text/javascript">
        function OnClientDragStart(sender, eventArgs)
        {
            var el = sender.get_element();
            el.style.opacity = "0.7";
            el.style.filter = "alpha(opacity=70)";
        }

        function OnClientDragEnd(sender, eventArgs)
        {
            var el = sender.get_element();
            el.style.opacity = "";
            el.style.filter = "";
        }
    </script>

[Petya]

Hello Daniel,

First I would like to thank you for sharing with the community the idea in your last post - we truly appreciate the active participation in the Telerik community of our clients.

Now let me get to the skinning questions you asked.

We investigated the issue with the rdPlaceHolder styles of the Dock.css taking precedence over the rdPlaceHolder styles in Dock.MyTheme.css and it turned out that there is a mistake in the Dock.MyTheme.css file - the .RadDock_Default .rdPlaceHolder class name should actually be .RadDockZone_Default .rdPlaceHolder. For helping us discover this issue you may find 500 Telerik points added to your account. It will be fixed for the coming official release next week but you could also modify it yourself right away - simply change the name of the class. Then, you do not need to modify the Dock.css file at all. I should say that now the Dock.css file is still loaded from the dll and if you do not need to modify it then you do not need to include it in the themes at all. In case you need to modify the Dock.css styles you should include it in your themes files and make the changes in it with !important.

Here we get to your other question regarding the multiple Dock.css files. When EnableEmbeddedSkins is set to False our controls no longer register CSS files, they have definite class names for different elements and expect that the CSS with these classes is on the page. The developer needs to take care that the needed CSS is loaded on the page and one possibility is using themes. Yet, the themes simply work this way - they need all their files to be in the specific theme folder to load them on the page. However, in case it is important for you to keep just one common Dock.css file then we can suggest the following idea - place the Dock.css file in the App_Themes folder and then in each Dock.MyTheme.css write @import url("../Dock.css");. In this way whatever theme you use, the common Dock.css file will be loaded as well. Another approach is to manually register the Dock.css file in each page like this:

  <link type="text/css" rel="Stylesheet" href="App_Themes/Dock.css" />

Hope you find this information helpful in your work with our controls. I am attaching my project slightly modified to reflect all suggestions mentioned above.

Sincerely yours,
Petya
the Telerik team

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