Survey

Please, if you have a minute, fill our survey: jQWidgets Survey
Uncategorized

Leave a comment

Angular 7 Scatter Chart

In this blog we will demonstrate the features of our Angular Scatter Chart.

The scatter chart can be used to display the values of two variables using their x and y coordinates. The values are presented on the chart as a collection of points. Our chart enables the presentation of more than one series where the values of each series are presented with a different symbol.

Angular Scatter Chart Features



The shapes of the symbols representing the variables can be circle, diamond, square, triangle_up, triangle_down, triangle_left and triangle_right.

Angular Scatter Chart

The colors of the shapes can be changed.

When you point to a shape on the chart a label appears giving you the values of the respective variable.

The captions on the x and y axis can be horizontal or vertical.

You can see an example here.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, Angular5, angular7, angular8, jqxChart
, , , ,

Leave a comment

Vue.js

Announcing jQWidgets Vue.js Components


The path to this public release has been long. We received lots of requests from our community about Vue support and now we are eager to see what kind of web apps you will create with our components. We will be happy to help you make better Vue apps.

All our demos are available here: https://www.jqwidgets.com/vue/.

The documentation link is: https://www.jqwidgets.com/vue-components-documentation/


What’s Next

In the next month, we will enable online examples editing and will add API Documentation pages where we will add how-to use samples for each API member.
VUE, VUEJS
, ,

Leave a comment

jQWidgets ver.6.1.0

What’s New:

– Vue JS Components

What’s Improved:

– Added options to jqxDataAdapter to define Grid’s sortcolumns and sortdirections on initialization.

What’s Fixed:

– Fixed an issue in jqxGrid React component regarding rendering issues like double-headers, etc in some scenarios.
– Fixed an issue in jqxGrid regarding the deleterow method when the Grid is sorted by multiple columns.
– Fixed an issue in jqxGrid regarding duplicating “Please Choose” labels in dropdownlist filters.
– Fixed an issue in jqxNumberInput regarding the setDecimal method when the value is null.
– Fixed an issue in jqxNumberInput about wrong behaviour with negative numbers when events are raised.
– Fixed an issue in jqxEditor regarding the copy/paste.
– Fixed an issue in jqxScheduler regarding rendering of MonthView appointments when Schedulers are placed in jqxTabs and the first one is hidden.
– Fixed an issue in jqxScheduler regarding the firstDay Localization setting.
– Fixed an issue in jqxFileUpload in Mozilla Firefox regarding the file’s url rendering.
– Fixed an issue in jqxNotification rendering in Angular.
– Fixed an issue in jqxInput two-way data binding.
VUE, VUEJS
, , ,

Leave a comment

Angular DataTable Cell Edit

In this blog we will demonstrate cell editing with our Angular Data Table.

Our DataTable component is an excellent alternative to the HTML tables. It offers all the functionality of the grid component with the exception of virtualization.

The DataTable component for Angular requires the following imports.



Angular DataTable Cell Edit Functionality



In order to edit a cell you have to double-click on it. You can edit numeric, text and datetime fields. When editing the datetime field you can use a calendar.

Angular DataTable Cell Edit

The text and background colors can be configured and you can use the predefined themes including 3 Angular Material themes.

In addition the component supports the events like cellBeginEdit, cellEndEdit, Column and Value.

You can see the example here.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5, angular7, angular8, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxGrid
, , , , , , , , , , ,

Leave a comment

Angular Star Rating

In this blog we will introduce our Angular Star Rating component.

The star rating is a component which allows the user to rate something from 1 to 6 for examples by clicking the respective number of stars. It is very popular with all kinds of applications which incorporate rating of services or experience.

Angular Star Rating features



The number of displayed items can be configured in advance.

Angular Star Rating

You can also select an image different from star for the rating component.

The Rating component for Angular requires the following imports:
import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
import { jqxRatingComponent } from ‘../assets/jqwidgets-ts/angular_jqxrating’;

You can see an example here.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, Angular5, angular7, angular8
, , , ,

Leave a comment

Angular Components and CodeSandbox Integration

Recently, we announced the integration of our Angular examples with Stackblitz. This post is about https://codesandbox.io. CodeSandbox is another online editor that helps you create web applications, from prototype to deployment.
All our Angular examples can be edited, updated and forked with both Stackblitz and CodeSandbox.

For example: CodeSandbox: Angular Grid in CodeSandbox

Stackblitz: Angular Grid in Stackblitz
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5
, , ,

Leave a comment

React Radio Button

In this blog we are going to demonstrate our React Radio Button.

The Radio Button is used to make it possible to choose one of several options which are mutually exclusive. The options are represented in a group one above the other and have circular buttons on the left of each option. When the user selects one of the option a dot appears inside the button.

React Radio Button features



The radio button can be styled and the colors can be changed. You can also use one of the available themes.

React Radio Button

The Radio Button support events showing which button was checked and which unchecked.

Keyboard navigation and right to left layout are also supported.

You can see an example here.
Uncategorized
, ,

Leave a comment

Angular ComboBox with Checkboxes

In this blog we will show you our Angular ComboBox with Checkboxes.

The combo box component is a list of items which can be selected. The list drops down form a text field after the user presses and arrow button. An element from the list can be selected from the user and then appear in the input text field.

The Combobox enables the user to implement checkboxes on the left of the items in the input text field.

Angular ComboBox with Checkboxes features



One of the useful features of the combo box is binding to XML and JSON.

Angular Combobox with CheckBoxes

The combo box allows for multiple elements to be selected.

The dropdown list can be aligned horizontally or vertically. The horizontal alignment can be left or right and the vertical top or bottom.

Keyboard navigation and right to left layout and predefined themes including 3 Angular Material themes are also supported.

You can see an example here.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, Angular5, angular7, angular8, jqxCheckBox, jqxComboBox
, , , , , , ,

Leave a comment

Angular 6 Tree with Checkboxes

In this blog we will show you how to enable checkboxes with our Angular 6 Tree.

With the Angular Tree component you can show information in a hierarchical way in the form of a tree. The tree has root item and below it parent and child items. Each item can be expanded if it has children or collapsed. The item which belong to the same parent are called siblings. The tree component is used very frequently in rich user interfaces.

Our Angular tree enables putting a check box on the left of the item. Three state checkboxes are also possible. With a three state checkbox when the user checks the parent item its children become checked as well. When there is an unchecked item the parent is in an indeterminate state.

Angular Tree with CheckBoxes Features



In addition to checkboxes you can also put text and images on the left of the items.

Angular Tree with Checkboxes

The Tree component supports drag and drop so you can drag an element and drop it on another tree.

The text and background colors can be changed and preconfigured. You can also use our predefined Angular Material themes.

You can see an example here.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6

Leave a comment