Configuration Options - Footers
In the previous section, we saw how to enable a basic set of filters. In this section, we will look into another nice feature, the footers.
Footers by default are drawn below the grid. You can customize this, by using the displayOrder property. In this section, we will add footer to the grid we built. All you have to do, is to specify a footerOperation. First, let’s look at the markup required to enable simple footerOperation for the grid:
All you have to do is to add the text in red to the markup from above:
configuration
' <columns>' +
' <column dataField="id" headerText="ID" filterControl="TextInput" filterOperation="Contains" footerOperation="sum"/>' +
' <column dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" footerOperation="count"/>' +
' </columns>'
Once you do this, you should see the following UI:
Notice the footers are automatically created and shown for you. The footer operation by default can be one of a number of built in operations. From the documentation at:
http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGridColumn.html#property_footerOperation
The operation to apply to the footer. One of the following values:
You can specify custom footer labels as well. For example, modifying the markup a little bit gives us this:
And here is the markup we used:
' <columns>' +
' <column dataField="id" headerText="ID" filterControl="TextInput" filterOperation="Contains" footerLabel="Sum: " footerOperation="sum" footerOperationPrecision="2"/>' +
' <column dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" footerLabel="Sum: " footerOperation="count" footerOperationPrecision="3"/>' +
' </columns>' +
Finally, it is possible to provide your own footerLabelFunction as well.
First, just add the custom label function as below:
var myCompanyNameSpace = {};
myCompanyNameSpace.customFooterFunction = function () {
var html = "<div> Look Mommy, custom footer!</div>";
return html;
};
Then, reference it in the markup as below:
' <column dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" footerLabelFunction="myCompanyNameSpace.customFooterFunction"/>' +
You should see:
Here, we covered an important concept - passing functions into configurations. The same concept is used to add event listeners, provide custom renderers, etc, as we will see in future examples. We basically expose a namespaced function, and pass it into the configuration so it can be navigated to. The grid then keeps a pointer to it and uses it for generating custom HTML for the footer. Same concept is used in labelFunction with the regular cells, as we will see in future examples.
For those of you who want the source for the complete running example above, here it is, in all its glory!
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Simple</title>
<!--These are jquery and plugins that we use from jquery-->
<script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.maskedinput-1.3.js"></script>
<script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.watermarkinput.js"></script>
<script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.ui.menu.js"></script>
<script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.toaster.js"></script>
<!--End-->
<!--These are specific to htmltreegrid-->
<script type="text/javascript" src="http://htmltreegrid.com/demo/minified-compiled-jquery.js"></script>
<script type="text/javascript" src="http://htmltreegrid.com/demo/examples/js/Configuration.js"></script>
<script type="text/javascript" src="http://htmltreegrid.com/demo/themes.js"></script>
<!--End-->
<!--css imports-->
<link rel="stylesheet" href="http://htmltreegrid.com/demo/flexicious/css/flexicious.css" type="text/css"/>
<link rel="stylesheet" href="http://htmltreegrid.com/demo/external/css/adapter/jquery/jquery-ui-1.9.1.custom.min.css" type="text/css"/>
<!--End-->
<script type="text/javascript">
var myCompanyNameSpace = {};
myCompanyNameSpace.customFooterFunction = function () {
var html = "<div> Look Mommy, custom footer!</div>";
return html;
};
$(document).ready(function(){
var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),
{
configuration: '<grid id="grid" enablePrint="true" enablePreferencePersistence="true" enableExport="true" forcePagerRow="true" pageSize="50" enableFilters="true" enableFooters="true" >' +
' <level>' +
' <columns>' +
' <column dataField="id" headerText="ID" filterControl="TextInput" filterOperation="Contains" footerLabel="Sum: " footerOperation="sum" footerOperationPrecision="2"/>' +
' <column dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" footerLabelFunction="myCompanyNameSpace.customFooterFunction"/>' +
' </columns>' +
' </level>' +
' ' +
' </grid>',
dataProvider: [
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
});
});
</script>
</head>
<body>
<div id="gridContainer" style="height: 400px;width: 100%;">
</div>
</body>
</html>