FlexGrid allows you to access many different options and properties of the control to customize and configure behaviors to meet project needs. But in some cases, you may want to empower your end user with control of certain features of the Grid without cluttering up your user interface with controls. In this blog, we'll dive into how to add a glyph to the FlexGrid, allowing the users to configure their own interface and keep the page looking clean. By exposing properties or behaviors to the end user and using a data binding framework such as Angular 2, you can easily make a menu so end users can customize on the fly.
The Requirements
- We add a settings glyph to the top leftmost cell in the Wijmo FlexGrid using the cell template directive.
- We'll set the default to "hide all settings" unless the user wants to configure them.
- When the user clicks on the settings gear, a Wijmo popup will appear and expose settings of the FlexGrid to the end user.
- For this blog, we'll use FlexGrid configurations in the popup, but you can place any valid HTML inside of it to accomplish any requirement.
- In this Wijmo popup menu, I've added the ability to set the number of frozen rows or columns, put the FlexGrid into ReadOnly mode, and change the parameters for conditional formatting.
Let’s take a look at what we need to do accomplish this functionality.
Project Setup
I used Angular Material Glyphs for the settings menu icon. If you want to do the same, add the following reference to your default.html page:
This provides access to the entire library. You can test it by adding the settings glyph to your HTML page.
For our popup menu, we'll use the Wijmo popup control. It's included in the Wijmo.angular2.input module. Inside our directives we'll need to add a reference to *.wjPopup. We'll add a few more directives, as well, so we can access the CellTemplate directive in our companion template. For this demo we'll add wjFlexCellTemplate and wjTemplateCmp.
Now we'll add the cell template markup to our FlexGrid. In order to add the settings icon to the top left cell, we'll use the wjFlexGridCellTemplate. We can place any valid HTML code here, so let’s add our Settings glyph and assign it an Angular 2 click event that will call a function inside our component class.
Creating the Popup
Inside our click event, we're calling showDialog() and passing it a parameter of settingsMenu. We'll need to add our popup to our companion template and assign it a local variable of settingsMenu to pass to our showDialog().
Right now, the contents of the popup are empty, but in order to test to make sure the popup is working, we need to define our showDialog() function in our component class. It's inside this function that we can make popup configurations.
Building the contents of the Popup
Now that we have our settings menu appearing, let's add some functionality. In our class we'll define two new variables called fRows and fCols. Since we bind our frozenRows and frozenColumns properties of our FlexGrid in our markup to these variables, let’s define them as a numeric.
This is where Angular 2 starts doing the heavy lifting for us. In our markup, we can bind properties of our FlexGrid to these variables, bind some Wijmo Input Number controls to control behavior, and Angular 2 will propagate the changes for us.
Inside our popup directive, add the following markup inside the form.
We bind the value of these inputs to our fRows and fCols in our class to provide a clean user control of these parameters.
Now we need to add these properties to our FlexGrid and bind them to our variables.
Our FlexGrid (one-way bound) and InputNumber (two-way bound) are now bound and listening to these variables so if any changes made to the inputs, the Grid will update automatically for you.
We can follow the same process for putting the FlexGrid in Readonly mode. We need to add a Boolean variable to our component class.
Now in our settings Popup we can add a checkbox input to provide control to the end user.
Finally, we add the property to our each of our FlexGrid columns and bind it to our variable in our class. You can assign unique names if you want to control the editable properties for each column.
More advanced customizations: Change formatting parameters
Giving the user access to how many frozen rows or columns they want to see, or whether they want to make changes, is a common requirement. But when it comes to doing data analysis sometimes more advanced customizations are required such as conditional formatting. The dataset may not be static data, so it can be difficult to choose a range of data to format conditionally without knowing much about the data.
So let’s give our users the ability to change the formatting parameters. To begin, we'll add some static conditional formatting to a numeric column. Inside our FlexGrid markup:
This code takes the amount value and calls a getAmountColor() function in our component class. Then it places that formatted value into the cell.
Let's add our getAmountColor() code.
In my conditionals, I manually define the high and low ends of the formatter. It may be the case that you don't know these high and low ends; perhaps you want to empower your end user to customize the high and low ends of their dataset.
Let's add some new numerics to our class and bind our getAmountColor params to it.
Finally, we'll add a few Wijmo Input Number controls to our popup menu to control behavior:
For the blog today, we only place some basic functionality into our popup, but you can do much more. I wanted to show you how easy it is to add glyphs to the FlexGrid control and bind it to a Wijmo popup menu using Angular 2.