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>

   <!--End-->

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

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

   <script type="text/javascript" src="../../lib/reactdatagrid.js"></script>

   <!--End-->

   <!--css imports-->

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

   <!--End-->

   <script>

       

       class Example extends React.Component {

         constructor() {

           this.state = {

             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 }

             ]

           }


           this.onSelectAll = (evt) => {

             var grid = evt.target;

             var selectedItems = grid.getSelectedObjects();

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

           }


           this.onItemClick = (evt) => {

               var grid = evt.target;

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

           }


           this.getCellBackground = (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.

           }

         }

           

         render() {

           return (

             <ReactDataGrid dataProvider={this.state.dataProvider}  itemClick={this.onItemClick} change={this.onSelectAll}

              cellBackgroundColorFunction={this.getCellBackground} enablePrint enablePreferencePersistence enableExport

              forcePagerRow pageSize={"50"} enableFilters enableFooters enablePaging >

               <ReactDataGridColumLevel>

                 <ReactDataGridColumn type={"checkbox"} />

                 <ReactDataGridColumn dataField={"id"} headerText={"ID"} filterControl={"DynamicFilterControl"}

                  footerLabel={"Sum: "} footerOperation={"sum"} footerOperationPrecision={"2"} />

                 <ReactDataGridColumn dataField={"type"} headerText={"Type"} filterControl={"TextInput"} footerOperation={"sum"} />

               </ReactDataGridColumLevel>

             </ReactDataGrid>

           );

         }

       }



       ReactDOM.render (

           <Example />,

           document.getElementById('app')

       );

   </script>

</head>

<body>

 <div id="app"></div>

</body>

</html>




When you run this, you should see: