-
Resent Posts
Tags
angular angular grid chart charting ComboBox datagrid datagridview grid gridview html5 chart html5 Grid JavaScript javascript chart javascript grid javascript gridview javascript listbox javascript splitter jQuery jquery chart jquery datagrid jquery grid jquery grid plugin jquery gridview jquery listbox jQuery Plugins jquery splitter jQuery Tree jQuery UI jquery ui grid jQuery UI Plugins jQuery UI Widgets jQuery Widgets jQWidgets jqxchart jqxGrid jqxlistbox jqxsplitter ListBox listbox widget react reactjs split container splitter tree treeviewCategories
- ANGULAR
- Angular 2
- angular 4
- angular 5
- Angular 6
- ANGULAR GRID
- angular tree
- Angular5
- angular7
- angular8
- AngularJS
- ASP .NET
- ASP.NET Core Tag Helpers
- ASP.NET Core Tag Helpers
- ASP.NET Core Tag Helpers
- Chart
- custom elements
- Grid
- html elements
- 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
- jqxButton
- jqxCalendar
- jqxChart
- jqxCheckBox
- jqxComboBox
- jqxDateTimeInput
- jqxDock
- jqxDropDownList
- jqxExpander
- jqxGrid
- jqxInput
- jqxListBox
- jqxMaskedInput
- jqxMenu
- jqxNavigationBar
- jqxNumberInput
- jqxProgressBar
- jqxRadioButton
- jqxRating
- jqxResponse
- jqxRibbon
- jqxScrollBar
- jqxSlider
- jqxSplitter
- jqxTabs
- jqxTooltip
- jqxTree
- jqxTreeMap
- jqxValidator
- jqxWindow
- PHP
- Pivot Grid
- React
- react grid
- React Javascript Library
- REACTJS
- typescript
- Uncategorized
- VUE
- VUEJS
Survey
Please, if you have a minute, fill our survey: jQWidgets Survey
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.
The shapes of the symbols representing the variables can be circle, diamond, square, triangle_up, triangle_down, triangle_left and triangle_right.
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.
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.
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.
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.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.
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.
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.
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.
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
angular bind, angular cell editing, angular data bind, angular data binding, angular data soruce, angular data table, angular datatable cell edit, angular datatable component, angular datatable ui component, angular table cell edit, angular table component, angular ui table
Leave a comment
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.
The number of displayed items can be configured in advance.
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.
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.
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 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
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
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.
The radio button can be styled and the colors can be changed. You can also use one of the available themes.
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.
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.
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.
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.
One of the useful features of the combo box is binding to XML and JSON.
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.
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.
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 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.
In addition to checkboxes you can also put text and images on the left of the items.
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.
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.
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.