This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
[This post is part of the developer's manual preview published on this blog. You can find temporary TOC here.]
User Control command panels are generally used with intra site module, where all the Views are based on User Controls. The main advantage of the User Control based command panel is the fact that we can use any User Control as a command panel as long as we implement ICommandPanel interface on it.
Note that, while you will be able to create a command panel in Visual Studio by simply dragging and dropping controls on the canvas and wiring events as you would for any other user control, this flexibility also means that you will have to implement every aspect of the command panel yourself. For example, you will have to manually assign the commands to the hyperlinks.
In the sample for this article we are going to add a User Control based command panel to our sample books module. The command panel will simply display a YouTube video and have a link to a book sales View of the module. While, the YouTube video is really not something we would need in a command panel, the idea is to show that you are not limited in any way when creating User Control based command panel. The final result of our command panel can be seen on the screenshot below:
Now that you have created your user control, create the user interface by dragging the controls you will use. The markup for the sample command panel from the screenshot looks like this:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyCommandPanel.ascx.cs" Inherits="MyControls_MyCommandPanel" %> |
<object width="120" height="101"> |
<param name="movie" value="http://www.youtube.com/v/mgDo0U6I2K8&hl=en&fs=1&color1=0x006699&color2=0x54abd6"></param> |
<param name="allowFullScreen" value="true"></param> |
<param name="allowscriptaccess" value="always"></param> |
<embed src="http://www.youtube.com/v/mgDo0U6I2K8&hl=en&fs=1&color1=0x006699&color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="120" height="101"></embed> |
</object> |
<br /> |
<asp:HyperLink ID="booksSalesView" runat="server" Text="Books sales" Font-Bold="true"></asp:HyperLink> |
Now, open the the code behind file and make sure you at least implement ICommandPanel interface on the control. If you will be wiring commands for the Views it is also a good idea to inherit from ViewModeUserControl as opposed from UserControl base class. The code behind implementation for our sample command panel looks like this:
using System; |
using Samples.Books.WebControls; |
using Telerik.Cms.Web.UI; |
using Telerik.Web; |
public partial class MyControls_MyCommandPanel : ViewModeUserControl<BooksControlPanel>, ICommandPanel |
{ |
protected void Page_Load(object sender, EventArgs e) |
{ |
booksSalesView.NavigateUrl = CreateRootViewCommand(typeof (BooksControlPanel), typeof (BooksSalesView)); |
} |
/// <summary> |
/// Not implemented on the user control command panel |
/// </summary> |
public void Refresh() |
{ |
throw new System.NotImplementedException(); |
} |
/// <summary> |
/// Name for the command panel. |
/// </summary> |
public override string Name |
{ |
get |
{ |
return "MyCommandPanel"; |
} |
} |
/// <summary> |
/// Title of the command panel. |
/// </summary> |
public override string Title |
{ |
get |
{ |
return "My command panel"; |
} |
} |
/// <summary> |
/// Not implemented on the user control command panel |
/// </summary> |
public IControlPanel ControlPanel |
{ |
get |
{ |
throw new System.NotImplementedException(); |
} |
} |
} |
protected override void CreateCommandPanelsFromUserControls(string viewMode, System.Collections.Generic.List<string> userControls, System.Collections.Generic.List<Telerik.Web.ICommandPanel> list) |
{ |
if (userControls == null) |
userControls = new List<string>(); |
userControls.Add("~/MyControls/MyCommandPanel.ascx"); |
base.CreateCommandPanelsFromUserControls(viewMode, userControls, list); |
} |
The second parameter is the list of virtual paths of all the User Control based command panels. All we need to do is add the virtual path to our User Control created in the first part of this article. The third parameter gives us access to the list of all command panels already created should we need it.
The implementation of the method is very simple. We check if userControls list has been initialized and if not create a new instance of string list for it. Then we add a virtual path of our User Control to the list. Finally, we call the base implementation of the method and pass it the modified parameters.
Subscribe to get all the news, info and tutorials you need to build better business apps and sites