Kentico CMS 7.0 Controls

Getting started

Getting started

Previous topic Next topic Mail us feedback on this topic!  

Getting started

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

The following is a step-by-step tutorial that will show you how to use the UniSelector user control to allow the selection of users from the system and perform a basic task with the selected user:

 

1. Create a new Web form called User_UniSelector.aspx somewhere in your website installation directory.

 

2. Add the following directive to the beginning of the page code to register the UniSelector control:

 

<%@ Register src="~/CMSAdminControls/UI/UniSelector/UniSelector.ascx" tagname="UniSelector" tagprefix="cms" %>

 

3. Modify the <%@ Page %> directive at the top of the code as in the following example:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="User_UniSelector.aspx.cs" Inherits="UniSelectorExample_User_UniSelector" Theme="Default" %>

 

The Theme attribute was added with its value set to "Default", which specifies the default theme used to style the UniSelector control. Please keep in mind that the value of the Inherits attribute depends on the location of the web form, so the example above will not match your code exactly.

 

4. Now add the following code into the content area of the page (by default between the <div> tags inside the <form> element):

 

<ajaxToolkit:ToolkitScriptManager ID="manScript" runat="server" EnableViewState="false" />
<table>

  <tr>

      <td>

          <cms:UniSelector ID="UserSelector" runat="server" ObjectType="cms.user" SelectionMode="SingleDropDownList" ReturnColumnName="UserName" />

      </td>

  </tr>

  <tr>

      <td>

          <asp:Button runat="server" ID="OKButton" onclick="OKButton_Click" CssClass="SubmitButton" Text="OK" />

      </td>

  </tr>

  <tr>

      <td>

          <asp:Label runat="server" ID="lblButton" Visible="false" />

      </td>

  </tr>

</table>

 

This adds the UniSelector control, which is configured to allow the selection of user objects from a drop‑down list and to use the content of the UserName column in its value. For more information about the available properties of the control, please refer to the Configuration topic. The code also contains a Button and Label control, organized in a basic table layout, which will be used to demonstrate how a basic task can be performed with the value of the UniSelector.

 

The ToolkitScriptManager control is required by the UniSelector control. It is only there to ensure that the example is functional by itself and will usually be included on your website's master page, so you do not have to add it in real‑world scenarios.

 

5. Switch to the code behind of the User_UniSelector.aspx web form and add the following code into it. Please keep in mind that the name of the class will be different according to the location of your web form.

 

[C#]

 

using CMS.GlobalHelper;

 

public partial class UniSelectorExample_User_UniSelector : System.Web.UI.Page

{    

 

    /// <summary>

    /// Handles the Click event of the submit button.

    /// </summary>

    protected void OKButton_Click(object sender, EventArgs e)

    {

        //Assigns the value of the UniSelector control to be displayed by the Label 

        lblButton.Visible = true;

        lblButton.Text = ValidationHelper.GetString(UserSelector.Value, null);

    }

 

}

 

This code causes the user name of the selected user to be displayed when the button on the page is clicked. This code would also work if the UniSelector control used a SelectionMode that allowed the selection of multiple users, the user names would all be displayed separated by semicolons.

 

This example only serves as a demonstration and the selection has no permanent effect, however, any required functionality, such as changes in the database, can be implemented using the Kentico CMS API in a similar fashion. Another option is to use handlers of the UniSelector events listed in the Configuration topic.

 

6. Save the changes to both files. Now right-click the web form in the Solution explorer and select View in Browser. The resulting page should display a drop‑down list containing user names and an OK button like in the following image:

 

controls_clip0065

 

If you select a user and click the button, the user name of the user will be displayed below:

 

controls_clip0066