Small width layout Medium width layout Maximum width layout Small text Medium text Large text
     Search
Downloads Downloads Directory Directory Forums Forums Forge Forge Blogs Blogs        Marketplace Marketplace Careers Program Careers
Products › Development › Forge › Component - WebControls Register  |  

 

dnn_ct_webcontrols_170x64.gif

 

  Quick Links  
 


  Team Leadership  

Jon Henning

jonhenning.jpg

 


  DotNetNuke Projects  
The DotNetNuke Projects are a special category of platform extensions which are developed by volunteers to conform to the high professional standards mandated by DotNetNuke Corporation. The DotNetNuke Projects are distributed as a standard part of the DotNetNuke core application release offerings.

 


telerik -- supercharge your DNN websites
  Ads  
Engage Software - Training Partner for DotNetNuke
 


  Sponsors  

Meet Our Sponsors

Salaro -- Skins and more
OnyakTech
The best choice for your web site host, email hosting, and domain registration.
CrystalTech Web Hosting™
Webhost4life, specialists in DNN hosting
Mad Development is a full service interactive agency focusing on the merge of design, technology, e-commerce, and affiliate marketing by providing total website solutions.
 


DotNetNuke® Project :: WebControls

The primary purpose of the DotNetNuke WebControls project is to allow developers to utilize feature-rich controls in their applications without the associated cost or distribution restrictions associated with commercial controls. All controls utilize the ClientAPI, and therefore support a rich client side object model, work cross-browser, and utilize AJAX functionality.

The DotNetNuke TreeView control is an open-source ASP.NET WebControl that has a rich client-side object model and supports advanced featuresets like populate on demand and keyboard navigation.
The DotNetNuke Menu control is an open-source ASP.NET WebControl that has a rich client-side object model and supports advanced featuresets like populate on demand and keyboard navigation (soon).
The DotNetNuke Label Edit control is an open-source ASP.NET WebControl that allows any label to be editable on the client where it uses a client-callback to persist the changes. Simply specify a client-side event like onclick to allow the user to edit. It supports RichText and MultiLine editing.
The DotNetNuke Text Suggest control is an open-source ASP.NET WebControl that allows any textbox to suggest the results the user is looking for by dynamically populating a menu of matched items.
The DotNetNuke Tab Strip control is an open-source ASP.NET WebControl that allows a page to be displayed in a tabular manner. It supports 3 rendering modes, including AJAX on-demand loading to allow for optimal performance.
The DotNetNuke ToolBar control is an open-source ASP.NET WebControl that allows a toolbar to be attached to any control.
 


WebControls Project Blog
May 12

Posted by: Jon Henning
5/12/2008

One of the new features coming in Cambrian is an update in the permissions grid.  The current grid supports two states, Allow and Null (not assigned).  The new grid will support three states (Allow, Deny, and Null).  The obvious question here is how do you present this to the user?  The current design allows for a nice compact way to set the permissions within a grid utilizing checkboxes.  The new way will use a new DotNetNuke WebControl that supports multiple states and mimics a checkbox.  The original name I came up with for the control was DNNTriStateCheckbox.  However, while developing this control I soon realized there was no reason I needed to only support 3 states and saw the opportunity to support any number of states and not necessarily look like a checkbox.  So the control is now called DNNMultiStateBox.  It is probably the simplest of all the controls in the DotNetNuke WebControl suite.  Here is an example of some of the markup that is possible.

<dnn:DNNMultiStateBox ID="MyDNNMultiStateBox1" runat="server" ImagePath="~/images/">
  <States>
    <dnn:DNNMultiState Key="Null" ImageUrl="null.gif" DisabledImageUrl="lock.gif" />
    <dnn:DNNMultiState Key="Unchecked" ImageUrl="unchecked.gif" DisabledImageUrl="lock.gif"/>
    <dnn:DNNMultiState Key="Checked" ImageUrl="checked.gif" DisabledImageUrl="lock.gif"/>
  </States>
</dnn:DNNMultiStateBox>

This is essentially how the code is used in Cambrian.

Notice how you can specify an image for each state, along with a disabled representation of each image.

The control, however is not limited to this use case.  Here is some more markup that is possible.

<dnn:DNNMultiStateBox ID="MyDNNMultiStateBox1" runat="server" ImagePath="~/images/">
  <States>
    <dnn:DNNMultiState Key="Null" ImageUrl="null.gif" Text="Its Null" ToolTip="Nada, nill, zilch!" " />
    <dnn:DNNMultiState Key="Unchecked" ImageUrl="unchecked.gif" Text="Its Unchecked" ToolTip="Not selected!" />
    <dnn:DNNMultiState Key="Checked" ImageUrl="checked.gif" Text="Its Checked" ToolTip="Way to go!" />
  </States>
</dnn:DNNMultiStateBox>

To see how you would create the control on the server side, lets review some more code

Dim stars As DotNetNuke.UI.WebControls.DNNMultiStateBox = New DotNetNuke.UI.WebControls.DNNMultiStateBox()
stars.States.Add(New DNNMultiState("1", "Poor", "1stars.gif", "", "You did bad dude!"))
stars.States.Add(New DNNMultiState("2", "Average", "2stars.gif", "", "You did ok!"))
stars.States.Add(New DNNMultiState("3", "Good", "3stars.gif", "", "You did good kid!"))
stars.States.Add(New DNNMultiState("4", "Great", "4stars.gif", "", "You did great! Get yourself some Frosted Flakes!"))
divContainer.Controls.Add(stars)

 

Finally, to get the selected value on the server access the SelectedState property to get the Key, Text, or any other property your interested in.

MyDNNMultiStateBox1.SelectedState.Key

To see a live sample of this control go to this page.

Tags:

Re: Introducing DNNMultiStateBox

Awesome work!

By hooligannes on   5/12/2008

Re: Introducing DNNMultiStateBox

This is great Jon! I can't wait to use it.

By dworthley on   5/13/2008

Re: Introducing DNNMultiStateBox

A very good work! This new control looks feature rich and flexible enough to become one of the most popular in future. Leveraging on it looks easy and straightforward, the markup is clear, and the look and feel is fully customizable. What to say: very well done Jon!

By gnogna82 on   5/13/2008

Re: Introducing DNNMultiStateBox

greate, look like we can develope the star rating feature easily in future!

By sunwangji on   5/13/2008

Re: Introducing DNNMultiStateBox

Looks great, Any idea when this new control will be available?

By fatgeorge on   5/13/2008

Re: Introducing DNNMultiStateBox

re: fatgeorge,
The control will be included with DNN 5.0 for sure. It is uncertain whether I will release them before that. It should work fine with earlier versions of DNN as long as the server hosting the site has MSAJAX installed.

By jhenning@solpart.com on   5/13/2008

Re: Introducing DNNMultiStateBox

Hopefully module developers will use this as a standard rating control (it would be nice to have the hover effect, ala netflix). I worked on a large portal that had several modules, each with their own mechanism to rate. A standard control would enhance the user experience and provide site consistency.

By ech01 on   5/15/2008

Re: Introducing DNNMultiStateBox

Wow this looks great! Couple of points:

1) Would be wise to rename the "key" property to "value" just to stay consistant with the "text" and "value" properties of most other controls?

2) Is it possible to add a hover event using javascript? One of the things I noticed in the ratings example is that you had to actually click the control multiple times in order to get it from "1" to "4". It would be great if you could just click the fourth star and be done. Not sure if thats even possible though.

By mathisjay on   5/15/2008

Re: Introducing DNNMultiStateBox

ech01,
One thing I need to be clear on here, is that the control is primarily driven off the need to have a checkbox have more than 2 states. The sample I provided where it can work as a rating control was just there to show its flexibility. I am not sure this control fits as the defacto standard for ratings, as mathis bring up good points for things that a true rating control should encompass.

mathisjay,
1) I agree with this point. I think I will be able to change it at this point without too much hassle.

2) See response to ech01.

Thanks for the feedback!

By jhenning@solpart.com on   5/15/2008

Re: Introducing DNNMultiStateBox

This is some great news! I cannot wait to play with this control!

By hismightiness on   5/30/2008
 


MaximumASP
MaximumASP provides a wide array of web hosting plans to fit any hosting need. We also provide software and services needed to keep it running optimally.
MaximumASP.com
Mad Development: dotnetnuke design and development
We are an expert Dotnetnuke shop specializing in developing solutions that merge the requirements of design and branding, content management, ecommerce, search engine optimization and business logic.
www.MadDevelopment.com
telerik
telerik r.a.d.controls suite is the most innovative and comprehensive toolset for ASP.NET development, tailored for seamless integration with the DotNetNuke project. This integrated collection of controls allows professionals to build web-solutions with the UI richness and responsiveness of desktop applications.
dnn.telerik.com

DotNetNuke Corporation   Terms Of Use  Privacy Statement
DotNetNuke®, DNN®, and the DotNetNuke logo are trademarks of DotNetNuke Corporation
Hosted by MaximumASP