The newest release of Smart HTML Elements includes a Grid Web Component with the following features: Paging, Sorting, Sorting by multiple columns, Virtual Scrolling and Infinite Scrolling.
What is Paging?
Paging lets users view large sets of data in small chunks for faster loading and easier navigation
What is Sorting?
Sorting data by the columns ASC or DESC in the grid can be done by single or multiple columns.
What is Virtual Scrolling?
Virtual scrolling lets you scroll through data which is loaded on demand. In this scrolling mode, the total number of rows is known and data grids loads data while you scroll.
What is Infinite Scrolling?
Infinite scrolling is similar to virtual grid scrolling. In this mode, datagrids load new data when you reach the bottom of the Grid. The total number of data rows here is unknown.
In this blog we are going to show you our DropDown Button custom element.
The DropDown button web component is a button element which when pressed opens a drop down list. The drop down list contain a set of selectable items. The list can be opened or closed with the help of arrow pointers on the right end of the button.
Drop Down Button Custom Element Features
Scrolling. When the button is pressed you can scroll through the elements of the dropdown list.
Segmented button. The segmented dropdown button will show the current selected item and will not open the dropdown list when you press it. The dropdown list can be opened with the arrow in this case.
Open directions. The dropdown list can open below or above the button.
You can see an example here.
In this blog we are going to show you our Date Picker custom element.
The Date Picker web component allows you to pick a date with the help of a calendar component. The custom element can be used in cases when the user needs to pick or input the date. The date can be selected by clicking the calendar button and selecting the date from the calendar, or enter the date manually in the input text filed.
Date Picker Custom Element Features
An important feature of our Date Picker html tag is localization in different languages and time formats.
The web component has built-in date parsing functionality and supports choosing a date in different formats.
Colors and theming. The background color and the text color of the items can be defined. You can also use the built in themes.
You can see an example here.
ListBox Custom Element with Images
In this blog we are going to show you our ListBox Custom Element with Images.
The ListBox web component is a drop down list of selectable items which can be scrolled up and down. The user can select an item of the list. The ListBox can also contain rows with complex items such as conversations.
The ListBox html tag supports images and icons on the left of the items. The images can also be pictures.
ListBox Custom Element with Images Features
Scrolling. The web component supports scrolling of the items.
Drag and drop. You can move items between listboxes by dragging an item from one of the listsboxes and dropping it on another.
Colors and theming. The background color and the text color of the items can be defined. You can also use the built in themes.
Animation. By enabling animation you can see a nice effect when clicking on an item from the listbox.
You can see an example here.
For large data sets or when the exact data records count cannot be determined in advance, you can supply data to the Grid while you scroll when the user reaches the bottom of the grid. In this case, the Grid’s scrolling is called infinite scrolling mode. The scrollbar reflects the currently loaded amount of data. When new data records are supplied, the scroll bar re-adjusts its size and allows you to scroll and view the newly loaded data records. To illustrate the infinite scrolling functionality of Smart.Grid, we prepared this demo:
Demo: Grid Infinite Scroll
In this blog we are going to show you our Vertical Menu Custom Element.
The menu web component is used very frequently in user interfaces. It enables the selection of an item from a list of items. The Vertical Menu HTML tag is a menu custom element which instead of horizontally opens vertically. This is useful for example in cases where the menu has a long list of items or the sub menus have long lists. To make the menu web component appear vertically you have to set the mode property.
Vertical Menu Custom Element Features
Animation. When you enable animation you can see a nice effect when clicking an item from the menu or when the sub menus appear or disappear.
Images. You can set images the left of the item of the Vertical Menu.
Colors and theming. The background color and the text color of the items can be defined. You can also use the built in themes.
Open direction. The sub menus can be opened on the left or on the right of the menu items.
You can see an example here.
In this blog we are going introduce you to our CheckBox Custom Element.
The CheckBox Web Component is a kind of button which is usually used to enable the selection of different choices. It represents a box which can be checked, unchecked and undetermined. The different states can be changed by clicking with the mouse over the checkbox.
Checkbox Custom Element Features
The CheckBox HTML tag supports four states: checked, unchecked, undetermined and disabled.
The CheckBox custom element comes with Light and Dark themes.
It also enables fluid design where the width can be set in percentages.
You can see an example here.
In this blog we will introduce our Linear Progress Bar custom element.
The ProgressBar Web Component indicates the progress of an operation. It is very often used as an indicator when a file or content is being loaded. It can also be used as a refresh indicator.
The linear progress bar represents a line which shows the progress on a scale between 0 and 100.
Linear ProgressBar Custom Element Features
Determinate. When the Linear Progress Bar is set to determinate it goes from 0 to 100 following the progress of the operation without going back.
Indeterminate. When the Progress Bar Web component is set to indeterminate it shows a line going from 0to 100 repeatedly.
The ProgressBar HTML tag comes with a Light and Dark themes.
You can see an example here.
In this blog we will introduce our Calendar custom element.
The Calendar Web Component enables you to visualize and select the year, month and date. The years and the months can be easily changed by navigating the calendar from the title bar. The selected day is indicated by a colored circle.
The calendar is one of the basic custom elements used when you need to change or select dates.
Calendar Custom Element Features
When you select a date from the HTML Calendar element the current date stays indicated by a filled circle with paler color.
If you click on the year in the title bar there appears a list with years below it. You can select a year from the list.
Likewise, if you click on the month in the title bar there appears a list with months below it. You can select a month from the list.
The Calendar Web component is responsive and mobile ready.
In addition, the text and the back ground colors can be changed.
You can see an example here.
In this blog we will introduce our Combobox custom element.
The ComboBox is one of the basic web components used widely in the UI part of applications in order to facilitate the selection of items. It represents a list of elements displayed in a drop-down and an input text field where information can be entered. The elements from the list can be selected. Also the user can search for a specific element.
Combobox Custom Element Features
Our HTML Combobox Element supports multiple selection. With the MultiSelect option the user can select multiple elements from the drop down list. The selected elements will appear in the text input field.
The Open direction of the list of elements can be above, below or centered.
The web component enables also auto-complete. With the auto-complete option the element matching the text in the input filed will be shown on top.
Checkbox on the left of the elements in the list is also supported. This facilitates the selection of multiple items.
The elements in the drop down list can be aligned horizontally or vertically. The horizontal alignment can be left or right and the vertical top or bottom.
In addition, the text and the back ground colors can be changed.
You can see an example here.
|
|