GridView > Table > Element

Gridview allows the presentation of larges sets of data in a table that is virtualized and set to display a limited set of data at one time. Out of the box, GridViews allow sorting and virtualizing. GridView allows for specialized styling of columns and specialized display for data. The data can easily be populated with a single function call. The GridView allows for full column styling in a similar manner as the AwesomeForm, as shown below.

<table class="gridview">
    <colgroup>
        <col align="right" style="font-weight: bold" class="field" />
        <col align="left" />
    </colgroup>
</table>

Requires

Awesome
AwesomeControls

DeclarativeAttributes

ascsortclass Default: "" The class to set a column header to when it’s sorted ascending.
descsortclass Default: "" The class to set a column header to when it’s sorted descending.
display Default: "10" The number of rows to display at a time.
multiple Default: "false" Setting this to true will allow multiple selections.
selectable Default: "true" Sets whether click on a row will "select" it, changing it’s styling and the SelectedData property.
selectclass Default: "selected" The class to set a row to when it’s selected.
sortable Default: "true" Sets whether the gridview can be sorted by clicking on a column header.
sortclass Default: "sorted" The class to set a column header to when it’s sorted ascending or descending.

Column Styling Attributes

AwesomeGridView makes use of the <colgroup> and <col> tags inside of a <table> tag. Any styling that’s applied to a <col> tag will be applied to the column in sequential order. Below are the attributes you can use to set for specific columns of a table.

align Default: "" The horizontal alignment of the column.
valign Default: "" The vertical alignment of the column.
style Default: "" The style to apply to the column.
class Default: "" The class to apply to the column.

Column Header Attributes & Binding

Colum headers are defined as <th> tags found in the <thead> of the table using the GridView. These represent headings and control what data is displayed and how it’s displayed. You can control this by using the following attributes.

columntype Default: "data" Controls how the data value is handled. See below for more details.
property   The property of the data to pull the value from. Any AwesomeBinding expression is valid.
sortable Default: "true" Determines if the column can be sorted on. If the GridView’s sortable is set to false, this is ignored.
width Default: "*" Sets the width of the column. See below for more details.

ColumnType

There are several predefined columntypes that can be used to determine how a column’s value is derived. The default is simply “data” and pulls the data directly. Below are the other options.

image Used when an image is to be displayed instead of an raw value.
link Used to create a link out of a raw value.
action Used to create an inline link that calls a function whenever it’s clicked providing the raw value.
imageaction A combination of the image and action column types.

 

ColumnType: "image"

The image columntype will take the value of a piece of data determined by the "property" attribute of the column header and derive its image from a global map. When using the columntype "image", you must set the "map" attribute to the name of a globally available variable that’s a Dictionary or any key/value has object. The value derived from this map is used to display the image as a result. Below is an example:

var warnLevelMap = new Dictionary();
warnLevelMap["0"] = "/images/icons/low.png";
warnLevelMap["1"] = "/images/icons/medium.png";
warnLevelMap["2"] = "/images/icons/high.png";

<table class="gridview">
    <thead>
        <th property="Warning" columntype="image" map="warnLevelMap">!</th>
    </thead>
</table>

This will display one of the images instead of the raw value for the "Warning" property of the data provided. Any piece of data that doesn’t return a value will cause the image to not display at all.

ColumnType: "action"

The action columntype will take the value of a piece of data and call a provided function, passing in the value of the property provided in the property attribute. If using the "action" columntype, you must set the attribute "function" to the name of a globally available function. This function will be called, passing piece of data associated with the row as the only parameter. The "property" attribute will determine what is displayed in the column. Below is an example:

function deleteItem(data){
    var ajax = new AjaxRequest("/delete.aspx");
    ajax.Parameters["id"] = data.ID;
    if(ajax.Send(true).ResponseObject){
        $GridView("items").Data.Remove(data);
    }
}

<table class="gridview" id="items">
    <thead>
        <th property="Delete'" columntype="action" function="deleteItem">&nbsp;</th>
    </thead>
</table>

 

ColumnType: "imageaction"

This columntype is a combination of the image and action types where a function is called and an image map is used to display an image. Both the "map" and "function" properties must be set with this type.

Column Sizing

The sizing of the columns is determined using a specialized syntax. By default, all columns are set to take up an equal amount of width and will grow/shrink with the size change of the table (if it’s a percentage).

  • Static sizing – Entering in a numeric value sets the column to a static size in pixels.
  • Relative sizing – Entering in a percent value sets the column to take up a percentage of what’s available after static columns have been set. For example, the table’s width is 400 pixels, two columns are set to 100 pixels and another column is set to 25%. 400 – 200 = 200. The 25% column will get 50 pixels since it’s 25% of the 200 pixels remaining.
  • Liquid sizing – All columns with a "*" value will have liquid sizing. This causes the remaining amount of available space to be divided up evenly amongst the columns.

Last edited Mar 27, 2012 at 9:12 PM by dahrkdaiz, version 2

Comments

No comments yet.