ReferenceGrid Field Control

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.0
  • Enterprise
  • Community
  • Planned

Overview

The Reference Grid is a Field Control that handles Reference Fields and provides an easy-to-use interface to manage references. The references are shown in a simple grid.

Reference Grid

Details

Adding new references can be done by clicking the Add... button (this brings up the Content Picker). Removing references can be done by clicking the red X button next to the content to be removed or by clicking the Clear button clearing all references.

The Reference Grid uses the Content Picker for adding new references. The Content Picker is a customizable popup dialog and have several input parameters (see Initializing Content Picker). The following Content Picker parameters are used by the Reference Grid:

  • TreeRoots: the allowed path roots in Content Picker's tree are by default defined in the Reference Field configuration (SelectionRoot element)
  • DefaultPath: the default path in Content Picker's tree is the path of the edited content
  • MultiSelectMode: whether the user can select single or multiple contents in Content Picker is determined by AllowMultiple element in the Reference Field configuration
  • AllowedContentTypes: the allowed content types in the Content Picker are defined by the AllowedTypes element in the Reference Field configuration
  • DefaultContentTypes: the default visible content types in the Content Picker is not set by default - all allowed content types are visible


Supported Field types


Properties

  • TreeRoots (optional): overrides the SelectionRoot configuration element of the underlying Reference Field configuration and sets TreeRoots parameter (allowed path roots) of the Content Picker
  • DefaultPath (optional): sets the DefaultPath parameter of the Content Picker
  • DefaultContentTypes (optional): sets the DefaultContentTypes parameter of the Content Picker

For a complete list of common Field Control properties see common Field Control properties.

Example:

   <sn:ReferenceGrid ID="ReferenceGrid1" runat="server" FieldName="Members" 
      TreeRoots="/Root/YourContents,/Root/IMS" DefaultPath="/Root/IMS/SNPE" DefaultContentTypes="User,Group"/>

Templates

The Reference Grid is a composite Field Control that consists of 5 different controls:

  • a hidden textbox control containing paths of references in a semicolon-separated list (the contents of this textbox is handled by a javascript)
  • a table control that is the base of the grid (grid is built over the table by a javascript)
  • an add button control initializing the Content Picker for adding new references
  • a change button control initializing the Content Picker for changing existing reference in single reference mode
  • a clear button control clearing the grid

You have to define the above controls using templates. Please note that additional javascripts are generated by the control itself, there is no need to define any extra javascripts when defining templates.

Browse view template

<%@  Language="C#" %>
<asp:TextBox ID="HiddenTextBoxControl" runat="server" TextMode="MultiLine" style="display: none;" Columns="20" Rows="2"/>
<asp:Table ID="TableControl" runat="server"></asp:Table>
<asp:Button ID="AddButtonControl" runat="server" Text="Add..." Visible="false" />
<asp:Button ID="ChangeButtonControl" runat="server" Text="Change..." Visible="false" />
<asp:Button ID="ClearButtonControl" runat="server" Text="Clear" Visible="false" />

Edit view template

<%@  Language="C#" %>
<asp:TextBox ID="HiddenTextBoxControl" runat="server" TextMode="MultiLine" style="display: none;" Columns="20" Rows="2"/>
<asp:Table ID="TableControl" runat="server"></asp:Table>
<asp:Button ID="AddButtonControl" runat="server" Text="Add..." />
<asp:Button ID="ChangeButtonControl" runat="server" Text="Change..." />
<asp:Button ID="ClearButtonControl" runat="server" Text="Clear" />

Example/Tutorials

Simple example

   <sn:ReferenceGrid ID="ReferenceGrid1" runat="server" FieldName="Members" />

Templated example

   <sn:ReferenceGrid ID="ReferenceGrid1" FieldName="Members" runat="server">
      <EditTemplate>
         <asp:TextBox ID="HiddenTextBoxControl" runat="server" />
         <asp:Table ID="TableControl" runat="server" />
         <asp:Button ID="AddButtonControl" Text="Add" runat="server" />
         <asp:Button ID="ChangeButtonControl" runat="server" Text="Change..." />
         <asp:Button ID="ClearButtonControl" Text="Clear" runat="server" />
      </EditTemplate>
   </sn:ReferenceGrid>

The buttons' onclick method can be overridden - you may initialize the Content Picker in a fully customized way:

   ...
   <asp:Button ID="AddButtonControl" Text="Add" runat="server" 
      OnClientClick="SN.PickerApplication.open({MultiSelectMode: 'none', callBack: function(resultData) { if (!resultData) return; 
         alert('Selection finished!'); }}); return false;"/>
   ...


Related links

References