SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am creating a Custom EditorPart in VS 2010 and have it all working as I would like. The only issue I want to fix is that I want the custom parts to look like the Appearance and Layout sections. I thought by supplying a category option that it would work, but since the controls are custom, the webbrowsable piece is not needed. I thought I could pull it off with css but this is not feasible at this time. Any pointers would be greatly appreciated.

Update 1: I have used some tools to get to some things I think I need. The RenderEditorPart and EditorPartChrome objects seem promising but these seem to be reserved if you are creating the page that the webpart is in. The other EditorParts use these so is it possible in just a custom EditorPart.

Update 2: So I did find a way to make this happen with jQuery and CSS. I will be making a blog post soon. It looks cool enough!

Web Part Editor

share|improve this question

As other users has sugested, I belive that your best bet is to try and replicate the layout (html tags and classes) of the out of the box editors. This blog post provides a good start about customizing the custome EditoPart control layout to make them appear more similar to the ootb experience.

For example, to define a textbox (note: you need to place this in a table) you would use something along the line of:

protected override void CreateChildControls()
    Controls.Add(new LiteralControl("<TR>"));
    Controls.Add(new LiteralControl("<TD>"));
    Controls.Add(new LiteralControl("<DIV class=\"UserSectionHead\">"));
    Controls.Add(new Label { Text = Label, ToolTip = ToolTip });
    Controls.Add(new LiteralControl("</DIV>"));

    Controls.Add(new LiteralControl("<DIV class=\"UserSectionBody\">"));
    Controls.Add(new LiteralControl("<DIV class=\"UserControlGroup\">"));
    Controls.Add(new LiteralControl("<NOBR>"));
    Controls.Add(new TextBox { CssClass = "UserInput", Width = 176 });
    Controls.Add(new LiteralControl("</NOBR>"));
    Controls.Add(new LiteralControl("</DIV>"));
    Controls.Add(new LiteralControl("</DIV>"));

    Controls.Add(new LiteralControl("<DIV class=\"UserDottedLine\" width=\"100%\"/>"));
    Controls.Add(new LiteralControl("</TD>"));
    Controls.Add(new LiteralControl("</TR>"));

As for your secondary question: the ability to have the expand/collapse icon. I don't have looked far into the problem, but I suppose that the editor simply reuse the javascript defined for handling expand/colapse support on the InputFormSection controls. Alternative you can use multiple custom Editor Part - each one would handle a sub section of the web part properties.

share|improve this answer
I have all of the look correctly configured the way I want. Thanks for that though I had already seen it and this part is fine. It just seems strange that the 4 OOB EditorParts (Appearance, Layout, etc) have the nice accordion effect whereas there seems to be nothing to show how that was done. Maybe time to use reflector! – spevilgenius Feb 15 '12 at 9:10
By accordion effect, do you mean the ability to expand and collapse? If so, your editor part can do the same thing except that you have to click the chevron (^) in the top right instead of the plus sign. – Rob Windsor Feb 15 '12 at 16:55
Exactly what I was suggesting. You can use multiple editor part - each one simulating an accordion/section or you can try to replicate the accordion javascript in a single editor part. – SPArchaeologist Feb 15 '12 at 17:16
Yes Rob I know that this works okay. However, I was hoping that I could make it look like the others. clearly MS did it :) It just makes no sense to me that it would do that even though several others do that so other than writing javascript/jquery code to change it there just doesn't seem to be a way. I was hoping that the EditorPartChrome would be addressable from the EditorPart class. – spevilgenius Feb 15 '12 at 18:03
I have figured out how to make it do what I wanted with a bit of jQuery and css. I used a visual webpart and visual editor part both with usercontrols. I will be posting this to my blog soon! – spevilgenius Feb 19 '12 at 10:36

Use the IE dev tools to look at the web part you want your web part to look like then assign those OOTB classes to your UC mark up. You should get the desired result since you will be calling on classes in coreV4.css and not a custom CSS.

share|improve this answer
I tried something along those lines, but the custom EditorPart still looks wrong! Most examples of them all look like mine does, but I want to force it to have the expand/collapse icon like the other ones do – spevilgenius Feb 15 '12 at 0:50

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.