jQWidgets ver. 6.0.6

This is a maintenance release including the following updates:

What’s Fixed:
– Fixed an issue in jqxGrid regarding the columns rendering when everpresentrow and showfilterrow are enabled.
– Fixed an issue in jqxGrid regarding the multi-column sorting when the Grid is empty.
– Fixed an issue in jqxGrid regarding the multi-column sorting when the Grid column is with key/value pairs.
– Fixed an issue in jqxGrid data export when exporting a column with currency formatting and the rows count is 1.
– Fixed an issue in jqxGrid, jqxTreeGrid typescript definitions, when a method or property is set on ngOnInit.
– Fixed an issue in jqxCalendar rendering when firstDayOfWeek is changed.
– Fixed an issue in jqxForm Angular Component regarding the imports and resizing.
– Fixed an issue in jqxForm typescript definitions.
– Fixed an issue in jqxNumberInput regarding the value initialization when the widget is created.
– Fixed an issue in jqxDropDownList regarding the rendering of the placeholder in Material themes, when clearSelection method is called.
– Fixed an issue in jqxChart tooltip arrow positioning.
– Fixed an issue in jqxListBox rendering when the theme is material and custom rendering function is set.
– Fixed an issue in jqxScheduler regarding the all day checkbox alignment in the dialog.

ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5, angular7, angular8, 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
, , , , , , , , ,

Leave a comment

Angular Grid Row Details

You can see in this blog how to show Row Details with our Angular Grid.

Our Angular Grid has a lot of features and can be used in complex business applications. One of the interesting features is Row Details.

With the Row Details feature you can expand each row of the grid by clicking the expand arrow on the first column. Then you can see a Tabs with the relevant details to the current row. This can be very useful if you are showing a list of employees in a grid for example and would like to see the details of each employee in the grid.

Angular Grid Row Details functionality



You can use all the other available features of the Angular Grid like sorting, filtering, grouping, paging and so on.

Angular Grid Row Details

The text and background colors can be defined in advance. You can also use the predefined themes which include 3 new Angular Material themes.

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

Leave a comment

Angular tour of Heroes with jQWidgets

The easiest way to create an Angular project with the jQWidgets library is to use AngularCLI. This tutorial demonstrates how to build one application from scratches. By the end of this tutorial, you will know how to implement our widgets in the Angular project.

This tutorial is based on the official Angular Tour of Heroes.


View the full tutorial: Angular Tour of Heroes
ANGULAR, Angular 2, angular 4, angular 5, Angular 6

Leave a comment

jQWidgets ver.6.0.5

The latest version comes with the following changes:

What’s Improved:

– jqxGrid Adaptive rendering. Filter dialog is rendered differently on small screens when adaptive mode is turned on.

What’s Fixed:

– Fixed an issue in jqxNumberInput when promptChart is set to empty string.
– Fixed an issue in jqxNumberinput up/down keys when selection is before number the first number does nothing.
– Fixed an issue in jqxGrid when multi-column sorting is applied to column with type “float” or “int”.
– Fixed an issue in jqxGrid Pager rendering on small screen devices. Now, some elements are adaptively hidden and shown.
– Fixed an issue in jqxGrid multi-column sorting when user edits cells.
– Fixed an issue in jqxGrid regarding auto-scrolling when an editor is opened and the Grid is grouped.
– Fixed an issue in jqxGrid number editing process. When numeric cell is selected and a numeric key is pressed, the input’s caret position was wrong.
– Fixed an issue in jqxComboBox keyboard navigation.
– Fixed an issue in jqxInput when the value property is changed dynamically.
– Fixed an issue in jqxDataAdapter regarding the mapChar option name.
– Fixed an issue in jqxForm regarding the val() method.
– Fixed an issue in jqxForm typescript file.
– Fixed an issue in jqxDateTimeInput regarding the val() method when the Date is in String format.
– Fixed an issue in jqxDateTimeInput about darkblue theme. Hides navigation buttons at top of Calendar.
– Fixed an issue in jqxDateTimeInput regarding the validation on initialization. value is always between the min and max range on initialization.
– Fixed an issue in jqxDateTimeInput regarding the time popup, when the formatString is “HH” or “hh”, only the Hour input shoud be visible.
– Fixed an issue in jqxTree regarding the vertical alignment of Tree Item’s text and icons.
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
, , , , , , , , , , , , ,

Leave a comment

Linear Gauge for ReactJS

In this blog we are going to introduce our Linear Gauge for React.

The gauges are used to display indicators showing ranges of values. The most familiar types of gauges are circular and resemble the speedometer of a car. There are also Linear Gauges which show the values of a value in a straight line. They resemble linear thermometers.

React Linear Gauge Features



Position. The position of the linear gauge can be vertical or horizontal.

React Linear Gauge

Labels position. The labels can be set in 3 different position relative to the gauge – near, far and on both sides.

Ticks position and background. The position of the ticks can also be configured. In addition the background color can be configured in advance.

You can see an example here.
React, React Javascript Library, REACTJS

Leave a comment

Angular Accordion

In this blog we are going to show you our Accordion component for Angular.

The Accordion component represents a list of items that can be expanded. It includes a header part and a content part where the items are situated. The Accordion is very similar to Navigation Bar with the exception that it can have only one expanded item at a time.

Angular Accordion functionality



In order to produce an Accordion component you will have to use our Angular Navigation Bar in its default state.

Angular Accordion

The Accordion component can be made read only or disabled by setting the disabled property to true.

If you would like to make the currently selected item more visible you can use the toggle mode option.

The text and back ground colors can be customized and you can also use one of the predefined themes which include 3 Angular Material themes.

Keyboard navigation, right to left order and fluid design are also supported.

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

Leave a comment

React Tabs Scrolling

In this blog we are going to show you scrolling with our React Tabs.

The Tabs component is used to show different information in one and the same space. The different information is organized into tabs an can contain other components besides text as well. The user selects the different Tabs from a panel on top of the information space.

Our Tabs component for React enables scrolling. The scrolling shows to arrow buttons for moving left or right automatically when there is no space to show all the tabs in the panel. It is very convenient when the Tabs component has a lot of tabs and the space is limited.

React Tabs Scrolling features



One of the interesting features is Animation which enables a fading effect when you move between the Tabs.

React Tabs Scrolling

You can also preconfigure the text and background colors and use one of the predefined color themes.

The positions of the scroll buttons on the Tab panel can be changed to left, right and both. The last option will show one button at each of the ends of the React Tabs.

Keyboard navigation and right to left layout are also supported.

You can see an example here.
React, React Javascript Library, REACTJS, Uncategorized
, , , ,

Leave a comment

jQWidgets ver 6.0.4

A patch release just came out with the following minor bug fixes:

What’s Fixed:

– Fixed an issue in jqxGrid regarding row-details z-index.
– Fixed an issue in Angular components about duplicate val methods.
– Fixed an issue in jqxGrid typescript definitions regarding the new Grid properties.
– Fixed an issue in jqxGrid about border-colors of Grid cell editors in the Light theme.
– Fixed an issue in jqxGrid filter menu rendering.
– Fixed an issue in jqxGrid deferred scrolling popup in Firefox.
– Fixed an issue in jqxForm typescript definitions.
– Fixed an issue in jqxForm Angular component.
– Fixed an issue in jqxValidator labels positioning in Inputs with Material theme.
– Fixed an issue in jqxTextArea args.type property being undefined.
– Fixed an issue in jqxInput regarding the Material theme in IE11.
– Fixed an issue in jqxRibbon regarding the Material theme Tab bar rendering.
– Fixed an issue in jqxTree regarding the checkbox rendering in Indeterminate state.

ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5
, , ,

Leave a comment

jQWidgets ver6.0.0

Major release just came out. It features Material Design themes, New widget, New features for multiple widgets and quality updates.

What’s New:

– jqxForm widget.
– jqxGrid Multi-Column Sorting.
– jqxGrid Adaptive Layout Rendering.
– jqxGrid Column and Row Lines Visibility customization.
– Material, Material Green and Material Purple themes.
– jqxChart Multi-Series Tooltips.

What’s Improved:

– Light and Dark themes.

What’s Fixed:

– Fixed an issue in jqxGrid column rendering, when Sort is applied. Column text was not completely rendered due to the sort icon or text ellipsis was not shown even when it should be.
– Fixed an issue in jqxGrid column rendering, when Filter is applied. Column text was not completely rendered due to the filter icon or text ellipsis was not shown even when it should be.
– Fixed an issue in jqxGrid ensurerowvisible method when user navigates with keyboard and grouping is enabled.
– Fixed an issue in jqxGrid with Home/End keyboard selection, when pageable is enabled.
– Fixed an issue in jqxGrid with PageUp/PageDown keyboard selection and page navigation, when pageable is enabled.
– Fixed an issue in jqxGrid when a filter is applied by hitting “Enter” key and the displayed rows are 0. The grid throws an error. – Fixed an issue in jqxGrid filter panel regarding incorrect margin and padding of the filter widgets. – Fixed an issue in jqxGrid regarding the filter row cell widths after filter is applied and column width is set in percentages.
– Fixed an issue in jqxDropDownButton regarding the popup z-index.
– Fixed an issue in jqxCalendar regarding the cell size, when the calendar is placed inside TD tag.
– Fixed an issue in jqxWindow regarding the tab key navigation inside the window.
– Fixed an issue in jqxTreeGrid Angular component.
– Fixed an issue in Inputs regarding the percentage width handling.
– Fixed an issue in jqxPasswordInput regarding the horizontal resizing.
– Fixed an issue in jqxDataTable regarding the Advanced filtering rendering.
– Fixed an issue in jqxDataAdapter issue regarding beforeLoadComplete when used along with loadServerData.
– Fixed an issue in jqxListBox regarding the rendering of items and their width and offset calculations with and without checkboxes.

Breaking changes:

jqxTreeGrid, jqxDataTable, jqxGrid – increased default row height, column height and pager height. These properties are configurable with the API.




ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, Angular5, angular7, angular8, AngularJS, 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
, , , , , , , , , , , , , , , , , , , , ,

Leave a comment

Material Theme

With the upcoming jQWidgets release, we will introduce two Material themes – Material and Material Purple.

Material Grid


Material Tabs


Material Window


Material DateTimePicker


Material ListBox


Material DropDownList


Material Slider


Uncategorized
, , , , , , , ,

Leave a comment