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.