Thank you all for the feedback after we launched jQWidgets 5.3.0. Today’s release resolves everything reported and confirmed by our Team:
– Fixed an issue in jqxGrid related to nested Grids z-index.
– Fixed an issue in jqxListBox related to item’s labels.
– Fixed an issue in jqxScheduler related to the getSelection method result when a single all day cell is selected in Day/Week view.
– Fixed an issue in jqxWindow related to its z-index.
– Fixed an issue in jqxScheduler related to its dialog z-index.
Posted in:
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
Tagged:
javascript grid, javascript widgets, jquery components, jquery controls, jquery data grid, jquery grid, jQuery Plugins, jquery user interface, jQuery Widgets, jqwidgets data grid, jQWidgets Grid
Tabs Component Introduction
In this blog we will show you the main features of our Tabs component for Angular.
The Tabs component for Angular allows you to have several views in the space of one and the same window. The different views have tabs on top of them and you can select them by clicking on the respective tab. The Tabs component is very often used when you have similar categories and you want to show the information for each category in the same space.
Apart from the standard features our Tabs component has a lot of advanced feature. One of this features is Select Animation. The select animation changes the background and the text color of the Tab when the mouse is over it. Another advanced feature is the Content Animation. Enabling this feature makes the content appear gradually when the Tab is selected.
The Tab component for Angular allows you to have images in the Tab. You can choose where to place the image next to the text.
Another advanced feature is that you can have a Close Button next to the Tab. When you click the Close Button the respective Tab will be removed from the Tabs list.
When there is not enough space to show all the Tabs there will appear automatically Scroll Buttons. You can choose the position of the Scroll Buttons (left, right or both).
One very useful advanced feature is the drag and drop. You can drag one Tab and drop it before or after another Tab and thus reorder the Tabs in the Angular Tabs component.
The tabs can be collapsible and the content can be not only text but a map for example, or other components.
And last but not least like all our components the Tabs component for Angular is fluid and supports Keyboard Navigation and Right to Left Layout.
Posted in:
ANGULAR, Angular 2, Angular5, AngularJS, jqxTabs, typescript
Tagged:
angular tab widget, angular tabs, angular tabstrip, Tab Control, tab widget, Tabs, tabstrip
In this blog we will show you the main features of our line charting component for React.
The line chart is one of the most popular types of chart. It is used to display the data points in a series and connect them with straight lines. Very often the data points represent the development of a certain variable in time and the time intervals are showed on the X axis.
Apart from the standard line chart our charting component for React supports stacked line charts. The stacked line chart is similar to the line chart however you can have more than one line in the same chart. 100% stacked charts are also supported. In this type of chart the values on the Y axis are given as percentages. It is very convenient when you want to see the difference between the values of 2 series.
jQWidgets chart for ReactJS supports also line charts with markers. The markers show the values of the Y axis on top of the line for easier visualization. The shape and thee color of the markers can be customized.
One of the advanced features is that you can have line charts with conditional colors. In this case you can have different colors for the lines connecting certain points based on a given condition. Sequential points having the same color are grouped automatically in a line segment.
Another advanced feature is that you can have lines from multiple data sources in one line chart. In this case the lines are represented with stacked lines.
Step lines are another advanced feature which enables you to draw the connections between the points with horizontal or vertical lines. In this way the line looks step like.
Spline is another feature that you can benefit from. Spline charts are similar to the step line charts with the exception that they draw the connection between the points in a curved line.
And last but not least our charting component for React is highly customizable. You can change the colors and the thickness of the line. You can add cross hairs which show the values of the X and Y axis above and you can have a moving dot when you follow the line.
React Charts
React Line Charts
What’s Improved:
– Widgets now use lower default z-index values.
What’s Fixed:
– Fixed an issue in jqxGrid regarding full row edit and tabbing.
– Fixed an issue in jqxGrid ever present row when updatebounddata is called.
– Fixed an issue in jqxGrid regarding the beginrowedit method when called after addrow method.
– Fixed an issue in jqxGrid horizontal scrollbar appearance when the column widths are not set.
– Fixed an issue in jqxGrid regarding the uid reset of rows when the column editor is ComboBox or DropDownList.
– Fixed an issue in jqxGrid about showing empty rows when virtual mode is turned on and display rows count is greater than the data rows count.
– Fixed an issue in jqxGrid when grouping aggregates are enabled and a custom aggregate is implemented. The custom aggregate’s results are not shown in the group’s aggregate.
– Fixed an issue in jqxScheduler regarding the context menu which opens the edit dialog.
– Fixed an issue in jqxListBox regarding the ‘clear’ method. After calling clear, developers were still able to get an item object by it’s value.
– Fixed an issue in jqxTabs regarding the keyboard navigation.
– Fixed an issue in jqxTabs regarding hosting dropdown widgets and closing the dropdown when tab is selected and tab reorder is enabled.
– Fixed an issue in jqxValidator regarding the validation error message display in the TextArea after adding the required value.
– Fixed an issue in jqxTree regarding the ensureVisible method when the item is the first item, the tree was incorrectly scrolling down.
– Fixed an issue in jqxComboBox multi select mode which was related to cross site scripting vulnerability.
– Fixed an issue in jqxListBox and jqxDropDownList which was related to cross site scripting vulnerability.
– Fixed an issue related to the source code minification which was causing some widgets to throw errors in Internet Explorer 8.
Posted in:
ANGULAR, Angular 2, ANGULAR GRID, Angular5, AngularJS, ASP .NET, 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 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
Tagged:
angular 4, angullar 5, enterprise grid, jQuery, jquery 12.4, jquery chart, jquery charting, jQuery ComboBox, jquery controls, jquery datagrid, jquery dropdownlist, jquery framework, jquery grid, jquery jqwidgets, jquery latest, jquery listbox, jQuery Plugins, jquery scheduler, jQuery UI, jquery user interface, jQuery Widgets, jqwidgets controls, professional grid, ui components, ui controls, ui grid, user interface, web components, web ui components
jQWidgets Angular 5 UI Components
Today, we are happy to inform you that jQWidgets is the first UI Framework ready for Angular 5. Our Angular UI Components are fully compatible and prepared for the upcoming new version of Angular. We tested the UI components with the latest Angular 5 build which currently is: 5.0.0-beta.7. During the next week, we will announce the release of our new jQWidgets 5.3.0 version with the latest updates in our components.
Getting Started with our Angular 5 UI components
To get started, you will have to download and install jQWidgets from NPM or from our Download page. The scripts, CSS files and typescript definitions are available in this NPM package: jqwidgets-scripts. If you want to download also all demos and API documentation, install the jqwidgets-framework package. For Angular 5, we prepared a template NPM package with our components and Angular CLI. The package is called: create-jqwidgets-angular-app. Many users tell us that this package is perfect for starters. On our documentation page: Angular documentation you will find many useful tutorials and also the API documentation of our product. Of course, a similar package is also available for our ReactJS components. The NPM package is called: create-jqwidgets-react-app.
Here is how to start with create-jqwidgets-angular-app:
npm i -g create-jqwidgets-angular-app
create-jqwidgets-angular-app my-app
cd my-app
npm start
Then open http://localhost:4200/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.
About jQWidgets
In jQWidgets, we always try to provide the best quality and feature complete UI components. Now 6 years after we started our journey, we have the most advanced and feature complete UI components for jQuery, Custom Elements, React JS, ASP .NET MVC Core and Angular. Our UI components are used by more than 200 000 software developers in more than 50 countries.
Posted in:
ANGULAR, Angular 2, ANGULAR GRID, Angular5, 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
Tagged:
angular, angular 5, angular 5 chart, angular 5 grid, angular components, angular5, angular5 chart, angular5 grid
This post is about our Data Grid performance. Its performance is unbeatable in scenarios with thousands of rows and columns. It supports UI Virtualization for Rows and Columns. You may ask what does that mean? It means that we have a data set with thousands of rows and columns which we want to load. The Grid creates just the necessary HTML Elements in the View. Then it reuses these HTML Elements while you scroll horizontally or vertically. In addition, it supports Data Virtualization. This means that you can load data on demand and not all at once. The data binding capabilities include:
Local Data – populate it with Array data.
Xml Data – populate it with XML data
JSON Data – populate it with JSON data.
CSV Data – populate it with CSV data.
Tab Data – populate it with TAB(TSV) data.
Remote Data – populate it with data using JSONP. JSONP (JSON with Padding) represents JSON data wrapped in a function call. JSONP is an effective cross-domain communication technique. It is frequently used to bypass the same-origin policy limitations.
Virtual Data – the widget can be populated with data on demand when the user scrolls or changes the current page.
Grid performance demos
See how quickly it loads 30 000 data records and how smooth the scrolling is:
Grid with Large data set
Columns UI Virtualization is demonstrated in this demo:
Grid with Virtual Columns
1 million data records. No problem. Loading on demand with data virtualization can easily achieve that:
Grid with Virtual Dat
It is OK also if you have 100 million records.
What if you use React JS or Angular?
We have Angular Grid component on this page: Angular Grid
The React JS Grid is available here: React JS Grid
Solutions for ASP .NET MVC Core and Custom Elements are available on our demo page, too.
For the jQuery Grid users, the link is: jQuery Grid
Posted in:
ANGULAR, Angular 2, ANGULAR GRID, ASP .NET, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, custom elements, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxGrid, React, react grid, React Javascript Library, REACTJS
Tagged:
angular grid, best angular grid, best javascript grid, best jquery grid, best react js grid, datagrid, grid control, gridview, javascript grid, jquery data grid, jquery grid, jquery gridview, react grid
Sorting is one of the most frequently used operations with a Grid Component. Our grid for React js offers both alphabetical and custom sorting.
Alphabetical sorting can be ascending or descending. With the ascending you sort from A to Z and with the descending from Z to A. When the data is sorted you can see a small little triangle on the right side of the column name which shows the direction of the sorting. The triangle image can be changed through CSS.
Ascending and descending sorting works also with numeric and float numbers and dates.
With the custom sorting you can sort a column with your own sort and compare function. With the custom compare function you can define how the strings in the column are compared. You can also change the way numbers are sorted and compared and implement your own sorting logic.
One of the advanced features is the sort background. You can select that option to differentiate the sorted column.
Demos: React Grid Sorting
Documentation: React Grid Docs
Posted in:
React, react grid, React Javascript Library, REACTJS
Tagged:
advanced react grid, best react grid, enterprise react grid, jQWidgets Grid, jqwidgets grid for react, jqwidgets react grid, react data grid, react data sort, react grid, react grid sorting, react grid view, react sorting, react ui data grid, reactjs data grid, reactjs grid
OLAP (Online analytical processing) tools are used in Business Intelligence to analyze and visualize multi-dimensional data quickly. They are very convenient when you want to see the data from multiple perspectives. Often the resulting data sets come as a result from MDA (multi-dimensional analysis) queries.
Typically the OLAP data has dimensions, measures and aggregations. You can drill down the dimensions and see the corresponding measures and aggregates. You can easily change the dimensions or add additional ones and quickly introduce new measures and aggregations.
jQWidgets Pivot Grid for Angular gives you the capability to render the data in OLAP style. It is very flexible and offers excellent performance with large data sets. The Pivot Table designer component which comes with the Pivot Grid for Angular can help you quickly add new dimensions in real time.
Demos: Angular Pivot Grid
Documentation: Angular Components Docs
The newest release of jQWidgets includes Angular and React Pivot Grid components and also Pivot Grid custom element. The full list of changes is below:
What’s New:
– Angular Pivot Grid
– React Pivot Grid
– Pivot Grid Custom Element
What’s Improved:
– jqxTabs and jqxRibbon light theme.
What’s Fixed:
– Fixed an issue in jqxListBox and jqxDropDownList regarding the enableSelection property when it is set dynamically.
– Fixed an issue in jqxCheckBox and jqxRadioButton regarding the event.args.type member when the event is raised.
– Fixed an issue in jqxPivotGrid regarding the mouse selection when the mouse is released over a scrollbar.
– Fixed an issue in jqxPivotGrid regarding the hit test functionality.
– Fixed an issue in jqxTabs regarding removing an event listener when the Tabs is within IFrame.
– Fixed an issue in jqxToggleButton custom element regarding invoking methods inherited by jqxButton.
– Fixed an issue in jqxGrid regarding the mouse selection when the area between the vertical and horizontal scrollbar is clicked.
Posted in:
ANGULAR, ANGULAR GRID, custom elements, html elements, JavaScript, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery Widgets, jQWidgets, jqxGrid, Pivot Grid, React, react grid, React Javascript Library, REACTJS
Tagged:
angular, angular 4 pivotgrid, angular pivotgrid, jquery grid, jquery pivotgrid, pivotgrid custom element, react pivotgrid
With the release of jQWidgets 5.1.0, we added a new Pivot Grid component.
The Pivot Grid is an advanced Data visualization component which allows visualization of multi-dimensional data and hierarchical data structures. It supports Compact and traditional OLAP style and also features such as row and column resizing, sorting, filtering, multiple cells selection, conditional formatting, texts localization, summaries with built in math functions, data drill through.
See the demos: Pivot Grid Demos
Posted in:
Pivot Grid
Tagged:
javascript pivot grid, jquery pivot grid, jquery ui pivot grid, olap grid, pivot data, pivot data grid, pivot datatable, pivot designer, pivot grid, pivot table, pivotgrid
|
|
