Function Callbacks

Parent Previous Next

In addition to events, there are a number of API variables that are of type Function. This basically means that you can provide a function that executes your own logic. These differ from events primarily in the fact that the grid is asking something of you instead of just notifying you that something happened. For example, there is a function callback, cellBackgroundColorFunction that will pass you a cell, and expect a return value of a color, that you can then use to execute custom logic to provide the background color for the cells. Let’s take a quick look at an example:


<!doctype html>

<html lang="en" >

<head>

   <meta charset="utf-8">

   <title>Simple</title>

   <!--These are jquery and plugins that we use from jquery-->

   <script type="text/javascript" src="http://www.htmltreegrid.com/demo/external/js/adapters/jquery/jquery-1.8.2.js"></script>

   <script type="text/javascript" src="http://www.htmltreegrid.com/demo/external/js/adapters/jquery/jquery-ui-1.9.1.custom.min.js"></script>

   <script type="text/javascript" src="http://www.htmltreegrid.com/demo/external/js/adapters/jquery/jquery.maskedinput-1.3.js"></script>

   <script type="text/javascript" src="http://www.htmltreegrid.com/demo/external/js/adapters/jquery/jquery.watermarkinput.js"></script>

   <script type="text/javascript" src="http://www.htmltreegrid.com/demo/external/js/adapters/jquery/jquery.ui.menu.js"></script>

   <script type="text/javascript" src="http://www.htmltreegrid.com/demo/external/js/adapters/jquery/jquery.toaster.js"></script>

   <!--End-->

   <!--These are specific to htmltreegrid-->

   <script type="text/javascript" src="http://www.htmltreegrid.com/demo/minified-compiled-jquery.js"></script>

   <script type="text/javascript" src="http://www.htmltreegrid.com/demo/examples/js/Configuration.js"></script>

   <script type="text/javascript" src="http://www.htmltreegrid.com/demo/themes.js"></script>

   <!--End-->

   <!--css imports-->

   <link rel="stylesheet" href="http://www.htmltreegrid.com/demo/flexicious/css/flexicious.css"

       type="text/css" />

   <link rel="stylesheet" href="http://www.htmltreegrid.com/demo/external/css/adapter/jquery/jquery-ui-1.9.1.custom.min.css"

       type="text/css" />

   <!--End-->

   <script type="text/javascript">


       $(document).ready(function () {

           myCompanyNameSpace.onSelectAll = function (evt) {

               var grid = evt.target;

               var selectedItems = grid.getSelectedObjects();

               alert("selected objects: " + flexiciousNmsp.UIUtils.extractPropertyValues(selectedItems, "id"));

           }

           myCompanyNameSpace.onItemClick = function (evt) {

               var grid = evt.target;

               alert('You clicked on ' + evt.item.id);

           }

           myCompanyNameSpace.getCellBackground = function (cell) {

               if (!cell.getRowInfo().getIsDataRow()) {

                   return null;

               }

               if (cell.getColumn().getDataField() == "type") {

                   return 0x0000ff;

               } else if (cell.getRowInfo().getData().type == "Glazed") {

                   return 0x00ff00;

               }

               return null; //this makes the grid use whatever color it would have by default.

           }

           var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),

                   {


                       configuration: '<grid id="grid" itemClick="myCompanyNameSpace.onItemClick" change="myCompanyNameSpace.onSelectAll" cellBackgroundColorFunction="myCompanyNameSpace.getCellBackground" enablePrint="true" enablePreferencePersistence="true" enableExport="true" forcePagerRow="true" pageSize="50" enableFilters="true" enableFooters="true" enablePaging="true">' +

                                   '                        <level>' +

                                   '                                <columns>' +

                                   '                   <column type="checkbox"/>' +

                                   '                                        <column dataField="id" headerText="ID" filterControl="TextInput" filterOperation="Contains" footerLabel="Sum: " footerOperation="sum" footerOperationPrecision="2"/>' +

                                   '                                        <column dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" />' +

                                   '                                </columns>' +

                                   '                        </level>' +

                                   '                ' +

                                   '        </grid>',

                       dataProvider: [

                                                       { "id": "5001", "type": "None", "active": true },

                                                       { "id": "5002", "type": "Glazed", "active": true },

                                                       { "id": "5005", "type": "Sugar", "active": true },

                                                       { "id": "5007", "type": "Powdered Sugar", "active": false },

                                                       { "id": "5006", "type": "Chocolate with Sprinkles", "active": true },

                                                       { "id": "5003", "type": "Chocolate", "active": false },

                                                       { "id": "5004", "type": "Maple", "active": true }

                                               ]

                   });


       });




   </script>

</head>

<body>

   <div id="gridContainer" style="height: 400px; width: 100%;">

   </div>

</body>

</html>


When you run this, you should see: