Basic Configuration Options

Parent Previous Next

In the previous topic, you saw how to create a simple grid from data. The one thing you may have asked, where did the columns come from? How do you specify additional columns? How to customize the cells, enable various options, etc.? In this section, we will cover some of the basis of the massive customization options. For a full list of available options, please refer: http://www.reactdatagrid.com/docs/class/js/flexgrid/grids/FlexDataGridColumn.js~FlexDataGridColumn.html (Please note, this link is still a work in progress, and will be refined over time).


In most line of business applications, you usually define columns, header text, data field, formatting, and other options for the grid. Let us take the above example and add some configuration information to it.


The first thing we will do is to enable the toolbar and the plethora of features that the grid ships with. We will also add custom defined columns, and set some options on them. In the previous example, since we had not defined any configuration information, the grid performed introspection on the data provider that we gave it, and then auto generated the columns. To specify configuration, we will simply add the configuration parameter when we initialize the grid. Below is the configuration we will provide and to run the code please go here.

                       

   <ReactDataGrid dataProvider={donuts} enablePrint={true} enablePreferencePersistence={true}

       enableExport={true} forcePagerRow={true} pageSize={50} enableFilters={true} enableFooters={true} >

       <ReactDataGridColumnLevel>

           <ReactDataGridColumn dataField={"id"} headerText={"ID"} />

           <ReactDataGridColumn dataField={"type"} headerText={"Type"} />

       </ReactDataGridColumnLevel>

   </ReactDataGrid>


Important: The properties you see in the markup above, are defined on the FlexDataGrid, FlexDataGridColumnLevel and FlexDataGridColumn classes. These are documented here :


http://www.reactdatagrid.com/docs/class/js/flexgrid/grids/FlexDataGrid.js~FlexDataGrid.html

http://www.reactdatagrid.com/docs/class/js/flexgrid/grids/FlexDataGridColumn.js~FlexDataGridColumn.html

http://www.reactdatagrid.com/docs/class/js/flexgrid/grids/FlexDataGridColumnLevel.js~FlexDataGridColumnLevel.html


They should map to either a field exposed via a property, or via getter/setter methods (e.g. getDataField() or setDataField()). The props processing mechanism of the grid automatically figures out if there is a setter by the name of the property you are trying to specify, and uses that first. If it does not find one, then it uses the property name. The initialization mechanism also tries to intelligently map strings to complex objects, like Functions, Class Factories,  and Renderers. For details, refer to the Advanced Example - deep dive later in the guide.




Once you do this, below is the screenshot you should see:


That's much better! The power of the product is coming into view! Below is the markup that you should have so far:


<!DOCTYPE html>

<!--PLEASE ENSURE YOU READ THE ACCOMPANYING README.TXT FOR DETAILS-->

<html lang="en">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>React DataGrid Example</title>

</head>

<body>

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

 <script src="../../lib/reactdatagrid.js"></script>

 <script src="../../data.js"></script>

 <script type="text/babel">

     const  { ReactDataGrid, ReactDataGridColumn} = flexiciousNmsp;

     const grid = <ReactDataGrid  horizontalScrollPolicy={"off"} width={"100%"}

     enablePrint enablePreferencePersistence enableExport forcePagerRow pageSize="50" enableFilters enableFooters

     editable dataProvider={donuts}>

       <ReactDataGridColumn dataField="id" headerText="ID"  />

       <ReactDataGridColumn dataField="type" headerText="Type" />

     </ReactDataGrid>;


     class Example extends React.Component {

       render() {

         return grid;

       }

     }


     ReactDOM.render(

       <Example/>,

       document.getElementById('app')

     );

   </script>

</body>

</html>



So what did we do here? We just gave the grid an initial configuration to render itself. Let’s quickly examine the properties:


enablePrint={true} // This Enables the print operation in the toolbar

enablePreferencePersistence={true} // This Enables the preferences in the toolbar

enableExport={true} // This Enables the export operation in the toolbar


forcePagerRow={true}

Flag to force appearance of the pager row even with enablePaging=false. Use this flag to show the pager control even if the enablePaging is set to false. This is used in a scenario where you wish to show buttons other than the paging buttons in the pager bar.

enableFilters={true} // This Enables the inline filters

enableFooters={true} // This Enables the footers.



And on the column:


dataField={id} //The property on the data provider object that you want to show in this column. This can be a nested property - like address.line1 or  address.country.name.

headerText={ID} //The header text to show on the column.



In the above example, an important property is the dataField. Each of these properties has a description in the API documentation. Please NOTE – since some properties have getters and setters, the documentation will most likely be associated with the corresponding getter OR setter, depending on which is most likely to be used.. For example:



dataField={id}


The documentation in this case is associated with dataField appears under getDataField: http://www.reactdatagrid.com/docs/class/js/flexgrid/grids/FlexDataGridColumn.js~FlexDataGridColumn.html#instance-method-getDataField

The name of the field or property in the data provider item associated with the column. Each DataGridColumn control requires this property and/or the labelFunction property to be set in order to calculate the displayable text for the item renderer. If the dataField and labelFunction properties are set, the data is displayed using the labelFunction and sorted using the dataField. If the property named in the dataField does not exist, the sortCompareFunction must be set for the sort to work correctly.

This value of this property is not necessarily the String that is displayed in the column header. This property is used only to access the data in the data provider. For more information, see the headerText property.

If you specify a complex property, the grid takes over the sortCompareFunction, and the sortField property is ignored.


For the most part, each of the properties should be found on the FlexDataGrid, FlexDataGridColumn, FlexDataGridColumnLevel, or FlexDataGridColumnGroup classes in the documentation:

http://www.reactdatagrid.com/docs/class/js/flexgrid/grids/FlexDataGrid.js~FlexDataGrid.html


One thing to keep in mind - in the API docs, these might appear in getter/setter format. For example, enablePaging appears as getEnablePaging here: http://www.reactdatagrid.com/docs/class/js/flexgrid/grids/FlexDataGrid.js~FlexDataGrid.html#instance-method-getEnablePaging