I have implemented a new feature for the WebPart feature shipped with ASP.Net 2.0. The new feature is an extended PropertyGridEditorPart where you can build your own editor control for the properties. If you use a PropertyGrdiEditorPart, all properties will be displayed within the edit part as a TextBox, or Checkbox if the type of the property is Bool or a DropDownList if the type of the property is an Enum. With the extended ProperyGridEditrpPart (CustomPropertyGridEditorPart) you can on a property level specify which edit control that should be displayed for a specific property.
This figure shows how the PropertyGridEditorPart will look like when a WebPart is selected to be edited:
The following is the CustomPropertyGridEditorPart where three custom controls are used to edit the WebPart’s properties:
To use the CustomPropertyGridEditorPart, you add it to an EditorZone control.
<asp:EditorZone ID="EditorZone1" runat="server">
<ZoneTemplate>
<nsquared2:CustomPropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server" />
</ZoneTemplate>
</asp:EditorZone>
By default the CustomPropertyGridEditorPart will work like the PropertyGridEditorPart. To make a property to not use the standard controls rendered by the CustomPropertyGridEditorPart, you can attribute a property with the EditControlPartAttribute class:
[Personalizable(true), WebBrowsable, EditControlPart(typeof(MyBrowserType))]
public string Text
{
get { return this._text; }
set { this._text = value; }
}
[Personalizable(true), WebBrowsable, EditControlPart("~/EditControl_UserControls/PickDateEditControl.ascx")]
public DateTime Date
{
get { return this._date; }
set { this._date = value; }
}
With the EditConrolPartAttribute you can either specify a control that inherits the EditControlPart class or a user control that implements the IEditControlPart interface or inherits the EidtUserControlPart.
The EditControlPart and EditUserControl class implements the IEditControlPart that has two properties that must be implemented, Value and EditorPart. The Value property will return or set the value of the property that is edited and the EditorPart is used to get the CustomerPropertyGridEditorPart instance from the EditControlPart class. The following code shows how a custom EditConrtolPart could be implemented:
public class MyBrowserType : EditControlPart
{
private TextBox _textBox;
public MyBrowserType()
{
this._textBox = new TextBox();
}
public override object Value
{
get
{
return this._textBox.Text;
}
set
{
this._textBox.Text = (string)value;
}
}
protected override void CreateChildControls()
{
this.Controls.Clear();
Label l = new Label();
l.Text = "Test: ";
this.Controls.Add(l);
this.Controls.Add(this._textBox);
}
}
The code above implements the EditCotontrolPart’s Value property to return the value from a TextBox or set the value of a TextBox that the MyBrowserType control will render. To make sure the control above will be displayed by the CustomPropertyGridEditorPart for a specific property, you simply add the EditControlAttribute and pass the type of the MyBrowserType as the argument to the attribute:
[Personalizable(true), WebBrowsable, EditControlPart(typeof(MyBrowserType))]
public string Text
{
get { return this._text; }
set { this._text = value; }
}
When the Apply or Ok button that the EditorZone will render is pressed, the CustomPropertyGridEditorPart will set the edited WebPart’s properties attributed with the WebBrowser attribute with the value of the control displayed in the CustomPropertyGridEditorPart. If an EditControlPart is displayed for the property, the Value property of the EditControlPart will be executed to return the value that should be set to the WebPart’s property.
You can also create a user control that will be displayed as an EditControlPart for a property. By doing that you simply pass the URL path to the user control as an argument to the EditControlPartAtribute:
[Personalizable(true), WebBrowsable, EditControlPart("~/EditControl_UserControls/PickDateEditControl.ascx")]
public DateTime Date
{
get { return this._date; }
set { this._date = value; }
}
If you create a User control as an EditControlPart, you need to implement the IEditControlPart interface or inherit the EditUserControlPart. The following code is the code behind of a user control that uses the Calendar control to select a date for a WebPart with a property of type DateTime:
public partial class WebUserControl2_ascx : EditUserControlPart
{
protected void Page_Load(object sender, EventArgs e)
{
}
public override object Value
{
get { return this.Calendar1.SelectedDate; }
set
{
if (value != null && ((DateTime)value) > DateTime.MinValue)
{
this.Calendar1.SelectedDate = (DateTime)value;
this.Calendar1.TodaysDate = this.Calendar1.SelectedDate;
}
else
{
this.Calendar1.SelectedDate = DateTime.Now;
this.Calendar1.TodaysDate = this.Calendar1.SelectedDate;
}
}
}
}
The .ascx page for the code behind above looks like:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PickDateEditControl.ascx.cs" Inherits="WebUserControl2_ascx" %>
<asp:Calendar ID="Calendar1" runat="server">
</asp:Calendar>
You can also attribute a property with the CategoryAttribute attribute and specify the properties that should be displayed in the CustomProptertyGridEditorPart by using the FilterOnCategory property:
<nsquared2:CustomPropertyGridEditorPart FilterOnCategory="Advanced" ID="PropertyGridEditorPart1" runat="server" />
The code above will only display the properties of the WebPart that is attributed with the WebBrowsable property and the CategoryAttribute where the value of the CategoryAttribute argument is set to “Advanced”:
[Personalizable(true), WebBrowsable, EditControlPart("~/EditControl_UserControls/PickDateEditControl.ascx"),
Category("Advanced")]
public DateTime Date
{
get { return this._date; }
set { this._date = value; }
}
The code for the CustomPropertyGridEditorPart is added to the WebPart Components workspace. The code contains a Default2.aspx file the uses the CustomPropertyGridEdtiroPart. If you have any questions or suggestions, please add a comment.