An Innovative Architecture to Develop Business Web Forms (3) - Configure GridView

Introduction

This is the third article in the series to introduce an innovative architecture to develop web forms in enterprise software which is high performance, productivity, configurability and maintainability than writing ASPX/MVC code directly. The article introduces how to configure gridview for search results in a web form. Before going forward, we strongly suggest you to take a look at the articles in the series before as the following catalog:

• RapidWebDev UI - Comparison With direct ASP.NET and MVC coding
• RapidWebDev UI - Overview
• RapidWebDev UI - Configure Query Filters

In the last article on introducing "query", we have known a QueryResult returned from an IDynamicPage instance will be bound to GridView automatically by the RapidWebDev UI framework. This article introduces the schema of GridView configuration. Let's have a look at a fragment as below:

<GridViewPanel HeaderText="Concrete Data Query Results"
    EntityName="Concrete Data Record"
    EnabledCheckBoxField="true"
    PageSize="25"
    PrimaryKeyFieldName="Id"
    DefaultSortField="LastUpdatedDate"
    DefaultSortDirection="DESC">
    <ViewButton />
    <EditButton />
    <DeleteButton />
    <Fields>
        <Field FieldName="Name" HeaderText="Name" />
        <Field FieldName="Value" HeaderText="Value" />
        <Field FieldName="DeleteStatus" HeaderText="Status" Width="60">
            <Transform-Switch>
                <Case Value="NotDeleted">&lt;span style='color:green'&gt;
			Enabled&lt;/span&gt;</Case>
                <Case Value="Deleted">&lt;span style='color:red'&gt;
			Disabled&lt;/span&gt;</Case>
            </Transform-Switch>
        </Field>
        <Field FieldName="LastUpdatedBy" HeaderText="ModifiedBy" Align="Center">
            <Transform-Callback Type="XXX"/>
        </Field>
        <Field FieldName="LastUpdatedDate" HeaderText="ModifiedOn" 
			Align="Center" Width="150" />
        <RowView FieldName="Description" />
    </Fields>
</GridViewPanel>

Attributes

• HeaderText: GridView section header text.
• EntityName: The entity name displaying in gridview, seeing in the following screenshot.
• PrimaryKeyFieldName: The primary key field of the binding entity. The gridview only supports single unique key.
• PageSize: Page size of grid view. The default value is 25.
• EnabledCheckBoxField: Whether to render a checkbox column into each row of gridview.
• ExecuteQueryWhenLoaded: Whether to execute query when the web page is loaded.
• EnabledColumnMove: Whether to allow drag and drop to reorder the columns.
• EnabledColumnResize: Whether to turn off column resizing of the grid.
• DefaultSortField: The default sort field name which should be configured in inner Field element.
• DefaultSortDirection: The candidate values are ASC | DESC.

* Tips: HeaderText and EntityName support manifest variables in the format as $VariableName$ which VariableName should be put into IApplicationContext.TempVariables as a key in code behind. And it also supports globalization identifier as "$Namespace.ClassName.PropertyName, AssemblyName$" whatever the static property is internal, protected or private.

Row View, Edit and Delete Button

• ViewButton: Display view button in each row if ViewButton element is configured. The button can be configured as an Image or button.
• EditButton: Display edit button in each row if EditButton element is configured. The button can be configured as an Image or button.
• DeleteButton: Display delete button in each row if DeleteButton element is configured. The button can be configured as an Image or button.

Alternatively, when you configured ViewButton, EditButton and DeleteButton in XML, you can also control the visibility of them for each row by data in code behind. See the internal IDynamicPage.

/// <summary>
/// The interface restraints the dynamic page. 
/// </summary>
interface IDynamicPage : IDynamicComponent
{
    /// <summary>
    /// The method will be invoked when the data item binding to grid rows.
    /// </summary>
    /// <param name="e"></param>
    void OnGridRowControlsBind(GridRowControlBindEventArgs e);
}

/// <summary>
/// Event argument to manage visibility of controls in gridview rows of dynamic page.
/// </summary>
class GridRowControlBindEventArgs : EventArgs
{
    /// <summary>
    /// Gets binding data item which used for callback to set control visibility by data.
    /// </summary>
    object DataItem { get; private set; }

    /// <summary>
    /// Sets/gets true to display checkbox column. Default value is true.
    /// </summary>
    bool ShowCheckBoxColumn { get; set; }

    /// <summary>
    /// Sets/gets true to display view button in buttons column. Default value is true.
    /// </summary>
    bool ShowViewButton { get; set; }

    /// <summary>
    /// Sets/gets true to display edit button in buttons column. Default value is true.
    /// </summary>
    bool ShowEditButton { get; set; }

    /// <summary>
    /// Sets/gets true to display delete button in buttons column. Default value is true.
    /// </summary>
    bool ShowDeleteButton { get; set; }
}

GridView Fields

You can configure a common Field or RowView inner of Fields.

Field Schema

<Attributes>

• FieldName: The binding field of entities. It can be any property accessor alternatively, like Category.Name, "DicionaryKey", Properties "Name", etc.
• HeaderText: The column header text.
• SortingFieldName: The sorting field name. If no value has been specified, it uses FieldName for sorting by default. The explicit sorting field is used for the requirement that sorts by a field different to display.
• Sortable: Whether the column is sortable
• Resizable: Whether the column is resizable
• Css: custom CSS for all cells in the column
• Width: The initial width in pixels of the column, defaults to auto.
• Align: Text alignment inner of the column
• Hidden: Whether to hide the column initially. Users can show the hidden columns on client.

HeaderText supports manifest variables in the format as $VariableName$ which VariableName should be put into IApplicationContext.TempVariables as a key in code behind. And it also supports globalization identifier as "$Namespace.ClassName.PropertyName, AssemblyName$" whatever the static property is internal, protected or private.

<Transform>

You can configure data transform to a field for converting the value of source entity for display. There are 4 transformers supported in RapidWebDev v1.51.

• Transform-ToString-Parameter: Configure a format parameter to convert the field value to string. E.g, DateTime.Now.ToString(string format)
• Transform-VariableString: Configure custom output integrated with runtime data. Take an example, you're required to display a link like <a href="/article.aspx?id=XXX">Text</a>. You can configure the element value as <a href="/article.aspx?id=$Id$">$Text$</a>. $Marker$ can be replaced by the framework before rendering it into UI. Marker should be an accessible property of the binding entity, a variable in IApplicationContext.TempVariables or globalization variable marker.
• Transform-Callback: Use callback implementation of interface IGridViewFieldValueTransformCallback to process field value at runtime.

  /// <summary>
  /// Format input field value.
  /// </summary>
  /// <param name="fieldName"></param>
  /// <param name="fieldValue"></param>
  /// <returns></returns>
  string Format(string fieldName, object fieldValue);

• Transform-Switch: like a switch...case... syntax in C# language. If field value matches a Case, the inner text fragment is rendered. If no Case matched, the field value is output directly. The following XML fragment intends to wrap HTML tags around field value.

  <Transform-Switch>
      <Case Value="Enabled" CaseSensitive="true">
  	&lt;span style="color:green"&gt;Enabled&lt;/span&gt;</Case>
      <Case Value="Disabled" CaseSensitive="true">
  	&lt;span style="color:red"&gt;Disabled&lt;/span&gt;</Case>
  </Transform-Switch>

Row View

Row view is used to render any content related to the entity, even custom HTML fragment. When you're developing in .NET 3.5 SP1, you can return anonymous objects from Query method of IDynamicPage implementation that the anonymous object has a property with assembling custom content for the row view.

• FieldName: The field displayed in row view of grid.
• Css: Apply custom CSS classes to row view during rendering.
• TagName: The HTML tag wraps the field value. The default tag name is "p".

What's RapidWebDev

Official Website: http://www.rapidwebdev.org