← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/datatable/datatable-formatting.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/datatable/datatable-formatting.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Formatting Row Data for Display</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Formatting Row Data for Display</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><style scoped>
23
 
/* custom styles for this example */
24
 
.example .yui3-datatable {
25
 
    margin-bottom: 1em;
26
 
}
27
 
 
28
 
/* css to counter global site css */
29
 
.example table {
30
 
    width: auto;
31
 
}
32
 
.example caption {
33
 
    display: table-caption;
34
 
}
35
 
.example th,
36
 
.example td {
37
 
    text-transform: none;
38
 
    border: 0 none;
39
 
}
40
 
</style>
41
 
 
42
 
<div class="intro">
43
 
    <p>Custom format row data for display with string templates or custom functions.</p>
44
 
</div>
45
 
 
46
 
<div class="example yui3-skin-sam">
47
 
    <div id="template" class="yui3-skin-sam dt-example"></div>
48
 
 
49
 
<div id="function" class="yui3-skin-sam dt-example"></div>
50
 
 
51
 
<div id="dates" class="yui3-skin-sam dt-example"></div>
52
 
 
53
 
<script type="text/javascript">
54
 
YUI().use("datatype-date", "datatable-base", function (Y) {
55
 
    var colsTemplate = ["id","name", {key:"price", formatter:"${value}"}],
56
 
    dataTemplate = [
57
 
        {id:"ga-3475", name:"gadget", price:6.99},
58
 
        {id:"sp-9980", name:"sprocket", price:3.75},
59
 
        {id:"wi-0650", name:"widget", price:4.25}
60
 
    ],
61
 
    dtTemplate = new Y.DataTable({columns:colsTemplate, data:dataTemplate,
62
 
        caption:"Data formatting with string template"}).render("#template"),
63
 
    calculate = function(o){
64
 
        return "$" + (o.data.price - o.data.cost).toFixed(2);
65
 
    },
66
 
    colsFunction = [
67
 
        "id",
68
 
        "name",
69
 
        { key: "profit", formatter: calculate }
70
 
    ],
71
 
    dataFunction = [
72
 
        {id:"ga-3475", name:"gadget", price:6.99, cost:4.99},
73
 
        {id:"sp-9980", name:"sprocket", price:3.75, cost:2.75},
74
 
        {id:"wi-0650", name:"widget", price:4.25, cost:3.25}
75
 
    ],
76
 
    dtFunction = new Y.DataTable({columns:colsFunction, data:dataFunction,
77
 
        caption:"Data formatting with custom function"}).render("#function"),
78
 
    formatDates = function(o){
79
 
        return o.value &&
80
 
            Y.DataType.Date.format(o.value, {format:"%m/%d/%Y"});
81
 
    },
82
 
    colsDates = [
83
 
        "id",
84
 
        "name",
85
 
        { key: "date", formatter: formatDates, emptyCellValue: "(unknown)" }
86
 
    ],
87
 
    dataDates = [
88
 
        {id:"ga-3475", name:"gadget", date:new Date(2006, 5, 1)},
89
 
        {id:"sp-9980", name:"sprocket", date:new Date(2004, 8, 16)},
90
 
        {id:"wi-0650", name:"widget"} // no date for this record
91
 
    ],
92
 
    dtDates = new Y.DataTable({
93
 
        columns: colsDates,
94
 
        data: dataDates,
95
 
        caption: "Data formatting with DataType.Date"
96
 
    }).render("#dates");
97
 
});
98
 
</script>
99
 
 
100
 
</div>
101
 
 
102
 
<h2>Formatting Row Data for Display</h2>
103
 
 
104
 
<p>Data can be stored in one format but be displayed in a different format. For instance, prices can be stored as numbers but be displayed as "$2.99", and birthdays can be stored as date objects but be displayed as "12/9/2009".
105
 
 
106
 
<p>Simple formatting can be defined with a string template on the column definition.</p>
107
 
 
108
 
<pre class="code prettyprint">YUI().use(&quot;datatable&quot;, function(Y) {
109
 
 
110
 
    var table = new Y.DataTable({
111
 
        columns: [ &quot;id&quot;, &quot;name&quot;, { key: &quot;price&quot;, formatter: &quot;${value}&quot; } ],
112
 
        data   : [
113
 
            { id: &quot;ga-3475&quot;, name: &quot;gadget&quot;,   price: 6.99 },
114
 
            { id: &quot;sp-9980&quot;, name: &quot;sprocket&quot;, price: 3.75 },
115
 
            { id: &quot;wi-0650&quot;, name: &quot;widget&quot;,   price: 4.25 }
116
 
        ],
117
 
        caption: &quot;Data formatting with string template&quot;
118
 
 
119
 
    }).render(&quot;#template&quot;);</pre>
120
 
 
121
 
 
122
 
<p>
123
 
    When a calculation is needed, define a custom function that generates
124
 
    markup for the data cell. The custom formatter function receives an object
125
 
    with the properties listed in <a href="index.html#formatter-props">Appendix
126
 
    B</a> in the DataTable user guide.
127
 
</p>
128
 
 
129
 
<pre class="code prettyprint">&#x2F;&#x2F; See the DataTable user guide for a list of properties on o.
130
 
function calculate(o) {
131
 
    return &quot;$&quot; + (o.data.price - o.data.cost).toFixed(2);
132
 
}
133
 
 
134
 
var table = new Y.DataTable({
135
 
    columns: [ &quot;id&quot;, &quot;name&quot;, { key: &quot;profit&quot;, formatter: calculate } ],
136
 
    data   : [
137
 
        { id: &quot;ga-3475&quot;, name: &quot;gadget&quot;,   price: 6.99, cost: 4.99 },
138
 
        { id: &quot;sp-9980&quot;, name: &quot;sprocket&quot;, price: 3.75, cost: 2.75 },
139
 
        { id: &quot;wi-0650&quot;, name: &quot;widget&quot;,   price: 4.25, cost: 3.25 }
140
 
    ],
141
 
    caption: &quot;Data formatting with custom function&quot;
142
 
}).render(&quot;#function&quot;);</pre>
143
 
 
144
 
 
145
 
<p>The DataType utility can be used to help format date objects.  This example
146
 
also uses the <code>emptyCellValue</code> column configuration to supply a custom cell
147
 
value in the case of missing data.</p>
148
 
 
149
 
<pre class="code prettyprint">YUI().use(&quot;datatype-date&quot;, &quot;datatable&quot;, function (Y) {
150
 
    function formatDates(o) {
151
 
        return o.value &amp;&amp;
152
 
            Y.DataType.Date.format(o.value, { format: &quot;%m&#x2F;%d&#x2F;%Y&quot; });
153
 
    }
154
 
 
155
 
    dt = new Y.DataTable({
156
 
        columns: [
157
 
            &quot;id&quot;,
158
 
            &quot;name&quot;,
159
 
            { key: &quot;date&quot;, formatter: formatDates, emptyCellValue: &quot;(unknown)&quot; }
160
 
        ],
161
 
        data   : [
162
 
            { id: &quot;ga-3475&quot;, name: &quot;gadget&quot;,   date: new Date(2006, 5, 1) },
163
 
            { id: &quot;sp-9980&quot;, name: &quot;sprocket&quot;, date: new Date(2004, 8, 16) },
164
 
            { id: &quot;wi-0650&quot;, name: &quot;widget&quot;} &#x2F;&#x2F; no date for this record
165
 
        ],
166
 
        caption: &quot;Data formatting with DataType.Date&quot;
167
 
    }).render(&quot;#dates&quot;);</pre>
168
 
 
169
 
</div>
170
 
            </div>
171
 
        </div>
172
 
 
173
 
        <div class="yui3-u-1-4">
174
 
            <div class="sidebar">
175
 
                
176
 
 
177
 
                
178
 
                    <div class="sidebox">
179
 
                        <div class="hd">
180
 
                            <h2 class="no-toc">Examples</h2>
181
 
                        </div>
182
 
 
183
 
                        <div class="bd">
184
 
                            <ul class="examples">
185
 
                                
186
 
                                    
187
 
                                        <li data-description="This example illustrates simple DataTable use cases.">
188
 
                                            <a href="datatable-basic.html">Basic DataTable</a>
189
 
                                        </li>
190
 
                                    
191
 
                                
192
 
                                    
193
 
                                        <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
194
 
                                            <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
195
 
                                        </li>
196
 
                                    
197
 
                                
198
 
                                    
199
 
                                        <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
200
 
                                            <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
201
 
                                        </li>
202
 
                                    
203
 
                                
204
 
                                    
205
 
                                        <li data-description="Custom format data for display.">
206
 
                                            <a href="datatable-formatting.html">Formatting Row Data for Display</a>
207
 
                                        </li>
208
 
                                    
209
 
                                
210
 
                                    
211
 
                                        <li data-description="DataTable with nested column headers.">
212
 
                                            <a href="datatable-nestedcols.html">Nested Column Headers</a>
213
 
                                        </li>
214
 
                                    
215
 
                                
216
 
                                    
217
 
                                        <li data-description="DataTable with column sorting.">
218
 
                                            <a href="datatable-sort.html">Column Sorting</a>
219
 
                                        </li>
220
 
                                    
221
 
                                
222
 
                                    
223
 
                                        <li data-description="DataTable with vertical and/or horizontal scrolling rows.">
224
 
                                            <a href="datatable-scroll.html">Scrolling DataTable</a>
225
 
                                        </li>
226
 
                                    
227
 
                                
228
 
                                    
229
 
                                        <li data-description="Using DataTable&#x27;s recordType attribute to create calculated, sortable columns.">
230
 
                                            <a href="datatable-recordtype.html">Sortable generated columns</a>
231
 
                                        </li>
232
 
                                    
233
 
                                
234
 
                                    
235
 
                                
236
 
                            </ul>
237
 
                        </div>
238
 
                    </div>
239
 
                
240
 
 
241
 
                
242
 
                    <div class="sidebox">
243
 
                        <div class="hd">
244
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
245
 
                        </div>
246
 
 
247
 
                        <div class="bd">
248
 
                            <ul class="examples">
249
 
                                
250
 
                                    
251
 
                                
252
 
                                    
253
 
                                
254
 
                                    
255
 
                                
256
 
                                    
257
 
                                
258
 
                                    
259
 
                                
260
 
                                    
261
 
                                
262
 
                                    
263
 
                                
264
 
                                    
265
 
                                
266
 
                                    
267
 
                                        <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
268
 
                                            <a href="../panel/panel-form.html">Creating a Modal Form</a>
269
 
                                        </li>
270
 
                                    
271
 
                                
272
 
                            </ul>
273
 
                        </div>
274
 
                    </div>
275
 
                
276
 
            </div>
277
 
        </div>
278
 
    </div>
279
 
</div>
280
 
 
281
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
282
 
<script>prettyPrint();</script>
283
 
 
284
 
</body>
285
 
</html>