jQWidgets v9.1.6

This release includes the following changes:

What’s Fixed:

– Fixed an issue in jqxGrid related to IE11 and sorting.
– Fixed an issue in jqxGrid related to multi-column sorting in Angular.
– Fixed an issue in jqxComboBox and jqxPanel regarding jQuery 3.5.1.
– Fixed an issue in jqxForm regarding duplicate ids.
– Fixed an issue in jqxForm when more than one jqxForm-s on page, dropdown list opens only in last form.
ANGULAR, ANGULAR GRID, JavaScript Plugins, JavaScript UI, jQuery

Leave a comment

jQWidgets v9.1.3

jQWidgets v9.1.3 Release, April-09-2020

What’s New:

– Schematics for the Angular CLI – Add and Generation Schematics are added to jqwidgets-ng npm package for easier setup of Angular projects. Angular Schematics
– jqxGrid Column Chooser. Modal dialog included in the Grid component, which allows you to dynamically show/hide grid columns. Grid column chooser
– jqxScheduler UI Virtualization, which allows you to load thousands of appointments/events in the month and timeline views.
– jqxDateTimeInput yearCutOff and full edit mode, which allows handling and validation of user input as in a standard input and also validates 2-year digits.
Example: if yearCutoff is 1926 and 01/01/20 is entered, 20 will be interpreted as 2020. if 01/01/54 is entered, 54 will be interpreted as 1954.

What’s Improved:

– Angular Docs & Tutorials.

What’s Fixed:

– Fixed an issue in jqxGrid charting IE11 support.
– Fixed an issue in jqxListBox – when using programmatically selection of all item the “getCheckedItems” method does not return all items in the “checkChange” event
– Fixed an issue in jqxGrid – when having more than 10 columns after the filtering in the next one there has appeared white strip.
– Fixed an issue in jqxGrid (React) – after filtering it break rendering of columns after 10th
– Fixed an issue in jqxSwitchButton – checked and unchecked events are swapped
– Fixed an issue in jqxGrid – when using sorting with option “many” and filtering it throws error
– Fixed an issue in jqxTree – error message with the newer version of the jQuery (v3.4.1)
– Fixed an issue in jqxGrid – when select/edit one cell and after that using tabbing it automatically checked the first checkbox
– Fixed an issue in jqxGrid – when using input inside the “rowdetails” option after tabbing from this input it select first row
– Fixed an issue in jqxPopover – close buttons closes all popovers on page
– Fixed an issue in jqxSwitchButton – with some the themes it looks like there is no chosen option
– Fixed an issue in Disabled button doesn’t always block click event
– Fixed an issue in jqxGrid – keyboard navigation between groups broken when showgroupaggregates == true
– Fixed an issue in jqxGrid – cannot be grouped after toggling the “filterrow” option
– Fixed an issue in jqxComboBox – the “multiSelect” property and opening the list will select the first one
– Fixed an issue in jqxGrid – the “sortMode: ‘many'” option only latest sorted column has correct options for its menu
– Fixed an issue in jqxGrid – not appropriate behavior when it is disabled – possible to change checkboxes
– Fixed an issue in jqxListBox – cannot be using the dragging feature after adding the new items
– Fixed an issue in jqxSwitchButton – there is no visual difference between disabled and enabled state


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, VUE, VUEJS
, , , , , , , ,

Leave a comment

Grid Column Chooser

Grid Column Chooser

With the next release, we will deliver a new feature for our Grid component, called – Column Chooser.

Grid column chooser

To open it, we added a method called: “openColumnChooser” and that is all you need to do in order to open it. That dialog allows you to customize the visibility of your Grid columns. They will be displayed in a dialog window and each column will be presented by a checkbox item. Checked means that the column is visible, unchecked that it will be hidden.
The next release is scheduled for 10-April.
ANGULAR, ANGULAR GRID
, ,

Leave a comment

Blazor UI Components

A Blazor app can invoke JavaScript functions from .NET methods and .NET methods from JavaScript functions. These scenarios are called JavaScript interoperability (JS interop). We are close to the final stage of our Blazor .NET components implementation. These components will internally use our Javascript components. In this blog, we will show you the future jqxGrid for Blazor component.

jqxGrid.razor

The Grid’s component implementation will have a file called (jqxGrid.razor). We can add that file within the Shared folder of our Blazor app.

The next step is to include the jqwidgets folder into the wwwroot folder. Its path should be like that: ./root/blazor-web/wwwroot/js/jqwidgets/

Inside the element of wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server), we add the grid javascript and css dependencies

<!DOCTYPE html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <meta name="viewport" content="width=device-width" />  
   <title>blazor-web</title>  
   <base href="/" />  
   <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />  
   <link href="css/site.css" rel="stylesheet" />  
   <link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" />  
   <link rel="stylesheet" href="./js/jqwidgets/styles/jqx.material.css" />  
 </head>  
 <body>  
   <app>Loading...</app>  
   <script src="./js/jqwidgets/jqxcore.js"></script>  
   <script src="./js/jqwidgets/jqxbuttons.js"></script>  
   <script src="./js/jqwidgets/jqxdata.js"></script>  
   <script src="./js/jqwidgets/jqxscrollbar.js"></script>  
   <script src="./js/jqwidgets/jqxmenu.js"></script>  
   <script src="./js/jqwidgets/jqxgrid.js"></script>  
   <script src="./js/jqwidgets/jqxgrid.selection.js"></script>  
   <script src="./js/jqwidgets/jqxgrid.sort.js"></script>  
   <script src="./js/jqxBlazor.js"></script>  
   <script src="./js/example.js"></script>  
   <script src="_framework/blazor.webassembly.js"></script>  
 </body>  
 </html>  

Navigate to the Index.razor file which is in the Pages folder and add the grid initialization code.

@page "/"  
   <JqxGrid  
     width="600"  
     source="source"  
     columns="columns"  
     sortable="true"  
     theme="material">  
   </JqxGrid>  
 @code {  
   private IDictionary<string, object> source;  
   private object columns;  
   protected override void OnInitialized()  
   {  
     source = buildSource();  
     columns = buildColumns();  
   }  
   private IDictionary<string, object> buildSource()  
   {  
     List<IDictionary<string, object>> localData = new List<IDictionary<string, object>>();  
     string[] firstNames = { "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" };  
     string[] lastNames = { "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" };  
     string[] productNames = { "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" };  
     float[] priceValues = { 2.25f, 1.5f, 3.0f, 3.3f, 4.5f, 3.6f, 3.8f, 2.5f, 5.0f, 1.75f, 3.25f, 4.0f };  
     Random random = new Random();  
     for (int i = 0; i < 200; i++) {  
       IDictionary<string, object> row = new Dictionary<string, object>();  
       row.Add("firstName", firstNames[random.Next(0, firstNames.Length)]);  
       row.Add("lastName", lastNames[random.Next(0, lastNames.Length)]);  
       row.Add("productNames", productNames[random.Next(0, productNames.Length)]);  
       row.Add("priceValues", priceValues[random.Next(0, priceValues.Length)]);  
       localData.Add(row);  
     }  
     List<IDictionary<string, string>> dataFields = new List<IDictionary<string, string>>();  
     IDictionary<string, string> dataField1 = new Dictionary<string, string>();  
     dataField1.Add("name", "firstName");  
     dataField1.Add("type", "string");  
     IDictionary<string, string> dataField2 = new Dictionary<string, string>();  
     dataField2.Add("name", "lastName");  
     dataField2.Add("type", "string");  
     IDictionary<string, string> dataField3 = new Dictionary<string, string>();  
     dataField3.Add("name", "productNames");  
     dataField3.Add("type", "string");  
     IDictionary<string, string> dataField4 = new Dictionary<string, string>();  
     dataField4.Add("name", "priceValues");  
     dataField4.Add("type", "number");      
     dataFields.Add(dataField1);  
     dataFields.Add(dataField2);  
     dataFields.Add(dataField3);  
     dataFields.Add(dataField4);  
     IDictionary<string, object> source = new Dictionary<string, object>()  
     {  
       { "localdata", localData },  
       { "datatype", "array" },  
       { "datafields", dataFields }  
     };  
     return source;  
   }  
   private object buildColumns()  
   {  
     List<IDictionary<string, object>> columns = new List<IDictionary<string, object>>();  
     IDictionary<string, object> column1 = new Dictionary<string, object>();  
     column1.Add("text", "First Name");  
     column1.Add("datafield", "firstName");  
     column1.Add("width", 100);  
     IDictionary<string, object> column2 = new Dictionary<string, object>();  
     column2.Add("text", "Last Name");  
     column2.Add("datafield", "lastName");  
     column2.Add("width", 100);  
     IDictionary<string, object> column3 = new Dictionary<string, object>();  
     column3.Add("text", "Product");  
     column3.Add("datafield", "productNames");  
     column3.Add("width", 200);  
     IDictionary<string, object> column4 = new Dictionary<string, object>();  
     column4.Add("text", "Price");  
     column4.Add("datafield", "priceValues");  
     column4.Add("cellsformat", "c2");  
     column4.Add("align", "right");  
     column4.Add("cellsalign", "right");  
     columns.Add(column1);  
     columns.Add(column2);  
     columns.Add(column3);  
     columns.Add(column4);  
     return columns;  
   }  
 }  

The Final Result:

Blazor Grid
Uncategorized
, ,

Leave a comment

jQWidgets ver.9.0.0

jQWidgets v9.0.0 Release, January-03-2020


What’s New:


– jqxGrid Charting – Data Visualization of Grid data in a Chart.
– jqxGrid export to .xlsx data format.
– jqxGrid export with Data Grouping.
– jqxGrid Progress and Rating columns.
– jqxGrid Rating cell editor with jqxRating.
– jqxGrid Material UI Pager Template.

What’s Improved:


– All Angular examples are with Ivy rendering.
– jqxGrid Data Export performance.

What’s Fixed:


– Fixed various typescript issues related to Angular 9 compatibility.
– Fixed an issue in jqxGrid regarding the dropdownlist filter component positioning.
– Fixed an issue in jqxGrid regarding the tabindex of the grid menu, when multiple grids are on the page.
– Fixed an issue in jqxGrid regarding the row details display in Firefox.
– Fixed an issue in jqxGrid PDF export when header export is disabled.
– Fixed an issue in jqxGrid Dropdownlist filter popup position while scrolling.
– Fixed an issue in jqxGrid regarding the gethroup method results.
– Fixed an issue in jqxGrid regarding the grouping dragging errors associated with isPassive prop.
– Fixed an issue in jqxGrid regarding tabbing and editing with enabled RTL mode.
– Fixed an issue in jqxGrid regarding the multi sorting, when sorting is applied while the Grid data source is empty.
– Fixed an issue in jqxGrid regarding the editing after addrow method is called, while sorting is applied.
– Fixed an issue in jqxGrid regarding the addrow method, when the Grid’s source is empty.
– Fixed an issue in jqxGrid regarding the grouping when aggregates and paging are turned on.
– Fixed an issue in jqxGrid regarding the editing, when the grid is initially empty and an editable row is added by calling addrow.
– Fixed an issue in jqxWindow regarding the resize method behavior.,
– Fixed an issue in jqxHeatMap rendering for IE11.
– Fixed an issue in jqxScheduler regarding the yearly recurrence edit.
– Fixed an issue in jqxScheduler regarding the work time, when the fromHour is set to 0.
– Fixed an issue in jqxTabs regarding the tabs rendering with Material themes.
– Fixed an issue in jqxTabs regarding the tabs close button behavior.
– Fixed an issue in jqxTreeGrid regarding the expandAll method and the checkboxes appearance after the treegrid is rendered.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, ASP .NET, JavaScript UI, JavaScript UI Widgets, JavaScript Widgets, jqxCalendar, jqxCheckBox, jqxMenu, jqxNumberInput, jqxProgressBar, jqxRadioButton, jqxSlider, jqxSplitter, jqxTabs, jqxTooltip, jqxTree, PHP, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, VUE, VUEJS

Leave a comment

</2019><2020>Happy New Year!

Happy New Year from jQWidgets. May you have a spectacular New Year! Wishing you a season of joy and looking forward to continued success in 2020!
Uncategorized

Leave a comment

Grid with New Pager Mode

The next release of jQWidgets will be in the first week of January 2020. It comes with a new modern looking Grid Pager. This will be the third Pager mode of the Grid, which now has “default” and “simple” pager rendering modes. See a live Grid Pager Modes Example. The name of the new pager rendering mode will be “material”, inspired by the Material Design, which we see in every new web application.
Material Pager
To apply that style to your Grid, all you need to do is to set the “pagermode” property to “material”. Of course, the feature will be available for Angular, Vue, React and Javascript.
ANGULAR, ANGULAR GRID, angular8, Grid, JavaScript, JavaScript UI, JavaScript Widgets, jqxGrid
,

Leave a comment

Happy Holidays!!!

Wishing you a Happy Holiday and a joyful New Year.
Best wishes from your friends at jQWidgets!
Uncategorized

Leave a comment

Data Visualize Grid Data

The upcoming release of jQWidgets will introduce the Grid’s integrated charting functionality. The charting is implemented through our jqxChart component and is using the Grid data source. jqxChart can also be exported to .PDF, .PNG of .JPEG.

Grid Charting


There are two approaches to create a Chart:

Create a Chart by using the jqxGrid’s Cells or Rows selection.
Create a Chart by using the jqxGrid and jqxChart API. This solution allows us to use the full data set.

The Toolbar with Charting options is displayed in the jqxGrid toolbar. When you click on a Chart Type, the Grid will create it and display it in jqxWindow. To create Charts, users will need to import the jqxGrid, jqxChart and jqxWindow related files.

Below is displayed a jqxChart created through cells selection by dragging.


Two new Column types will also be included in the next version of jQWidgets.

Progress Bar Column




Ratings Column




All of the above features will be available for Angular, React, Vue and Javascript.
Chart, jqxGrid

Leave a comment

Angular v9: 9.0.0-rc.3

We have been working and testing the latest Angular releases to make sure we support the new Ivy Compiler so our customers can use Angular v9. Our team just finished testing the jQWidgets Angular Components with the latest build – Angular 9.0.0-rc.3 and all our tests passed well.

We would like to say Thank you to all our customers. Your feedback helped us to improve our UI components.

Uncategorized
,

2 Comments