|
|
|
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. jQWidgets v9.1.3jQWidgets v9.1.3 Release, April-09-2020What’s New:– Schematics for the Angular CLI – Add and Generation Schematics are added to jqwidgets-ng npm package for easier setup of Angular projects. – jqxGrid Column Chooser. Modal dialog included in the Grid component, which allows you to dynamically show/hide grid columns. 
– 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
angular 10, angular 9 ivy, angular components, angular material, angular schematics, column chooser, datetimepicker full edit, grid column chooser, web components
Leave a comment Grid Column ChooserGrid Column ChooserWith the next release, we will deliver a new feature for our Grid component, called – 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. 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
The next step is to include the 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 @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: 
</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!
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.
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. Happy Holidays!!!
Wishing you a Happy Holiday and a joyful New Year.
Best wishes from your friends at jQWidgets! 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 ChartingThere 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. 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. |
|
|
|
