This post shows how to create a Grid Web component and initialize it from a DIV tag
The next version ver3.1.0 of Smart HTML Elements will introduce an alternative way to create a Web Component on demand from an existing HTML Element.
Let's look at the sample below. In the 'index.htm' web page code, we see a HTMLDIVElement(DIV tag) with id="grid". We will use that HTML element to create a new Grid Web Component instance.
The 'index.js' file is defined as a Javascript Module. In that module our grid web component is created on window.onload, within a function called 'init()'. That is achieved by calling the Smart.Grid function and passing as a first argument the 'id' of the DIV tag and as a second argument the initialization object with the Grid web component's dataSource, columns and other configuration options. As a result, our DIV tag is replaced with a 'smart-grid' tag and a Grid is displayed.
That approach is useful, when we want to update an existing application with minimum changes or to create a Smart Web Component on demand with ES6 code.
The latest version of Smart HTML Elements, brings a full featured Chart Custom Element with more than 30 different Data Visualization options. The Chart Types supported are listed: Chart Types.
Our Chart Custom Element is written in JavaScript and CSS. It does not depend on any other third-party scripts. The rendering is achieved with SVG and HTML5 canvas. The Chart works well on mobile browsers and is the most feature-complete chart available in the web components world. Data displayed on the Chart can be formatted in multiple different ways. For example, the charting element has a property called 'formatSettings' with the following data formatting options.
decimalSeparator - character used as a decimal separator. If not specified, the default separator is '.'
thousandsSeparator - character used as thousands separator. Default value is ','
decimalPlaces - number of digits after the decimal separator. Default value is 2 for floating point numbers.
negativeWithBrackets - boolean which specifies whether to display negative numbers in brackets. Default value is false.
prefix - any string which will be added as a prefix. Default value is empty.
sufix - any string which will be added as a sufix. Default value is empty.
dateFormat - optional date format string. This property is applicable only when displaying Date objects.
The image below illustrates the Axes supported by the custom element. Smart.Chart has two main types of axes - valueAxis and xAxis. Typically the valueAxis represents the vertical axis in the chart although you may choose to rotate the axes and in this case the valueAxis will be displayed horizontally.
Smart.Chart also ships with 32 built-in color schemes which are used to automatically set colors for different series. You can change the color scheme by setting the colorScheme property of the chart. The available value are from 'scheme01' to 'scheme32'. By setting its 'theme' property, users can Data Visualize their graphics in 'Light' and 'Dark' mode. Smart.Chart is based on: jqxChart.
We invite you to look at our Chart Custom Element demos: Chart overview
This post shows how to bind to the Grid Web Component events. The code below initializes the Grid instance and binds to the 'click' event. Within the event handler, we can get details about which part of the Grid was clicked - Cell, Row or Column. This is achieved by utilizing the 'event.path' array. It is also important to note that each Data Grid Column has 'data-field' attribute and each Row has 'data-id' attribute. The data source, which is used in the example is available in the 'data.js' file from the download package.
Smart('#grid', class {
get properties() {
return {
dataSource: new Smart.DataAdapter(
{
dataSource: getCountriesData(),
dataFields:
[
'ID: number',
'Country: string',
'Area: number',
'Population_Urban: number',
'Population_Rural: number',
'Population_Total: number',
'GDP_Agriculture: number',
'GDP_Industry: number',
'GDP_Services: number',
'GDP_Total: number'
]
}),
columns: [
'Country',
'Area',
'Population_Rural',
'Population_Total',
'GDP_Total'
]
}
}
});
window.onload = function() {
grid.addEventListener('click', function(event){
const path = event.path;
let cell = null;
let row = null;
let column = null;
for(let i = 0; i < path.length; i++) {
const node = path[i];
if (node.nodeName === 'SMART-GRID-CELL') {
cell = node;
}
if (node.nodeName === 'SMART-GRID-ROW') {
row = node;
}
if (node.nodeName === 'SMART-GRID-COLUMN') {
column = node;
}
}
if (row) {
alert(row.getAttribute('data-id'));
}
if (column) {
alert(column.getAttribute('data-field'));
}
if (cell) {
alert(cell.innerText);
}
});
}
The newest version of our framework marks the availability of a new AutoComplete Input tag. We needed such lightweight component for the purposes of our Grid web component. There, it is used as an inline cell editor. You can check it out here: grid-editing-cell-auto-complete.
Here is how the web component looks like when you add it to your web page:
All you need to do is to add a reference to smart.elements.js, smart.default.css and type the following:
<smart-input data-source="[South America, North America, Asia, Africa, Europe]"></smart-input>
Our Web Components library has a feature, which allows you to dynamically extend a Custom Element with additional behaviors. We call them Modules. To add a new module, you have to call the 'addModule' method. In this blog, we will show you how to create a new module, which adds a 'color' property to a Custom Element. We will call it 'ColorModule'.
The 'ColorModule' defines a 'color' property. The default property value is 'red'. Whenever the 'color' property is changed, the 'setColor' method is invoked which applies the Color to the element. The below code adds the Module to the 'smart-toggle'button' Custom Element.
window.Smart.Elements.whenRegistered('smart-toggle-button', function (proto) {
proto.addModule(ColorModule, true);
});
Note that the second parameter is 'true'. This means that our 'ColorModule' will be added to all sub-classes of the 'smart-toggle-button' i.e 'smart-radio-button', 'smart-check-box' and 'smart-switch-button'. All these custom elements will have the 'color' property. Usage example:
If you need to get the Path to the current Javascript file being executed, you can use this small function:
const location = (function () {
if (document.currentScript) {
let link = document.currentScript.src;
let lastIndex = link.lastIndexOf('/');
link = link.substring(0, lastIndex);
return link;
}
})();
In our code base, we use it to dynamically load Component dependencies.
One of the new additions to our Javascript Grid Web Component is the capability to load very large data sets. Example: Grid Large Data Set. In the example, we demonstrate how to load 50,000 rows and 1,000 columns. This can be achieved due to the built in Fast Data and User Interface virtualization. We create HTML Elements only for the View and update them while user scrolls. The Grid is also in unbound mode and the demo is created by using this code:
To create it in unbound mode, we need to set the dataSource and dataFields properties to Numeric values which determine the Rows and Columns. The "onCellRender" callback function allows us to render cell values on demand when the cell is in the view. The Data in the example is Client Side data. If you have an application scenario, where you need to use larger data sets, our Grid offers a solution for that due through the Virtual Data Source. Check out: Grid Demos.
The new release includes major changes in the Grid web component and also bug fixes, visual style improvements in all components. The version can be downloaded from our Download page or you can install it through NPM npm i @smarthtmlelements/smart-core or npm i @smarthtmlelements/smart-elements
Cells Merge - allows you to span a cell through multiple rows or columns. To use this feature, you need to access a Grid cell, through the Grid's 'rows' array. Each row in the 'rows' array has 'cells' array. It allows you to access a cell and set options of that cell like: 'rowSpan', 'colSpan', 'backgroundColor', 'color', 'value', 'fontSize', 'fontWeight' and 'fontFamily'.
Columns Crud - allows you to dynamically add, remove and update DataGrid columns. This is achieved through the DataGrid's 'columns' array which has javascript functions such as: 'push', 'pop', 'splice' for adding, removing and updating array items. Once any of these functions is called, the web component will automatically refresh itself to respond to the changes.
