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:
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"><span style='color:green'>
Enabled</span></Case>
<Case Value="Deleted"><span style='color:red'>
Disabled</span></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
.
interface IDynamicPage : IDynamicComponent
{
void OnGridRowControlsBind(GridRowControlBindEventArgs e);
}
class GridRowControlBindEventArgs : EventArgs
{
object DataItem { get; private set; }
bool ShowCheckBoxColumn { get; set; }
bool ShowViewButton { get; set; }
bool ShowEditButton { get; set; }
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.
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">
<span style="color:green">Enabled</span></Case>
<Case Value="Disabled" CaseSensitive="true">
<span style="color:red">Disabled</span></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
RapidWebDev is an infrastructure that helps engineers to develop enterprise software solutions in Microsoft .NET easily and productively. It consists of an extendable and maintainable web system architecture with a suite of generic business model, APIs and services as fundamental functionalities needed in development for almost all business solutions. So when engineers develop solutions in RapidWebDev, they can have a lot of reusable and ready things then they can focus more on business logics implementation. In practice, we can save more than 50% time on developing a high quality and performance business solution than direct ASP.NET coding.