Kentico中UniGrid的使用

https://docs.xperience.io/k12sp/custom-development/ui-controls/unigrid

Getting started

The following is a step-by-step tutorial that shows how to display a table containing all users from the Kentico database using the UniGrid control, and implement a custom action button:

1. Create a Web form named User_UniGrid.aspx in your web project (the code in the example assumes that you add the file into a subfolder named UniGridExample).

2. Add the following directives to the beginning of the web form's markup to register the UniGrid control:

   <%@ Register src="~/CMSAdminControls/UI/UniGrid/UniGrid.ascx" tagname="UniGrid" tagprefix="cms" %>
   <%@ Register Namespace="CMS.UIControls.UniGridConfig" TagPrefix="ug" Assembly="CMS.UIControls" %>

3. Add the following code into the content area of the page (inside the <form> element):

   <div class="cms-bootstrap">
   
       <asp:ScriptManager ID="manScript" runat="server" ScriptMode="Release" EnableViewState="false" />
       <asp:Label runat="server" ID="lblInfo" EnableViewState="false" Visible="false" />
   
       <cms:UniGrid ID="UserGrid" runat="server" />
   
   </div>

   This adds the following controls:

   • The ScriptManager control is required by the UniGrid control. The sample code manually adds the script manager to be functional as a standalone example. The ScriptManager is typically included on your website's master page, so you do not need to add it in real-world scenarios.
   • A standard Label that will be used to display information messages. The label is not necessary for the functioning of the UniGrid, but can be very convenient, for example to display error messages.
   • The UniGrid control itself (without any configuration for now).

   The cms-bootstrap class is required if you wish to use the default UniGrid styles (including font icons).

1. Extend the definition of the UniGrid control according to the markup below:

   <cms:UniGrid ID="UserGrid" runat="server" ObjectType="cms.user" Columns="UserID, UserName" OrderBy="UserName">
   
       <GridActions>
           <ug:Action Name="view" Caption="$General.View$" FontIconClass="icon-eye" FontIconStyle="allow" />
       </GridActions>
   
       <GridColumns>
           <ug:Column Source="UserName" Caption="$general.username$" Width="100%" />
       </GridColumns>
   
   </cms:UniGrid>

   The basic configuration example above defines a single action (view) and one column containing user names. The control retrieves the data from user objects, which is achieved by setting the ObjectType property to cms.user.

   For more details and a full account of the configuration options you can specify for the UniGrid, see:

   • Configuration
   • Reference - UniGrid definition

2. Switch to the web form's code behind (User_UniGrid.aspx.cs) and add the following code:

   Note: Adjust the name of the class according to the location of your web form.

   using System;
   
   using CMS.Helpers;
   using CMS.Membership;
   using CMS.Base.Web.UI;
   
   public partial class UniGridExample_User_UniGrid : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {
           // Registers the default CSS and JavaScript files onto the page (used to style the UniGrid)
           CssRegistration.RegisterBootstrap(Page);
           ScriptHelper.RegisterBootstrapScripts(Page);
   
           // Assigns a handler for the OnAction event
           UserGrid.OnAction += userGrid_OnAction;
       }
   
       /// <summary>
       // Handles the UniGrid's OnAction event.
       /// </summary>
       protected void userGrid_OnAction(string actionName, object actionArgument)
       {
           // Implements the logic of the view action
           if (actionName == "view")
           {
               // Stores the values of the actionArgument argument (UserID)
               int userId = ValidationHelper.GetInteger(actionArgument, 0);
   
               // Gets a UserInfo object representing the user with the given ID
               UserInfo ui = UserInfoProvider.GetUserInfo(userId);
   
               // If the user exists
               if (ui != null)
               {
                   // Sets the information label to display the full name of the viewed user
                   lblInfo.Visible = true;
                   lblInfo.Text = "Viewed user: " + HTMLHelper.HTMLEncode(ui.FullName);
               }
           }
       }
   }

   This code demonstrates how to implement the logic of a UniGrid action. OnAction event handlers have the following parameters:

   • string actionName – identifies which action raised the event. This example only has one action, but the UniGrid control often contains more in real scenarios. The name passed into the parameter is set through the UniGrid's definition in the Name attribute of individual Action elements.
   • object actionArgument – passes the value of a data source column from the UniGrid row for which the action was used. The column can be specified through the configuration in the commandargument attribute of individual Action elements, otherwise the first column in the data source is used by default.

   This example only displays the full name of the viewed user in the label above the UniGrid when the view button is clicked. You can implement any required action in a similar fashion.

3. Save the web form and its code behind file.
4. Right-click the web form in the Solution explorer and select View in Browser.

The resulting page displays a table containing user names and view action buttons. If you click the view action, the full name of the user on the given row appears above the grid.

 

需要配合以下代码，以及<div class="cms-bootstrap">

  CssRegistration.RegisterBootstrap(Page);
        ScriptHelper.RegisterBootstrapScripts(Page);

 

作者:Chuck Lu    GitHub