Smart UI v18.0.0

Smart UI v18.0.0 Release, Jan-24-2024

What's New:

  • Grid Card view layout.
  • Grid Computed columns with Formulas.
  • Grid Column Editor with custom data source.

What's Improved:

  • Grid Performance. The scrolling, data updates and mobile UX.
  • Dropdownlist, ComboBox, Menus and other dropdowns UX animations & effects.
  • Gantt day view now allows you to display hour, half hour and quarter slots.

What's Fixed:

  • Fixed an issue in the Grid about column reorder in column groups.
  • Fixed an issue in the Grid about autoHideGroupColumn option.
  • Fixed an issue in the Grid related to the prepared sql queries.
  • Fixed an issue in the Grid related to the dropdown when the Grid is inside a Window.
  • Fixed an issue in the Grid related to the Filter row when Ctrl+A is used.
  • Fixed an issue in the Grid related to the localization of the Data Exported currencies.
  • Fixed an issue in the Grid related to the column reorder & toolbar rendering after removing the Grid from the DOM and them adding it again.
  • Fixed an issue in the DockingLayout related to the state maitenance.
  • Fixed an issue in the DockingLayout related to the dragging of text and images in a layout panel.
  • Fixed an issue in the Gantt issue related to the rendering in Month view when monthScale = 'day'.
  • Fixed an issue in the Gantt issue related to the firstDayOfWeek property.
  • Fixed an issue in the Gantt dayScale which allows you to display hour, half hour and quarter in the Gantt's day view.
  • Fixed an issue in the Gantt about task base line rendering in month and year views.
  • Fixed an issue in the Scheduler issue is fixed related to the Timeline Month view when Event is resized.
Uncategorized

Leave a comment

New Smart.Blazor Release

The new release brings the following updates:
  • Grid Card view layout.
  • Grid Formulas support.
  • Grid Performance boost.
  • Grid mobile experience was improved.
  • Grid optimizations about groups render.
  • Grid issue is fixed about column reorder in column groups.
  • Grid issue is fixed about autoHideGroupColumn option.
  • Grid issue is fixed related to the prepared sql queries.
  • Grid issue is fixed related to the dropdown when the Grid is inside a Window.
  • Grid issue is fixed related to the Filter row when Ctrl+A is used.
  • Grid issue is fixed related to the localization of the Data Exported currencies.
  • DockingLayout issue is fixed related to the state maitenance
  • DockingLayout issue is fixed related to the dragging of text and images in a layout panel.
  • Grid new autoWidth and autoHeight layout properties.
  • Gantt issue is fixed related to the rendering in Month view when monthScale = 'day'.
  • Gantt issue is fixed related to the firstDayOfWeek property.
  • Gantt dayScale which allows you to display hour, half hour and quarter in the Gantt's day view.
  • Scheduler issue is fixed related to the Timeline Month view when Event is resized.
  • Improved UX for Dropdownlist, ComboBox, Menus and other dropdowns. They were updated with new smooth animations.
Uncategorized

Leave a comment

.NET 8 support for Smart.Blazor

Today, we released a new Smart UI for Blazor version with .NET 8 support.
Uncategorized
, , ,

Leave a comment

Build Blazor MAUI Hybrid App with SmartUI

We just added a new tutorial which will show you how to easily integrate Blazor MAUI with SmartUI - https://www.htmlelements.com/docs/blazor-maui/
Uncategorized

Leave a comment

Smart UI 17.0.0

Smart UI v17.0.0 Release, Oct-23-2023

What's New:

  • Ribbon Bar component.
  • Grid Formulas.
  • Grid Rich text editor.
  • Grid Row Dialog
  • navigation. Users can navigate to next and previous rows by using navigation buttons in the dialog's header.
  • Grid User Comments. The Edit dialog allows you to add, update and remove row comments.
  • Grid Edit History. When the 'users' and 'storeHistory' properties are set, the dialog can display the update activies related to the row.
  • Richtext & User mention for the Textarea component.
  • New Templates for Angular, React, VueJS and Blazor.

What's Improved:

  • Grid Mobile User Experience. The scrolling of the Grid now uses the native browser scrolling in mobile mode.
  • Grid performance when scrolling. The horizontal and vertical scrolling performance is improved.
  • Grid trackpad and mousewheel User experience. Added animations when scrolling with mouse wheel. When scrolling with trackpad, the Grid uses the native browser scrolling.
  • Grid Images & attachment cell editors & cell templates.
  • Grid Due Date template.
  • Kanban drag and drop of tasks. Added drag animation.
  • Kanban edit mode. Users can choose to edit on single or double click.
  • Kanban add tasks with inline task text editing.

What's Fixed:

  • Fixed an issue in the NumberInput with german locale and currency input.
  • Fixed an issue in the Grid about the Textarea editor's browser bounds detection. The textarea dynamically detects the optimal position.
  • Fixed an issue in the Grid about server side filtering query about 'date' and 'number' columns.
  • Fixed an issue in the Grid about server side filter button in the Grid's toolbar. The button was incorrectly disabled after filtering.
  • Fixed an issue in the Grid about server side filtering, when filter row is applied and the Grid's state maintenance is enabled.
  • Fixed an issue in the Grid about frozen cell rendering when the cell is selected.
  • Fixed an issue in the Grid selection when there is a frozen column.
  • Fixed an issue in the Grid about date filter in the filter row, when multiple dates are selected with CTRL.
  • Fixed an issue in the Grid about date formatting with specific date formats which include time formats like 'dd/MM/yyyy HH:mm'.
  • Fixed an issue in the Grid about cell validation.
  • Fixed an issue in the Grid about Grouping with the Toolbar.
  • Fixed an issue in the Grid about addrow UI element, when the Grid is empty.
  • Fixed an issue in the Grid about auto-height rendering, when paging & filter row are turned on and the Grid has horizontal scrolling. The last row was not visible.
  • Fixed an issue in the Form component about setting its value from a string.
  • Fixed an issue in the Form submit when control is dropdownlist.
  • Fixed an issue in the DropdownList when the name property is set and the Dropdownlist is within HTML Form.
  • Fixed an issue in the Scheduler component about the getDataSource method results, when time zone is applied.
  • Fixed an issue in the Gantt chart component about the column's formatFunction. There was an issue with the rendering when the formatFunction is set to the first column.
  • Fixed an issue in the Table about appllying a template to the tree column in Tree Table mode.
  • Fixed an issue in the Phone Input component about detecting correctly the country by entered phone number.
Angular, HTML Elements, Javascript, React, Smart Accordion, Smart Button, Smart Calendar, Smart ComboBox, Smart Grid, Vue, Web Components
, , ,

Leave a comment

Smart UI v16.0.1

Smart UI v16.0.1 Release, Aug-04-2023

What's Improved:

  • Grid Rating, Duration & Time columns.
  • Grid Column Type change. The grid has a new functionality which allows users to dynamically change the column type.
  • Grid Grouping and dynamic addition of rows to groups. When the add new row functionality is turned on, Grid groups will display a button which adds a new row to the group.
  • Grid Toolbar drop-downs browser bounds detection. Drop-downs will open above the Grid when there is no available space.
  • Grid Appearance which allows users to show or hide cell lines within column groups.
  • Grid Edit Row dialog dragging functionality.
  • TextArea can be used as a Mention input by using the new "users" property.
  • Grid select columns summary option which displays legend bars at the bottom of the Grid with the summary details in the column.
  • Kanban tasks priority rendering.

What's Fixed:

  • Fixed an issue about dispatch of component events in Vue 3.
  • Fixed an issue about add/remove dynamic CSS class names in React components.
  • Fixed an issue in the Grid about Date filter usage within the filter row. The filter was not working correctly when the Grid column has a custom cells formatting.
  • Fixed an issue in the Grid about data grouping state maintenance after the data source is changed.
  • Fixed an issue in the Grid about the load state when there are groups.
  • Fixed an issue in the Grid about the "columnDragEnd" event's newIndex detail.
  • Fixed an issue in the Grid about the "setColumns" method.
  • Fixed an issue in the Grid sorting after setting dynamically the "columns" property.
  • Fixed an issue in the Grid about the "createdBy" and "createdDate" column templates.
  • Fixed an issue in the Grid about the selection when infinite scroll is enabled.
  • Fixed an issue in the Grid about rendering emojis in grid cells.
  • Fixed an issue in the Grid about data export to Excel when the export column is a Date column and it contains null values.
  • Fixed an issue in the Data binding with JSON in the Grid, Scheduler, Kanban & Table components.
  • Fixed an issue in the Gantt chart about the zoom in/out functionality.
  • Fixed an issue in the FileUpload about the auto upload functionality.
  • Fixed an issue in the Kanban about comments, checklist and column header rendering and escaping.
  • Fixed an issue in the DateRangeInput calendar rendering with multiple months.
  • Fixed an issue in the DateRangeInput when the locale is set.
  • Fixed an issue in the DateRangeInput when the months property is set dynamically.
  • Fixed an issue in the Form when the form is created and the same form element is used for another form instance.
  • Fixed an issue in the Scheduler about the current time indicator. The current time indicator was not rendering dynamically as it should.
  • Fixed an issue in the Scheduler about Repeat events in Angular.
  • Fixed an issue in the Table to keep the expanded state of groups, when the data source updated.
  • Fixed an issue in the Input, Textarea and DropDownList about setting a custom tabindex.
  • Fixed an issue in the Input about selected item rendering, when the value contains script tags.
  • Fixed an issue in the Dropdownbutton about setting a template as a placeholder.
  • Fixed an issue in the Input and MulticomboInput components about Escape key handling.
Uncategorized

Leave a comment

Smart UI 15.2.1

Smart UI v15.2.1 Release, May-16-2023

What's New:

  • Angular 16 support. We updated the "smart-webcomponents-angular" npm pacakge to support the latest version of Angular.

What's improved:

  • Custom current time can be set up for Scheduler and Gantt components.
  • Improved Gantt API for rendering tasks and projects. This allows developers to customize the appearance. Added a 'quarterFormat' property to customize the quarter views.
  • Improved Editor API. Developers can easily add, remove and update tools from the editor.
  • Improved Kanban tasks priority look and feel.

What's Fixed:

  • Fixed an issue in the React Grid about state persistance.
  • Fixed an issue in the Tabs when the component is used within a Web components from another vendor.
  • Fixed an issue in the Scheduler when a custom time zone is used in the TimelineWeek view.
  • Fixed an issue in the Grid with the subtasks editor.
  • Fixed an issue in the React components about changing props with object or array type.
  • Fixed an issue in the Grid about sanitizing row comments.
  • Fixed an issue in the Grid about state persistance of expanded rows when the data source is dynamically changed.
  • Fixed an issue in the Gantt about the firstDayOfWeek property in week view.
  • Fixed an issue in the Gantt about the weekFormat property in month view.
  • Fixed an issue in the Gantt about the dayFormat property in month view when the monthScale is set to "day".
  • Fixed an issue in the Scheduler about the currentTimeIndicator in RTL mode.
  • Fixed an issue in the Grid about the 'Tab' key and the 'change' event. The 'change' event was not raised.
  • Fixed an issue in the Grid about the Checkbox editor when the 'Space' key is pressed.
  • Fixed an issue in the Grid about the 'endEdit' event with checkbox editor.
Uncategorized

Leave a comment

Smart UI v15.2

Smart UI v15.2.0 Release, Apr-23-2023

What's New:

  • Gantt Views. The view property is extended with a new 'quarter' option which displays Quarters. The Month view now can display not only weeks, but also days.
  • Gantt first day of week. Users can choose the first day of the week in the Month view.
  • Gantt Headers rendering. Users can choose to display 1, 2 or 3 headers to handle complex rendering scenarios. For example, you can have an Year view as a top header, then a Quarters view as a sub header and Months view as a bottom header.
  • Grid Number column can be customized to display thousands separator separator.
  • Fluent UI Theme.

What's Improved:

  • Gantt Headers visibility can be customized to display one, two or three headers.
  • Gantt Month view can be customized to display Month and Weeks, Month and Days or Month, Weeks and Days.
  • Grid Cell Tags template now supports wrapping.
  • Grid Image column dialog now has a new section for choosing images set by the user during the Grid initialization.
  • Grid save and load state. Users can optionally save and load the state from the local storage and save specific state options. Multiple states are now supported.
  • Barcode & Qrcode now feature additional settings and customization options such as background color setup and size setup.

What's Fixed:

  • Fixed an issue in the DateTimePicker about mobile interaction when multiple components are used.
  • Fixed an issue in the DropDownButton about the dropdown rendering, when the dropdown's parent is the document's body tag.
  • Fixed an issue in the Grid about clipboard cut, copy, past on Mac OS.
  • Fixed an issue in the Grid about rows resize on double click.
  • Fixed an issue in the Grid about the Textarea editor and its rendering.
  • Fixed an issue in the Table about dynamic changing of the dataSource when the browser's tab is inactive.
  • Fixed an issue in the Table column menu and filtering, when a filter is applied the filter icon was not rendered correctly.
  • Fixed an issue in the Form about labelPosition and columns properties.
  • Fixed an issue in the Listbox selection.
  • Fixed an issue in the Tree grid about adding new row dynamically.
  • Fixed an issue in the Tree grid rendering when addnewrow is enabled.
Angular, HTML Elements, Javascript, React, Vue, Web Components
, ,

Leave a comment

Smart UI R1 2023

We are happy to announce that a new version of Smart UI is now available. It brings a brand-new 3D Chart component and many other updates which will help you to create better web apps.

What's New:

  • 3d Chart component.
  • Grid Save/Load state(persist state).

What's Improved:

  • Scheduler Available & Restricted options. You can define availablity for specific periods and restrict user input.
  • Scheduler Resources Legend Mobile friendly mode. When there are multiple legends, they are displayed in a dropdown component.
  • Scheduler Performance with many events.
  • Help documentation about Blazor, Angular & React. More than 20 new help topics are added.

What's Fixed:

  • Gantt: Week number calculation.
  • Grid: Fixed an issue about the tags template of Cells.
  • Grid: Fixed an issue about the Grid column editing for color and checklist column types.
  • Grid: Fixed an issue about the Grid cell styling with custom css class names.
  • Grid: Fixed an issue about CSS rules applied to grid cells.
  • Grid: Fixed an issue about escape content.
  • Grid: Fixed an issue about labelTemplate with horizontal scrolling.
  • Grid: Fixed an issue about Multicomboinput dropdown editor positioning.
  • Grid: Fixed an issue about column reorder.
  • Grid: Fixed an issue about localization of filtering dropdown when the filter mode is excel.
  • Form: Fixed an issue about the Form's showButtons, backButtonLabel and nextButtonLabel properties when the label is used as a html tag.
  • Kanban: Fixed an issue about add new button and multiple columns layout.
  • DropDownList: Fixed an issue about Tab key behavior when Filtering is enabled.
Angular, HTML Elements, Javascript, React, Web Components

Leave a comment

Smart.Blazor with Support for .NET 7

We are excited to announce that a new version of Smart.Blazor is available today. The new version comes with support for .NET 7 Release and includes multiple updates in the Grid, Scheduler and Kanban components.
Uncategorized
, ,

Leave a comment

Artavolo – Cloud collaboration service for everyone

We are happy to announce that we launched our new product called Artavolo. Artavolo puts the power of building a custom database in everyday user's hands. Artavolo is a modern online database service created for everyone, and it gives people the simplicity of a spreadsheet, tools for team collaboration, and a seamless mobile experience. We are just getting started on our mission to expand productivity by giving people simple and useful tools to organize their world. Artavolo is perfect for project management, collecting customer information, creating surveys, and planning events. All of this without any technical expertise. To learn more about Artavolo - https://artavolo.com/
Uncategorized

Leave a comment

Smart UI 14.4.0

Smart UI v14.4.0 Release, Sep-29-2022

What's New:

  • Admin Template for Angular.
  • Admin Template for React.

What's Improved:

  • Grid Performance when rows are added dynamically.
  • Grid Image column. Configuration options for the file upload are added.
  • Query builder - sanitize html in input and select fields items. This avoids potential XSS attacks.
  • ListBox - sanitize html in list items. This avoids potential XSS attacks.

What's Fixed:

  • Grid about filtering with empty values.
  • Grid about the paste and copy values when using editor which has dataSource such as DropDownList or ComboBox editor.
  • Grid about the clipboard cut and delete when editing is disabled.
  • Grid about the keyboard delete when editing is disabled.
  • Grid about the columns property when the property is set dynamically and it contains frozen columns.
  • Grid about cells styling when filtering is applied.
  • Grid about grouping with empty rows. The rows visbile index was incorrect.
  • Grid about the edit dialog in readonly mode when editing is disabled.
  • ListBox about Filtering. The Listbox was not rendering correctly.
  • Kanban about the custom data fields rendering.
  • MultiComboInput about the selectedValues property not working correctly when set dynamically.
  • Scheduler about View property not working in Angular 14.
  • Table about browser window's resize. The rendering of the table when grouping is applied was not correct.
  • Scheduler about the date change event.
  • Calendar about the min date property. The property was with incorrect default value.
  • DateInput about the Calendar popup. The min and max dates were not synchronized correctly.
Uncategorized

Leave a comment

Customer Satisfaction Survey

We would like to ask you to complete a simple anonymous Online Survey that should take no more than 30 seconds. Thank you in advance for sharing your thoughts with us. We appreciate your time and effort in providing feedback to us.
Uncategorized

Leave a comment

Smart UI v14.2.0

Smart UI v14.2.0 Release, July-12-2022

What's New:

  • Grid custom Sorting.
  • Grid custom Filter Menu.
  • Grid custom row and cells styling with CSS classes and rules.
  • Grid Multiple columns Grouping rendering mode.
  • Grid Server-side grouping update.
  • Grid context menu.
  • Grid rows span.

What's Improved:

  • Grid UI about loading groups and rows on demand.
  • DateInput - formatString property.
  • Kanban - Filter and Sort by custom fields.
  • Kanban custom fields data export.
  • Kanban readonly mode.
  • Kanban and Grid API.
  • Grid documentation.

What's Fixed:

  • DateTimePicker Grid editor, when entering values by typing in the input field.
  • Grid Filtering about filter row enabled in Tree Grid mode.
  • Grid when a column is created without a dataField.
  • Grid about editing of numbers and formatting them in floating-point and percent.
  • Grid about column reordering when Grouping is enabled.
  • Grid about column reordering drag line position.
  • Grid about column sanitization and escape of html tags.
  • Grid about row drag line position when the grid is in container with position: fixed.
  • Table about restoring the expanded groups.
  • Table about selection with frozen columns.
  • Table about sanitizeHTML for cells and groups.
  • Form about re-creating the component.
  • Form about initialization from tags and setting the value.
  • CardView about rendering after scrolling.
  • Kanban about readonly mode and custom fields.
  • Table about Filtering.
  • Table. Keeps the groups state when expandHierarchy = true
  • Query Builder about 'change' event details.
  • Kanban about columns collapse when columnWidth is defined.
  • DateInput about formatString property.
  • PivotTable about setting dynamically columns and calculating the grand total row.
  • ListBox about itemTemplate.

Breaking Changes:

  • Kanban - editable does not disable the edit dialog anymore. Only the disableDialog property does.
Angular, HTML Elements, Javascript, React, Smart Accordion, Smart Button, Smart Calendar, Smart ComboBox, Smart Context Menu, Smart Grid, Smart ListBox, Smart Tabs, Smart.Chart, Uncategorized, Vue, Web Components
, , , , , , , , , , , ,

Leave a comment

Free Bootstrap Web Components & more

FREE Bootstrap Web Components. The Github repo: https://github.com/HTMLElements/smart-webcomponents-community contains the following free Bootstrap Javascript Web Components: Alert, Badges, Cards, Buttons, Forms, Tabs, Dropdowns, Modal, Progress, Textarea, Switch, Checkbox, RadioButton.



Within the same repo are the Smart UI Table, Menu, Tabs and Tree components which you can use completely FREE in commercial and non-commercial projects.



Uncategorized


Leave a comment

ASP .NET Blazor WASM & .NET 6

We are happy to share with you that the latest Smart.Blazor NuGET package targets .NET 6.0 by default.
The code sample below shows how to create a Blazor WebAssembly app with .NET 6

Blazor WebAssembly (blazorwasm) Example



1. Create a blazor application:

dotnet new blazorwasm -o BlazorApp

2. Navigate to the application:

cd BlazorApp

3. Add the Smart.Blazor package:

dotnet add package Smart.Blazor

4. Open _Imports.razor and add the following at the bottom:

@using Smart.Blazor

5. Open wwwroot/index.html and add the needed styles and scripts.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor WebAssembly App</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="_framework/scoped.styles.css" rel="stylesheet" />
    <link href="_content/Smart.Blazor/css/smart.default.css" rel="stylesheet" />
    <script src="_content/Smart.Blazor/js/smart.blazor.js"></script>
    <script src="_content/Smart.Blazor/js/smart.elements.js"></script>
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
	An unhandled error has occurred.
	<a href="" class="reload">Reload</a>
	<a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>
6. Open Pages/Index.razor and replace the code as follows:
@page "/"

@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
	<p><em>Loading...</em></p>
}
else
{
	<Table Selection="true" SortMode="TableSortMode.One" class="table">
		<table>
			<thead>
				<tr>
					<th>Date</th>
					<th>Temp. (C)</th>
					<th>Temp. (F)</th>
					<th>Summary</th>
				</tr>
			</thead>
			<tbody>
				@foreach (var forecast in forecasts)
				{
					<tr>
						<td>@forecast.Date.ToShortDateString()</td>
						<td>@forecast.TemperatureC</td>
						<td>@forecast.TemperatureF</td>
						<td>@forecast.Summary</td>
					</tr>
				}
			</tbody>
		</table>
	</Table>
}

@code {
	private WeatherForecast[] forecasts;

	protected override async Task OnInitializedAsync()
	{
		forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
	}

	public class WeatherForecast
	{
		public DateTime Date { get; set; }

		public int TemperatureC { get; set; }

		public string Summary { get; set; }

		public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
	}
}
7. Edit Program.cs
using BlazorApp;  
using Microsoft.AspNetCore.Components.Web;  
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;  
using Smart.Blazor;  
var builder = WebAssemblyHostBuilder.CreateDefault(args);  
builder.RootComponents.Add<App>("#app");  
builder.RootComponents.Add<HeadOutlet>("head::after");  
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });  
builder.Services.AddSmart();  
await builder.Build().RunAsync(); 

8. Start the app and check the result
dotnet watch run

Wait for the app to display that it's listening on http://localhost:5000 and then, open a browser and navigate to that address.
Once you get to the following page, you have successfully run your first Blazor WebAssembly app using Smart UI for Blazor Components!

Output





Uncategorized

Leave a comment

Angular 14

We are happy to announce that the latest version of our Angular UI library smart-webcomponents-angular is tested and ready to use in your Angular 14 projects.
Angular

Leave a comment

Smart UI 14

Smart UI v14.0.0 Release, Apr-18-2022

What's New:

  • Barcode - new Barcode component.
  • QR code - new QR code component.

What's Fixed:

  • Kanban - updated kanban scss. The new change enables additional style for the Kanban board.
  • Kanban - new columnWidth property. Allows horizontal scrolling in Kanban boards.
  • Kanban - new dialogRendered property. Allows custom dialogs for Kanban boards.
  • Window - new API for move, updateContent, updateLabel.
  • Input - bug fix for selectedValues.
  • Grid - autoHideGroupColumn bug fix. The column did not appear after the group is removed.
  • Grid - sort problem in tree grid mode. Sorting was not operating correctly when the Grid was in tree mode.
  • Grid - undo/redo enable after init. Undo-redo is now enabled after the Grid is fully initialized.
  • Table - filtering, column menu and virtualization wrong rendering.
  • Input - create from option tag.
Uncategorized

Leave a comment

Smart UI 13.1.26

Smart UI v13.1.26 Release, Apr-05-2022


What's New:

  • Grid - New cell editor for color input.
  • Kanban - color entire column surface. The property applies different rendering to the kanban.
  • Kanban - column summary footer.

What's Improved:

  • Tree - selection API with getselectedvalues, setselectedvalues, unselectvalues methods.
  • Grid - styling API with setRowStyle and setCellStyle methods.
  • Docking layout - insert API with insertFloatingWindow method.
  • Datetimepicker - set/get API with setDate and getDate methods.

What's Fixed:

  • Grid - sort indexes bug fix. Improve sort event API.
  • Grid - dialog editors layout was not rendering correctly when the columns count is changed dynamically.
  • Blazor table - when the Table is created from html table, the buttons and anchors in TD tags with click events were not raising the events.
  • Blazor - fix for GetPropertyValueAsync method.
  • Table - Fix for templates settings with setValue method.
  • Docking layout - headerbuttons bug fix for keeping the state of the property.
  • Docking layout - dock/undock id bug fix for keeping the id property.
  • Kanban - Fix for taskUpdate event which did not fire correctly.
  • Dateinput - Fix for changing the date while the calendar is opened.
  • Grid - summary placeholder css class conflict when the Grid is used along with Bootstrap.
  • Grid - reorder drop line rendering. The reorder drop line was not rendered correctly when the Grid has margin.
Angular, HTML Elements, Javascript, React, Smart Grid

Leave a comment

Smart UI 13.1.0

Smart UI v13.1.0 Release, Mar-23-2022

What's New:

  • Kanban - UI Virtualization. This new feature allows working with 100,000+ Kanban tasks.
  • Grid - Undo/Redo for add, remove and update of Grid rows.
  • Scheduler: Video Conference Template.
  • Editor: spellcheck property - defines whether the Editor may be checked for spelling errors.

What's Improved:

  • Grid: New property editing.autoUpdateFilterAndSort. It determines whether an applied filtering and sorting will be re-applied after editing.
  • Grid: Displays specific notification if all rows are filtered.
  • Grid: Grouping rendering style.
  • Grid: Fixed columns with Drag and Drop. Automatically adds or removes fixed columns.
  • Grid: Auto-hide Grouped columns.
  • Grid: New Grouping Events.
  • Grid: Row editing history.
  • Grid: Image cell editor restrictions for upload size and number of images.
  • Grid: Performance when having date & number formatting in cells.
  • Grid: Events for the Comments.
  • Input: Selection API. The data source items now may include a 'selected' property and a new 'selectedValue' property is available.
  • Kanban: Custom Multi combo Input task field.
  • Kanban: Custom Image task field.
  • jqxDate: isValid method.

What's Fixed:

  • Grid: Summary was not updated after filtering.
  • Grid: Merged cells after editing.
  • Grid: Comments sync between Grid and Kanban.
  • Grid: Row style not applied after sorting.
  • Grid: Auto height not working correctly with the header bar turned on.
  • Grid: Filtering in Tree Grid mode.
  • Grid: Add new row with button not working in server-side mode.
  • Grid: Summary dialog auto-close on horizontal scroll.
  • Grid: Dropdownlist and auto-complete editors bug fixes when the editors with custom data source.
  • Grid: Textarea editor with Tab and Escape keys was not working.
  • Grid: Update editor after Grid data source update.
  • Grid: Image cell editor bug.
  • Grid: Right-to-Left layout rendering issue.
  • Number Input: Not working correctly with Percentages.
  • Password Input: Readonly not working.
  • Multi combo Input: Readonly open/close issue.
  • Multi combo Input selectedItems issue.
  • Date Input: calendar navigation & localization issues.
  • Datetime Picker: change event bug.
  • Scheduler: Video conferencing button click handler.

Breaking changes:

  • SCSS: .input-group is renamed to .smart-input-group.
  • Grid: onRowInserted - In the new version all parameters are with array type.
  • Grid: onRowRemoved - In the new version all parameters are with array type.
  • Grid: onCellUpdate - In the new version all parameters are with array type.
  • Grid: onRowUpdate - In the new version all parameters are with array type.
  • The above changes are because the Grid now allows CRUD via API and UI of multiple records and now we group them into a single callback call instead of multiple calls.
  • Angular, HTML Elements, Javascript, React, Smart Accordion, Smart Button, Smart Calendar, Smart ComboBox, Smart Context Menu, Smart Grid, Smart ListBox, Smart Tabs, Smart.Chart, Uncategorized, Vue, Web Components
    , , , , ,

    Leave a comment

    Smart UI Desktop App with Blazor and Windows Forms

    Blazor - Desktop Crossplatform

    Getting Started

    This tutorial will show you how you can use Smart components in a Blazor Desktop app with .NET 6, running in both a web browser and in WinForms.

    Prerequisites

    • Visual Studio 2022
    • .NET 6 SDK

    Before getting started you need to have Visual Studio 2022 with .NET 6 SDK installed.

    Blazor Server App

    First, we will start by opening Visual Studio 2022 and creating a Blazor Server App called CrossPlatformBlazor with target framework .NET 6.0

    Create Blazor Server App

    Then we need to add Smart.Blazor NuGet package to the project.

    Smart NuGet Blazor Server

    Open the \_Imports.razor file and add `@using Smart.Blazor`.
    Then open the \Pages\_Layout.cshtml file and include a theme CSS file by adding this snippet:

      <link href="_content/Smart.Blazor/css/smart.default.css" rel="stylesheet" />
            
    and Smart source files by adding this snipet:
      <script src="_content/Smart.Blazor/js/smart.blazor.js"><script>
      <script src="_content/Smart.Blazor/js/smart.elements.js"></script>
            

    The next step is to open the Program.cs file and to add builder.Services.AddSmart(); and using Smart.Blazor; in the using statements.

    After that Program.cs file should look like this:

        using CrossPlatformBlazor.Data;
        using Microsoft.AspNetCore.Components;
        using Microsoft.AspNetCore.Components.Web;
        using Smart.Blazor;
    
        var builder = WebApplication.CreateBuilder(args);
    
        // Add services to the container.
        builder.Services.AddRazorPages();
        builder.Services.AddServerSideBlazor();
        builder.Services.AddSingleton<WeatherForecastService>();
        // Add Smart UI for Blazor.  
        builder.Services.AddSmart();
        
        var app = builder.Build();
        
        // Configure the HTTP request pipeline.
        if (!app.Environment.IsDevelopment())
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
    
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.MapBlazorHub();
        app.MapFallbackToPage("/_Host");
    
        app.Run();
    
            

    Now you can open the \Pages\Index.razor file and paste the following code:

        @page "/"
        @using CrossPlatformBlazor.Data
        
        @inject WeatherForecastService ForecastService
        
        <h1>Weather forecast</h1>
        
        <p>This component demonstrates fetching data from the server.</p>
        
        @if (forecasts == null)
        {
          <p><em>Loading...</em></p>
        }
        else
        {
          <Table Selection="true" SortMode="TableSortMode.One" class="table">
            <table>
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Temp. (C)</th>
                  <th>Temp. (F)</th>
                  <th>Summary</th>
                </tr>
              </thead>
              <tbody>
                @foreach (var forecast in forecasts)
                {
                  <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                  </tr>
                }
              </tbody>
            </table>
          </Table>
        }
        
        @code {
          private WeatherForecast[] forecasts;
        
          protected override async Task OnInitializedAsync()
          {
            forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
          }
        }
          

    We are ready with the web part of our application. If you run the project you should see the following result:

    Blazor Server Result

    Windows Forms Blazor

    The next step is to add a new Windows Forms App to the solution. We will name it WinFormsBlazor.

    Create WinForms App

    Add the Smart.Blazor and Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet packages to the project.

    WinForms NuGet Packages
    After that add a wwwroot folder which should contain an index.html file and a css folder.
    You can copy the css folder from CrossPlatformBlazor project's wwwroot folder and the index.html file should look like this:

        <!DOCTYPE html>
        <html>
    
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <title>Blazor WinForms app</title>
            <base href="/" />
            <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
            <link href="css/site.css" rel="stylesheet" />
            <link href="WinFormsBlazor.styles.css" rel="stylesheet" />
            <link href="_content/Smart.Blazor/css/smart.default.css" rel="stylesheet" />
    
        </head>
    
        <body>
    
            <div id="app"></div>
    
            <div id="blazor-error-ui">
                An unhandled error has occurred.
                <a href="" class="reload">Reload</a>
                <a class="dismiss">🗙</a>
            </div>
    
            <script src="_framework/blazor.webview.js"></script>
            <script src="_content/Smart.Blazor/js/smart.blazor.js"></script>
            <script src="_content/Smart.Blazor/js/smart.elements.js"></script>
        </body>
    
        </html>
            

    Blazor Class Library

    We will extract the code shared between the Blazor Desktop app and the Blazor Server app in a separate Razor Class Library that we will call BlazorClassLibrary.
    Create Razor Class Library
    Again, add Smart.Blazor NuGet package to the project.

    Then in the project file BlazorClassLibrary.csproj replace:

        <Nullable>enable</Nullable>
            
    with
        <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
            
    and add:
        <ItemGroup>
            <FrameworkReference Include="Microsoft.AspNetCore.App" /> 
        </ItemGroup>
            
    Note, that you need to add a reference to the class library in the Blazor Server App and the Windows Forms App by right-clicking on them and choosing Add Project Refrence...
    Project References
    Now you can move Data, Pages, Shared and wwwroot folders and _Imports.razor and App.Razor files from CrossPlatformBlazor to BlazorClassLibrary.
    Moved Files
    Then you should fix the reference of ILogger inside \Pages\Error.cshtml.cs by adding:
        using Microsoft.Extensions.Logging;
            
    Inside _Imports.razor replace:
        @using CrossPlatformBlazor
        @using CrossPlatformBlazor.Shared
            
    with
        @using BlazorClassLibrary 
        @using BlazorClassLibrary.Shared
            
    Inside \Pages\_Layout.cshtml file you need to change the references of the css files by replacing:
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link href="css/site.css" rel="stylesheet" />
            
    with
        <link rel="stylesheet" href="_content/BlazorClassLibrary/css/bootstrap/bootstrap.min.css" />
        <link href="_content/BlazorClassLibrary/css/site.css" rel="stylesheet" />
            
    And finally, inside \Pages\_Host.cshtml add:
        @using BlazorClassLibrary
            

    Final Configurations

    Lastly, in the WinFormsBlazor project you should open the Form1.cs file and paste this code:

        using BlazorClassLibrary;
        using CrossPlatformBlazor.Data;
        using Microsoft.AspNetCore.Components.WebView.WindowsForms;
        using Microsoft.Extensions.DependencyInjection;
        using Smart.Blazor;
    
        namespace WinFormsBlazor
        {
            public partial class Form1 : System.Windows.Forms.Form
            {
                public Form1()
                {
                    var serviceCollection = new ServiceCollection();
                    serviceCollection.AddBlazorWebView();
                
                    serviceCollection.AddSingleton<WeatherForecastService>();
                
                    serviceCollection.AddSmart();
                
                    InitializeComponent();
                
                    blazorWebView1.HostPage = @"wwwroot\index.html";
                    blazorWebView1.Services = serviceCollection.BuildServiceProvider();
                    blazorWebView1.RootComponents.Add<App>("#app");
                }
            }
        }
            
    Then open also the Form1.Designer.cs file and paste the following code:
        namespace WinFormsBlazor
        {
            partial class Form1
            {
                /// <summary>
                ///  Required designer variable.
                /// </summary>
                private System.ComponentModel.IContainer components = null;
                
                /// <summary>
                ///  Clean up any resources being used.
                /// </summary>
                /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
                protected override void Dispose(bool disposing)
                {
                    if (disposing && (components != null))
                    {
                        components.Dispose();
                    }
                    base.Dispose(disposing);
                }
              
                #region Windows Form Designer generated code
              
                /// <summary>
                ///  Required method for Designer support - do not modify
                ///  the contents of this method with the code editor.
                /// </summary>
                private void InitializeComponent()
                {
                    this.blazorWebView1 = new Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView();
                    this.SuspendLayout();
                    // 
                    // blazorWebView1
                    // 
                    this.blazorWebView1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom) 
                    | System.Windows.Forms.AnchorStyles.Left) 
                    | System.Windows.Forms.AnchorStyles.Right)));
                    this.blazorWebView1.Location = new System.Drawing.Point(3, 7);
                    this.blazorWebView1.Name = "blazorWebView1";
                    this.blazorWebView1.Size = new System.Drawing.Size(796, 436);
                    this.blazorWebView1.TabIndex = 20;
                    // 
                    // Form1
                    // 
                    this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 20F);
                    this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
                    this.ClientSize = new System.Drawing.Size(800, 450);
                    this.Controls.Add(this.blazorWebView1);
                    this.Name = "Form1";
                    this.Text = "Form1";
                    this.ResumeLayout(false);
                
                }
              
                #endregion
              
                private Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView blazorWebView1;
            }
        }
          
    The last thing you need to do is to open the WinFormsBlazor's project file WinFormsBlazor.csproj and change the first line to:
        <Project Sdk="Microsoft.NET.Sdk.Razor">
          
    and add the following lines:
        <ItemGroup>
          <Content Update="wwwroot\**">
            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
          </Content>
        </ItemGroup>
        
        <ItemGroup>
          <Content Update="wwwroot\css\site.css">
            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
            <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
            <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
          </Content>
        </ItemGroup>
          

    Now if you start both the CrossPlatformBlazor and WinFormsBlazor projects you should get the following result:
    Blazor CrossPlatform

    Uncategorized
    , , , , ,

    Leave a comment

    Smart UI v12.0.0

    Smart UI v12.0.0 Release, Jan-20-2022

    What's New:

    • Kanban Edit Task dialog.
    • Kanban Color entire Task card.
    • Kanban Dynamic Task Card Priority Menu.
    • Kanban Dynamic Task Card Subtasks Menu.
    • Kanban option to hide columns and reset the hidden columns.
    • Grid show/hide columns dialog is extended with Reset option.
    • Grid Summary row option to edit dynamically the summaries.
    • Grid Summary row dynamically re-calculated based on user selection & filtering.
    • Grid Tags template, Image Template and List Template. Improves the cells rendering for specific column types.
    • Grid Row Edit history dialog, when the user and users properties are set.

    What's Fixed:

    • Fixed an issue in the Grid component about MultiComboInput editor cells rendering when color items are selected.
    • Fixed an issue in the Grid component about row resizing. After a row is resized, occasionally the row selection was broken.
    • Fixed an issue in the Grid component about DateTimePicker editor. When editing a date cell and pressing Enter key the value was not saved.
    • Fixed an issue in the Grid component about editing validation.
    • Fixed an issue in the Grid component about row editing with dialog. Editors with "autoOpen" property were incorrectly opened in the dialog.
    • Fixed an issue in the Grid component about the max-height setting when the Grid's toolbar is displayed.
    • Fixed an issue in the NumberInput component when editing percentages.
    • Fixed an issue in the Kanban component about Task editing. The 'change' event was incorrectly fired.
    • Fixed an issue in the Kanban component about the rendering of the add new task buttons.
    • Fixed an issue in the Blazor DateInput about the DateTimeFormat property setting.
    Angular, HTML Elements, Javascript, React, Smart Accordion, Smart Button, Smart Calendar, Smart ComboBox, Smart Grid, Smart ListBox, Smart Tabs, Smart.Chart, Vue, Web Components
    , ,

    Leave a comment

    Smart UI for Blazor v11.0.38 Release, Jan-03-2022

    We are happy to announce that we have just released the first version of Smart.Blazor for this year. The Gantt Chart, Kanban, Grid, Scheduler & Editor come with major new features. More than 70 new documentation help tutorials and 100+ examples are in our updated blazor demos page: https://www.htmlelements.com/blazor/blazor-ui/demos/

    Please, find below the list of changes:

    • Kanban Edit Task dialog - the dialog now shows subtasks, activity and comments in separate tabs. The color and tags input are updated.
    • Kanban Color entire task card - the task color can be used for coloring the entire card instead of the small status area.
    • Gantt Chart - task deadline.
    • Gantt Chart - Tooltips for the tasks. connections, resources, segments and indicators.
    • Gantt Chart - task baseline which shows the planned dataStart/dateEnd for the tasks.
    • Gantt Chart - task segments. Tasks can now be segmented into multiple sub-tasks on a single line.
    • Gantt Chart - task indicators. Task indicators show different events base on their date inside the corresponding task row.
    • Gantt Chart - date markers. Markers designate specific dates with a vertical line across the timeline.
    • Gantt Chart - New Task editing Dialog. Added tabs with general/ dependency and segments sections which allow to view and modify the connections related to the task and it's segments.
    • Gantt Chart - current time indicator and shader. Similarly to Smart.Scheduler, added current time indicator and shader that show the current time inside the timeline.
    • Grid - Slider, MultiInput, Password & Image Editors.
    • Grid - Multi-users mode. You can add Users and choose a current user in the Grid. Users can add comments and the current user data is displayed in 'Modified by' and 'Created by' columns.
    • Grid - Added new options to Add new column dialog. You can dynamically create new columns with custom Grid editors by using the "add column dialog".
    • Editor - Added a new feature - a property that enables/disables the ability to remove inline styles when executing the clearFormat.
    • Scheduler - added resource sorting ability via 3 new properties: sortBy, sorOrder, sortFunction.
    • Scheduler - show events with 0 duration (same start/end dates).
    • Phone Input and Country Input components
    • Grid Add new column dialog
    • New Demos & Help Tutorials


    Uncategorized

    Leave a comment

    Smart UI v11.0.0

    Smart UI v11.0.0 Release, Nov-30-2021

    What's New:

    • Gantt Chart - task deadline.
    • Gantt Chart - Tooltips for the tasks. connections, resources, segments and indicators.
    • Gantt Chart - task baseline which shows the planned dataStart/dateEnd for the tasks.
    • Gantt Chart - task segments. Tasks can now be segmented into multiple sub-tasks on a single line.
    • Gantt Chart - task indicators. Task indicators show different events base on their date inside the corresponding task row.
    • Gantt Chart - date markers. Markers designate specific dates with a vertical line across the timeline.
    • Gantt Chart - New Task editing Dialog. Added tabs with general/ dependency and segments sections which allow to view and modify the connections related to the task and it's segments.
    • Gantt Chart - current time indicator and shader. Similarly to Smart.Scheduler, added current time indicator and shader that show the current time inside the timeline.
    • Grid - Slider, MultiInput, Password & Image Editors.
    • Grid - Multi-users mode. You can add Users and choose a current user in the Grid. Users can add comments and the current user data is displayed in 'Modified by' and 'Created by' columns.
    • Grid - Added new options to Add new column dialog. You can dynamically create new columns with custom Grid editors by using the "add column dialog".
    • Editor - Added a new feature - a property that enables/disables the ability to remove inline styles when executing the clearFormat.
    • Scheduler - added resource sorting ability via 3 new properties: sortBy, sorOrder, sortFunction.
    • Scheduler - show events with 0 duration (same start/end dates).
    • Phone Input and Country Input components

    What's Fixed:

    • Fixed an issue in Grid's Slider Editor. When the editor's popup is outside the Grid bounds, the editor was auto closed.
    • Fixed an issue in Grid's setCellValue method. The passed value was not validated.
    • Fixed an issue in Grid's data row update. The rows array was not updated after a new row is added.
    • Fixed an issue in Editor about mobile device usage.
    • Fixed an issue in Scheduler about itemUpdate not being fired after updating an event exception.
    Angular, HTML Elements, Javascript, React, Vue, Web Components
    , ,

    Leave a comment

    Smart UI v10.0.0

    Smart UI v10.0.0 Release, August-16-2021

    What's New:

    • Gantt Chart Virtualization. That feature allows you to load thousands of tasks in a gantt.
    • Gantt Chart API Updates and Changes. Addional methods, properties and events are added.
    • Kanban Column Reorder.
    • Kanban Column Edit.
    • Kanban Dynamic Task Add with UI.
    • Kanban Dynamic Tags in the edit dialog.
    • Kanban Column Menu. Allows you to collapse, edit, remove column.
    • Grid Filter Menu rendering. The filter options display icons in the popup and a match-case option is added.
    • Grid Virtual scroll rendering. Updated the UI visualization while scrolling.
    • Grid API. Additional event details, methods and properties are available.
    • Scheduler Timeline Week view. Added an options to hide the hours in the timeline week view.

    Breaking Changes:

    • Gantt Chart Sorting and Filtering API is changed.
    Angular, HTML Elements, Javascript, React, Vue, Web Components

    Leave a comment

    Smart UI v9.4.1

    Smart UI v9.4.1 Release, July-07-2021


    What's New:


    • Editor Find & Replace
    • Editor Context Menu
    • Grid API Updates
    • Grid Performance Updates
    • Editor Content Filtering
    • Editor Toolbar Ribbon mode
    Uncategorized

    Leave a comment

    Smart UI 9.3.0

    Smart UI v9.3.0 Release, May-10-2021

    What's New:

    • Bootstrap Theme
    • SCSS Theme files for easier styling
    • HTML & Markdown Editor
    • Bootstrap Admin Dashboard Template
    • Table Performance with UI Virtualization
    • Angular Stackblitz Examples
    • Blazor CardView callback functions support
    • Blazor Grid Editing API
    Angular, Javascript, React, Vue, Web Components
    , , , , , , ,

    Leave a comment

    Bootstrap Admin Dashboard Template

    We are happy to announce the availability of our New Admin Dashboard Template: Bootstrap Admin Template. This template aims to demonstrate the usage of Smart UI along with Bootstrap. Smart UI now features a brand new Bootstrap Theme included in the download package. All Smart UI components natively integrate into Bootstrap-driven layouts. That means that now it is easier than ever to achieve web application adaptivity and consistent look across browsers and devices using jQWidgets products.

    Bootstrap Admin Template
    Angular, HTML Elements, Javascript, React
    , , , , , , , , , , , ,

    Leave a comment

    Smart UI R1 2021 Release Is Here

    Smart UI Release is Here!


    The first release of 2021 of Smart UI is available, bringing many advanced features and updates across our Javascript & Blazor libraries

    Admin Dashboard Template UX Theme

    What's New:

    • Admin Dashboard Templates
    • Scheduler for Blazor
    • Server-side Scheduler model
    • Scheduler Filtering
    • Scheduler Google Calendar Sync
    • Blazor Performance Improvements
    • Scheduler Rendering Performance Improvements


    Download Free Trial: https://www.htmlelements.com/download/
    License: https://www.jqwidgets.com/license/

    Happy coding, The jQWidgets & Smart UI Team
    Angular, HTML Elements, Javascript, React, Smart Accordion, Smart Button, Smart Calendar, Smart ComboBox, Smart Context Menu, Smart Grid, Smart ListBox, Smart Tabs, Smart.Chart, Vue, Web Components
    , , , , , , , , , , , ,

    Leave a comment

    Smart UI 9.0.0

    We are happy to announce the new version of Smart UI. The major new thing in this release is the new feature-complete Scheduler component.

    What's New:

    • Scheduler for Javascript, Angular, React, Vue
    • Server-side Table model
    • Server-side CardView model
    • Server-side Kanban model
    • Server-side Pivot-table model
    • Pivot Table Selection Details
    • Pivot Table Charts
    • Pivot Table Sort by Row
    • Datagrid bind to CSV, TSV, XML, JSON
    • Table HTML Virtualization
    Angular, HTML Elements, Javascript, React, Smart Grid, Vue, Web Components

    Leave a comment

    Smart UI 8.1.1

    We are happy to announce the new version of our software.

    What's New:
    • Microsoft Blazor Components
    • Server-side Grid model
    • Table column resize
    • Table column hierarchy
    • Table formulas support
    • Router component

    You can get the new production build from: Download
    Angular, Javascript, React, Vue, Web Components

    Leave a comment

    Blazor Component Library

    Blazor Components

    We are happy to announce Smart UI for Microsoft Blazor. Both server-side and client-side (WASM) Blazor are supported.

    What's Included:
    • 60+ fast, modern, lightweight, and responsive UI components for Blazor in a single Nuget package
    • Easy installation
    • 14 UI Themes and customization through a Theme Builder tool
    • A wide range of product demos
    • All the blazor components are mobile friendly and render adaptively based on the device.
    • Optimal user experience on phones, tablets, and desktops
    • Supports both Blazor server-side and client-side (WebAssembly) applications
    • .NET 5.0 Release Candidate (RC1) compatibility support


    Demos: Smart UI Blazor Demos

    Uncategorized
    , , , , , , ,

    2 Comments

    Smart UI for Vue 3

    Vue 3 is faster, smaller, more maintainable and it's easier to target native.


    Composition API

    One of the most significant changes is that a new API that will allow for a function-based way of writing your component, inspired by React Hooks. It lets you encapsulate logic into "composition functions" and reuse that logic across component

    Other changes in Vue 3 compared to Vue 2


    Virtual DOM rewrite for better performance and improved TypeScript support
    Native portals – now called Teleport
    Fragments (virtual elements that won't be rendered in the DOM tree)
    More flexibility for global mounting
    Conditional suspending of component rendering

    Smart UI for Vue 3


    Smart UI for Vue 3 is available at: https://www.htmlelements.com/vue/.
    All components are fully available and tested for Vue 3 web development. API & Getting Started Docs for Vue 3 have been added to https://www.htmlelements.com/docs/
    Smart Accordion, Smart Button, Smart Calendar, Smart ComboBox, Smart Context Menu, Smart Grid, Smart ListBox, Smart Tabs, Smart.Chart, Vue
    , , ,

    Leave a comment

    Smart UI v8.0.0

    Smart UI v8.0.0 Release, Sep-15-2020

    What's New:

    • Pivot Table component
    • Number Input component
    • Date Input component
    • Time Input component
    • ButtonGroup component
    • Table custom sorting
    • Table new checkbox selection
    • Table state maintenance
    • Table Conditional Formatting
    • Table Localization
    • Grid Edit validation
    • Grid Add new column
    • Grid Edit Column Label
    • Grid Edit Column Description
    • Grid New Masked Text Editor
    • Grid Grouping with Paging
    • Grid Cells Wrap on Demand
    • Grid Conditional Formatting
    Angular, HTML Elements, Javascript, React, Web Components
    , ,

    Leave a comment

    Blazor Components coming soon

    Blazor UI Components



    A week ago, we released our jQWidgets Blazor UI components: https://blazor.jqwidgets.com/. Now, we plan to do the same for our Smart product line.

    What is Blazor?


    Blazor is a new UI framework that was included in .NET Core 3. Blazor server-side and WebAssembly are both now shipping as part of .NET Core 3.2.0. Conceptually, Blazor is more like Angular or React rather than ASP.NET MVC. It’s a component-based framework for building rich and interactive web applications. The main difference between Blazor and traditional JavaScript frameworks is that Blazor components are written entirely in C# and Razor. No JavaScript required! Web apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.

    Blazor has two models: Server and WebAssembly. The server model was shipped with .NET Core 3. At that time, WebAssembly was still in preview, but has now been fully released with Blazor 3.2. Both are now production ready. Code running in the browser executes in the same security sandbox as JavaScript frameworks. Blazor code executing on the server has the flexibility to do anything you would normally do on the server, such as connecting directly to a database.

    What is WebAssembly

    WebAssembly (abbreviated “Wasm”) is an instruction set designed to run on any host capable of interpreting those instructions, or compiling them to native machine code and executing them.
    Wasm is an instruction set that is formatted in a specific binary format. Any host (hardware or software) that adheres to this specification is therefore capable of reading binaries and executing them – either interpreted, or by compiling directly to machine language specific to the device.
    Wasm is akin to the common instruction set (Common Intermediate Language) that .NET source code compiles to. Just like .NET, Wasm can be generated from higher languages such as C#.

    Our new components will support both: Blazor WebAssembly hosting model and Blazor Server hosting model.

    Below is an image of a Smart.Button Blazor component.

    Blazor Button Component

    When is the first release of Smart UI for Blazor?

    Our plans are to release an early preview of Smart UI for Blazor by end of October and provide demos and documentation for most of the components, we currently have like DataGrid, Charting, Kanban, Table, CardView, etc. The installation would be through a NuGet package. Github repo for posting issues and feature request will also be available.
    For those of you who want to create Blazor applications with our components NOW, please refer to our help tutorial here: https://www.htmlelements.com/docs/blazor/

    Update 07-July-2021

    Smart.Blazor NUGET package is available. All Blazor demos are available here: https://www.htmlelements.com/blazor/
    HTML Elements, Web Components
    , , , , ,

    Leave a comment

    Angular RxJS with DataGrid

    Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change. RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. In this blog post we will show how to use our Angular DataGrid component with RxJS.

    angular datagrid rxjs observable

    Observable creation functions

    RxJS offers a number of functions that can be used to create new observables. These functions can simplify the process of creating observables from things such as events, timers, promises, and so on. For example

    Using Smart.Grid with RxJS

    In order to use our DataGrid with Angular and RxJS, you will need to do the following: 1. Create a new Angular project. 2. Install smart-webcomponents-angular vie npm install smart-webcomponents-angular or ng add smart-webcomponents-angular 3. Import the Smart.Grid module in app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { GridModule } from 'smart-webcomponents-angular/grid';
    import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';
    import { HttpClientModule } from '@angular/common/http';
    @NgModule({
        declarations: [ AppComponent ],
        imports: [ BrowserModule, FormsModule, GridModule, HttpClientModule ],
        bootstrap: [ AppComponent ],
    	entryComponents: [ AppComponent ]
    })
    export class AppModule { }
    
    4. Edit app.component.ts

    import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from '@angular/core';
    import { GridComponent, GridColumn, DataAdapter, Smart } from 'smart-webcomponents-angular/grid';
    import { GetData } from './data'
    import { Observable, from  } from 'rxjs';
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent implements AfterViewInit {
    	@ViewChild("grid", { read: GridComponent, static: false }) grid: GridComponent;
        // setup Datagrid's price column template.
        changeTemplate(formatObject: any) {
            const value: number = formatObject.value, opacity: number = Math.abs(value) / 100;
            if (value < 0) {
                formatObject.cell.background = `rgba(229, 57, 53, ${opacity})`;
            }
            else if (value > 0) {
                formatObject.cell.background = `rgba(67, 160, 71, ${opacity})`;
            }
            formatObject.template = value + '%';
        }
    	// setup Datagrid appearance.
    	appearance = {
            alternationCount: 2,
            showColumnLines: false,
            showColumnHeaderLines: false
        };
    	// setup Datagrid columns resize.
        behavior = { columnResizeMode: 'growAndShrink' };
        // setup Datagrid data source.
        dataSource = new window.Smart.DataAdapter({
            dataSource: [],
            dataFields: [
                'commodity: string',
                'price: number',
                'priceChange: number',
                'day: number',
                'week: number',
                'month: number',
                'year: number',
                'date: date'
            ]
        });
    	// setup Datagrid columns.
        columns = [
            { label: 'Commodity', dataField: 'commodity' },
            {
                label: 'Price', dataField: 'price', align: 'left', cellsAlign: 'left', template: function (formatObject: any) {
                    const value: number = formatObject.value.toFixed(2);
    				const priceChange: number = (this as any).grid.dataSource[formatObject.row.index].priceChange;
      			    if (priceChange === 0) {
                        formatObject.template = value;
                    }
                    else {
                        formatObject.template = `
    ${priceChange}
    ${value}`;
                    }
                }
            },
            { label: 'Weekly', dataField: 'week', template: this.changeTemplate },
            { label: 'Monthly', dataField: 'month', template: this.changeTemplate },
            { label: 'Yearly', dataField: 'year', template: this.changeTemplate }
        ];
        ngAfterViewInit(): void {
    		const that = this;
    		// init demo server.
    		const demoServer = this.setupDemoServer(),
    		initServer = demoServer.init(),
    		serverData = demoServer.getData();
    	  	initServer.subscribe(function(dataRows) {
    		that.dataSource = new window.Smart.DataAdapter({
    				dataSource: dataRows.slice(0),
    				dataFields: [
    					'commodity: string',
    					'price: number',
    					'priceChange: number',
    					'day: number',
    					'week: number',
    					'month: number',
    					'year: number',
    					'date: date'
    				]
    			});
    		serverData.subscribe(function(rows) {
    				// suspend updates.
    				that.grid.beginUpdate();
    				// update cell values.
    				for(let i = 0; i < that.grid.rows.length; i++) {
    					const row = that.grid.rows[i];
    					const priceCell = row.getCell('price');
    					const priceCellChange = row.getCell('priceChange');
    					row.data.priceChange = rows[i].priceChange;
    					row.data.price = rows[i].price;
    				}
    				// resume updates.
    				that.grid.endUpdate();
    		  });
    		});
        }
    	// setup demo server.
    	setupDemoServer() {
    	  function demoServer() {
    		'use strict';
    		this.dataRows = [];
    	  }
    	  // init server and fetch data from url.
    	  demoServer.prototype.init = function() {
    		return from(
    		  new Promise((resolve, reject) => {
    			  fetch('https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/data.json')
    			  .then(response => response.json())
    			  .then(data => {
    					let dataSet = data;
    					this.dataRows = dataSet.map((value) => {
    						const newData = Object.assign(value);
    						newData.priceChange = 0;
    						return newData;
    					});
    					resolve(this.dataRows);
    			  });
    		  })
    		);
    	  };
          // get data and update it every 1s using Observable.
    	  demoServer.prototype.getData = function() {
    		const that = Object(this);
    		// dynamic updates.
    		return Observable.create(function(observer) {
    		  const interval = setInterval(() =>{
    			for (let i = 0; i < that.dataRows.length; i++) {
    			    const index = Math.floor(that.dataRows.length * Math.random());
    				const currentdataRows = that.dataRows[index];
    				let value = currentdataRows.price;
    				if (Math.random() > 3 / 5) {
    					value = value + 1e-10;
    					currentdataRows.priceChange = 0;
    					continue;
    				}
    				let valueChange = (Math.random() > 0.5 ? 1 : -1) * value * ((Math.random() * 15 + 1) / 100);
    				valueChange = parseFloat(valueChange.toFixed(2));
    				value = Math.max(1, parseFloat((value + valueChange).toFixed(2)));
    				currentdataRows.price = value;
    				currentdataRows.priceChange = valueChange;
    			}
    			observer.next(that.dataRows);
    		  }, 1000);
    		  return function() {
    			window.clearInterval(interval);
    		  };
    		});
    	  };
    	  return new demoServer();
    	}
    }
    



    Full tutorial: https://www.htmlelements.com/docs/angular-rxjs/
    Angular, Smart Grid, Web Components

    Leave a comment

    DataGrid Validation Coming soon

    DataGrid Data Validation


    The next version will include a much requested feature - Data Validation for the DataGrid component. The DataGrid control will allow you to perform validation at both the cell and row level. With cell-level validation, you validate individual properties of a bound data object when a user updates a value. With row-level validation, you validate entire data objects when a user commits changes to a row. You can also provide customized visual feedback for validation errors, or use the default visual feedback that the DataGrid control provides. The available set of validation rules are: 'min', 'max', 'minLength', 'maxLength', 'minDate', 'maxDate', 'null', 'email', 'required', 'requiredTrue' and 'pattern'.

    datagrid validation
    Uncategorized
    , , , , ,

    Leave a comment

    Shadow DOM Support with Smart UI 7.7.1

    What is Shadow DOM?


    The shadow DOM is an encapsulated version of the DOM. This allows authors to effectively isolate DOM fragments from one another, including anything that could be used as a CSS selector and the styles associated with them. Generally, any content inside of the document’s scope is referred to as the light DOM, and anything inside a shadow root is referred to as the shadow DOM.

    How to use Shadow DOM with Smart Web Components?


    The new version(7.7.1) of our library adds complete Shadow DOM support for all web components. To use the components with Shadow Dom enabled, you need to refer the "source/components" folder. When you use these components, you no longer have to add a reference to the "smart.default.css" file as all required styles by the component are included in its file.

    Example: https://www.htmlelements.com/demos/grid/shadow-dom/

    We added some useful API for importing Styles into the Shadow DOM. Each Web component has a new "addStyle" method which accepts a CSS string. There is also a "style-url" attribute. When you set that attribute during initialization time, the referred CSS file will be included into the Shadow DOM of your component.

    Why should I use Shadow DOM?

    Benefits of using Shadow DOM are CSS scoping, DOM encapsulation and composition. The web components will be isolated by the other parts of your application and there will be no CSS conflicts.
    Uncategorized
    , , , , , ,

    Leave a comment

    Reactive Form Web Component

    Reactive Form

    A new Reactive Form will arrive in Smart UI 7.7.0. It will have two types of initialization. Reactive forms use an explicit and immutable approach to managing the state of a form at a given point in time. Each change to the form state returns a new state, which maintains the integrity of the model between changes. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously. Reactive forms also provide a straightforward path to testing because you are assured that your data is consistent and predictable when requested. Any consumers of the streams have access to manipulate that data safely. The purpose of our new Form component is to provide you an awesome and modern looking Form component, which is easy customizable and will help you to deliver better and professional looking web Forms.

    Create a Form from HTML Template

    It will be possible to create a new Smart.Form from an existing HTML Form component and will add validation, AJAX submit, control states such as: 'dirty', 'touched', 'pristine', 'valid', 'invalid'.
    Example:
      const form = new Smart.Form('#profileForm', {
            firstName: ['', {
                validationRules: [
                   { type: 'required', message: 'First Name is required' },
                   { type: 'stringLength', min: 2, message: 'First Name requires minimum 2 characters' }
                ]
            }],
            lastName: ['', {
              validationRules: [{ type: 'required', message: 'Last Name is required' }]
            }
            ],
            address: new Smart.FormGroup({
              street: ['', {
                validationRules: [
                    { type: 'required', message: 'Street is required' }
                ]
              }
              ],
              city: [''],
              state: [''],
              zip: ['']
            })
          });
    

    Reactive Form UI

    Create a Form from JSON


    The Form will be created dynamically from JSON object where we specify each Form Control and Form Group. Example:
     const form = new Smart.Form('#profileForm', {
    			controls: [{
    				controlType: 'group',
    				columns: 2,
    				label: 'Employee',
    				dataField: 'employee',
    				labelPosition: 'left',
    				controls: [
    					{
    						label: 'Photo',
    						template: '<div style=" overflow: hidden;"><img width="125" src="../../images/people/andrew.png"/></div>',
    						controlType: 'template'
    					},
    					{
    						label: 'Name',
    						dataField: 'name',
    						controlType: 'group',
    						controls: [
    							{
    								dataField: 'firstName',
    								controlType: 'input',
    								label: 'First name',
    								required: true,
    								info: 'Enter first name',
    								placeholder: 'First name',
    								cssClass: 'outlined',
    								infoPosition: 'right'
    							},
    							{
    								dataField: 'lastName',
    								controlType: 'input',
    								label: 'Last name',
    								placeholder: 'Last name',
    								required: true,
    								cssClass: 'outlined',
    								info: 'Enter last name'
    							}
    						]
    					},
    					{
    						label: 'Details',
    						dataField: 'details',
    						controlType: 'group',
    						columnSpan: 2,
    						controls: [
    							{
    								dataField: 'company',
    								controlType: 'input',
    								label: 'Company',
    								placeholder: 'Company name',
    								cssClass: 'outlined',
    								required: false
    							},
    							{
    								dataField: 'address',
    								controlType: 'input',
    								label: 'Address',
    								placeholder: 'Address',
    								required: true,
    								cssClass: 'outlined'
    							},
    							{
    								dataField: 'city',
    								controlType: 'input',
    								label: 'City',
    								placeholder: 'City',
    								cssClass: 'outlined',
    								required: true
    							},
    							{
    								dataField: 'state',
    								controlType: 'dropdownlist',
    								label: 'State',
    								required: true,
    								cssClass: 'outlined',
    								controlOptions: {
    									placeholder: 'State',
    									dataSource: ['California', 'New York', 'Oregon', 'Illinois', 'Texas']
    								}
    							},
    							{
    								dataField: 'zip',
    								controlType: 'input',
    								placeholder: 'Zip',
    								cssClass: 'outlined',
    								label: 'Zip code',
    								required: true
    							}
    						]
    					}
    				]
    			},
    			{
    				controlType: 'group',
    				columns: 2,
    				controls: [
    					{
    						controlType: 'button',
    						action: 'submit',
    						label: 'Sign up',
    						cssClass: 'success',
    						align: 'right'
    					},
    					{
    						controlType: 'button',
    						action: 'reset',
    						label: 'Cancel',
    						align: 'left'
    					}
    				]
    			}
    		]}
        );
    


    The output of the above code is:

    Reactive Form Web Component
    Angular, HTML Elements, Javascript, React, Web Components
    , , , , ,

    Leave a comment

    New React UI Components, Awesome Grid Updates and more

    The newest release of Smart came out. It brings a new toolkit built for React JS and available through NPM installation. The new version also extends the Grouping and Filtering functionality of the DataGrid control and adds 4 new Input Components.

    What's New:

    • React UI Components
    • Grid Grouping Header Panel
    • Grid Search Header Panel
    • Grid Filter Header Panel
    • Grid Sort Header Panel
    • Grid Column Chooser
    • Grid Aggregates
    • Grid Grouping basic, complex and advanced rendering modes
    • Grid Filter Row
    • Grid Excel-like Filter Menu
    • Grid Row and Column Reorder
    • Grid Row and Column Drag and Drop to different UI elements
    • MultiInput, MultiComboInput, DateRangePicker Components
    • Underlined and Outlined rendering of Editors
    Uncategorized

    Leave a comment

    DataGrid Grouping Panel, Row and Column Reorder

    The next release of Smart will include awesome new DataGrid features - Group Panel, Row and Column Reorder.

    Grouping DataGrid data with Grouping panel


    Data in DataGrid can be grouped by one column or by several. When a column is used for grouping, it is added to the group panel. By default, the group panel is hidden. To make it visible, we added a boolean property. With the grouping panel, you can drag a column header to group by it and you can also sort by that column by clicking on it. To remove the DataGrid grouping, all you need to do is to drag a column from the grouping panel and drop it into the Grid.

    datagrid grouping panel

    DataGrid Row Reorder

    Row Reorder feature adds the ability for rows in a DataGrid to be reordered through user interaction with the table (click and drag / touch and drag). This feature will be turned on by using a boolean property, called "allowRowReorder". Each row will have a property called "allowReorder" which will allow you to disable the feature for a specific datagrid row.

    datagrid grouping panel

    DataGrid Column Reorder

    Column Reorder feature adds the ability for columns in a DataGrid to be reordered through user interaction with the table (click and drag / touch and drag). This feature will be turned on by using a boolean property, called "allowColumnReorder". Each column will have a property called "allowReorder" which will allow you to disable the feature for a specific datagrid column.

    datagrid grouping panel

    Uncategorized
    , , , , ,

    Leave a comment

    Do you like React? Smart UI for React is coming soon

    React is one of the most popular Javascript libraries. We are working hard on releasing Smart UI for React. Smart UI for React will be a collection of React Components, which you can use to build feature rich, native React apps. These React components are built for business applications and include features such as Localization, Accessibility and Right-to-left layouts support.
    The following demonstrates how to create a React Grid component with Smart UI for React:
    import React from "react";
    import ReactDOM from "react-dom";
    import { Smart, Grid } from 'smart-webcomponents-react/grid';
    import { GetData } from './common/data'
    class App extends React.Component {
    	behavior = {
    		columnResizeMode: 'growAndShrink'
    	}
    	appearance = {
    		alternationCount: 2,
    		showRowHeader: true,
    		showRowHeaderSelectIcon: true,
    		showRowHeaderFocusIcon: true
    	}
    	paging = {
    		enabled: true
    	}
    	pager = {
    		visible: true
    	}
    	sorting = {
    		enabled: true
    	}
    	editing = {
    		enabled: true
    	}
    	selection = {
    		enabled: true,
    		allowCellSelection: true,
    		allowRowHeaderSelection: true,
    		allowColumnHeaderSelection: true,
    		mode: 'extended'
    	}
    	dataSource = new Smart.DataAdapter({
    		dataSource: GetData(500),
    		dataFields: [
    			'id: number',
    			'firstName: string',
    			'lastName: string',
    			'productName: string',
    			'quantity: number',
    			'price: number',
    			'total: number'
    		]
    	})
    	columns = [{
    		label: 'First Name',
    		dataField: 'firstName',
    		columnGroup: 'name'
    	},
    	{
    		label: 'Last Name',
    		dataField: 'lastName',
    		columnGroup: 'name'
    	},
    	{
    		label: 'Product',
    		dataField: 'productName',
    		columnGroup: 'order'
    	},
    	{
    		label: 'Quantity',
    		dataField: 'quantity',
    		columnGroup: 'order'
    	},
    	{
    		label: 'Unit Price',
    		dataField: 'price',
    		cellsFormat: 'c2',
    		columnGroup: 'order',
    		formatFunction(settings) {
    			const rowId = settings.row;
    			const columnDataField = settings.column;
    			const template = settings.template;
    			if (settings.value >= 4) {
    				settings.cell.background = '#00A45A';
    				settings.cell.color = '#fff';
    			} else if (settings.value < 2) {
    				settings.cell.background = '#DF3800';
    				settings.cell.color = '#fff';
    			} else {
    				settings.cell.background = '#FFFDE1';
    				settings.cell.color = '#333';
    			}
    			settings.value = '$' + new Number(settings.value).toFixed(2);
    		}
    	},
    	{
    		label: 'Total',
    		dataField: 'total',
    		cellsFormat: 'c2',
    		columnGroup: 'order',
    		formatFunction(settings) {
    			const rowId = settings.row;
    			const columnDataField = settings.column;
    			const template = settings.template;
    			if (settings.value >= 20) {
    				settings.cell.background = '#00A45A';
    				settings.cell.color = '#fff';
    			}
    			if (settings.value <= 5) {
    				settings.cell.background = '#DF3800';
    				settings.cell.color = '#fff';
    			} else {
    				settings.cell.background = '#FFFDE1';
    				settings.cell.color = '#333';
    			}
    			settings.value = '$' + new Number(settings.value).toFixed(2);
    		}
    	}
    	]
    	columnGroups = [{
    		label: 'Customer Name',
    		align: 'center',
    		name: 'name'
    	},
    	{
    		label: 'Order Detals',
    		align: 'center',
    		name: 'order'
    	}
    	]
    	componentDidMount() {
    	}
    	render() {
    		return (
    			<div>
    				<div class="demo-description">The Grid in this demo displays data in a series of rows and columns. This
    			        is the simplest case when the Grid is bound to a local data source.</div>
    				<Grid
    					dataSource={this.dataSource}
    					columns={this.columns}
    					columnGroups={this.columnGroups}
    					appearance={this.appearance}
    					behavior={this.behavior}
    					selection={this.selection}
    					paging={this.paging}
    					pager={this.pager}
    					sorting={this.sorting}
    					editing={this.editing}
    					ref="grid">
    				</Grid>
    			</div>
    		);
    	}
    }
    ReactDOM.render(<App />, document.querySelector("#root"));
    export default App;
    


    Online Demo: React Grid
    Uncategorized
    , , , , ,

    Leave a comment

    New Kanban Component

    Enterprise-ready Kanban Component

    We are happy to share with you that our Smart UI 7.4.0 release, brings a new Kanban UI component. Demos are available for both Web Components & Angular here: https://www.htmlelements.com/demos/kanban/overview/ and https://www.htmlelements.com/angular/demos/kanban/overview/

    Kanban represents a UI component for mapping and visualizing each step of your process as a flow. The Kanban is usually named after the project you are assigned to work on. Every Kanban has three main sections that show the state of your tasks in the flow:

    - To Do - the area where you place the work that you plan to work on next.
    - In Progress: when you start working on a particular task/card, you have to move it to "In Progress".
    - Done: when the task is completed -> move it to Done.

    new kanban component Some of the Kanban features are:
    • Kanban Columns collapse
    • Kanban Card comments
    • Kanban User Privileges
    • Kanban Card Switch Users
    • Kanban Tasks progress
    • Kanban Tasks templates
    • Kanban Editing
    • Kanban Sorting
    • Kanban Filtering
    • Kanban Swimlanes
    • Kanban Horizontal Orientation
    • Kanban Hierarchical Tabs
    • Kanban multiple components with drag & drop
    • Kanban State maintenance
    • Kanban Drag and Drop of multiple cards
    • Kanban Keyboard navigation
    • Kanban Export to Excel & PDF
    • Kanban Right to left layout
    • Kanban Accessibility
    Angular, HTML Elements, Javascript
    , ,

    2 Comments

    Visual Studio Code Snippets for Smart UI

    **Now includes Grid Snippets

    This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.

    Type part of a snippet, press enter, and the snippet unfolds.

    Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (macOS) to activate snippets from within the editor.

    Command Purpose
    express: Add simple Express server file to workspace Adds Node.js express server
    Snippet Purpose
    smart-grid-component grid component
    smart-grid-module grid module
    Snippet Purpose
    smart-grid <smart-grid> control with template reference variable
    1. Install Visual Studio Code 1.10.0 or higher
    2. Launch Code
    3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
    4. Select Install Extension
    5. Choose the extension
    6. Reload Visual Studio Code
    Angular

    Leave a comment

    Angular Modules

    Using Smart with Angular just became easier. We are happy to announce that Smart ver. 7 brings Angular Modules and Components as part of the Professional package. API Documentation for Angular and Typescript is also available and the Typescript definitions have been optimized and updated. All online examples are available in Typescript, too.

    To learn how to use Smart for Angular, please navigate to https://www.htmlelements.com/docs/angular-cli/.
    Angular

    Leave a comment

    Typescript Definitions Updated

    • Exported Typescript Union types as Enums
    • Optimized Typescript files size
    • Updated the Functions Typescript definitions
    • Updated types and descriptions for all API members
    Web Components

    Leave a comment

    New Web Components Showcase Demos

    We just published new showcase examples built with Smart Web Components.

    Flights Booking demo uses the following UI components: Accordion, Tabs, Grid, DateTimePicker, Menu, DropDownList, Inputs and Buttons

    Flights Booking



    Doctor Dashboard demo uses the following UI components: Grid, Chart, Calendar, Menu, DateTimePicker, Listbox, Inputs and Buttons

    Doctors Dashboard



    QA Dashboard demo uses the following UI components: Grid, Rating, Google Maps, Card, Menu

    QA Dashboard



    Shopping demo uses the following UI components: Grid, Menu, Inputs, DropDownList, Buttons

    Shopping

    HTML Elements, Smart Grid, Smart ListBox, Smart Tabs, Smart.Chart, Web Components
    , , , , , , , , , , ,

    Leave a comment

    Typescript definitions

    We are happy to announce that we just released a new version of our product, which brings Typescript definitions for all web components. This means that now you can use our Web Components with intelliSense support and also compile time type-checking.

    To learn how to use Smart Web Components with Typescript, please refer to: Typescript for Web Components
    Web Components
    ,

    Leave a comment

    Typescript Web Components

    Typescript Web Components



    Typescript support comes with the next version of Smart Web Components. We are super excited about this. We will expose Interfaces, Types and Classes for all our stuff. Each API member will include descriptions, which will help you to use our product and see the intellisense suggestions by Visual Studio Code, Visual Studio and other IDEs with such support.

    Grid Typescript Init

    This sample shows how to create basic Grid using TypeScript

    import {Grid, GridColumn, DataAdapter, Smart} from "../typescript/smart.elements";
     window.onload = function () {
       const grid: Grid = <Grid>document.createElement("smart-grid");
       grid.columns = <GridColumn[]>[
         {label: "First Name", dataField: "firstName"},
         {label: "Last Name", dataField: "lastName"}
       ]
       const adapter = new Smart.DataAdapter( {
         dataSource: [
           {firstName: "Name", lastName: "Last Name"},
           {firstName: "Name 2", lastName: "Last Name 2"},
           {firstName: "Name 3", lastName: "Last Name 3"},
           {firstName: "Name 4", lastName: "Last Name 4"},
           {firstName: "Name 5", lastName: "Last Name 5"}
         ],
         dataFields: [
           'firstName: string',
           'lastName: string'
         ]
       }) as DataAdapter;
       grid.dataSource = adapter;
       document.body.appendChild<Grid>(grid);
     }
    
    Smart Grid, Web Components
    , , , , , , , ,

    Leave a comment

    Microsoft Chromium Edge and Smart Web Components

    Microsoft Chromium-based Edge



    Microsoft today released the first stable version of its new Chromium-based Edge browser, just over a year after it first announced that it would stop developing its own browser engine and go with what has become the industry standard.



    The new Microsoft Edge provides best in class compatibility with extensions and web sites, with great support for the latest rendering capabilities, modern web applications, and powerful developer tools across all supported platforms.

    Faster and clean-looking

    One of the first things you’ll notice about the new Edge is just how it looks, and how fast web sites load in it. Even when using 15 or more tabs, we didn’t find it slow down.

    What's important for your development with Smart Web Components

    We were regularly testing all releases of the new Edge with our product so on our end there are no surprises.

    The first important thing that we will point out is that Smart Web Components are fully compatible with the new Microsoft Edge browser.

    The second thing is that you will no longer need to include the webcomponents.js polyfill with Edge. More information about the Web Components support table: https://caniuse.com/#search=web%20components
    HTML Elements, Javascript
    , , , ,

    Leave a comment