The new release brings a lot of new things to our product.
- Framework: Model-View Two-Way data bindings
- Table Web Component – 100% Free Table replacement with Sorting and Data Binding capabilities.
- Grid Rows Freeze
- Grid ColumnsFreeze
- Grid Columns Resize
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’.
Example: https://www.htmlelements.com/demos/grid/merged-cells/.
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.
Example: https://www.htmlelements.com/demos/grid/dynamic-columns/.
Posted in:
Smart Grid
Tagged:
colspan, columns pop, columns push, columns splice, customelements, data grid column span, data grid columns, data grid row span, datagrid, datagrid add new column, datagrid cells merge, datagrid web component, html, html elements, javascript, rowspan, webcomponents
With the new release of our Grid Web Component, we added additional Data Paging options. With the help of them, you can customize the Paging appearance and behavior.
– Pager can be displayed above and/or below the Grid.
– Pager Size selector position and visibility is optional.
– Pager Size selector options are customizable.
– Pager Summary position and visibility is optional.
– Pager buttons can be displayed as Icons or as Labels. You can also choose whether to display or not some of the buttons.
– Pager Navigation Input visibility is optional.
Take a look at the new Web demo online: https://www.htmlelements.com/demos/grid/paging-advanced/.
Angular and Web Components
Web Components is the future of reusable components development for modern and professional web applications. Smart HTML Elements represents a framework based on Javascript, HTML and CSS for building modern web-based applications optimized for PC and mobile devices. It provides fundamental capabilities like support for HTML Element extensions and inheritance, HTML Templates, Data Binding, Event handling and routing, property change notifications, device and browser compatibility detection and adjustments.
Read Full Article on: Smart HTML Elements Adds Native Angular Support
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.
|
|