ASP .NET Blazor

What is Blazor?



Blazor is the new hot thing for .NET WEB Development. With Blazor, you can build modern server-side applications using C#. Client and Server code with Blazor is written in C#.


Blazor is a new feature of ASP.NET. With it, the C# code can call JavaScript APIs and libraries. You can continue to use the large ecosystem of JavaScript libraries that exist for client side UI while writing your logic in C#. Blazor is also free. It comes as part of the open-source .NET platform that has a strong community.


Can we use Blazor with jQWidgets?


Yes, you can. jQWidgets is a Javascript framework and as such it can be easily used with Blazor i.e you can write code in C# and the code will call jQWidgets components API.


Blazor and Server-Side


When using server-side code execution, Blazor takes care of executing any JavaScript code on the client.

How to use jQWidgets with Blazor?


WYou can learn how: Using jQWidgets with ASP .NET Blazor.

The Blazor tutorial is about adding and using jQWidgets components in a Blazor web application. The output of the tutorial will be a great looking jqxGrid component in a Blazor Web Application:

ASP-NET-BLAZOR
Uncategorized
, , , , , , ,

Leave a comment

jQWidgets ver8.3.2

jQWidgets v8.3.2 Release, October-17-2019



jqxGrid Dark Mode

What’s New:

– Angular Ivy support.

What’s Fixed:

– Fixed an issue in jqxGrid Grouping regarding to its rendering when built with Angular Ivy.
– Fixed an issue in jqxGrid Angular Component about Grouping error thrown by setbatchgroupstate function.
– Fixed an issue in jqxGrid about Filtering Dates, when the date format is custom.
– Fixed an issue in jqxGrid about Filtering with custom source.filter callback function.
– Fixed an issue in jqxGrid about autoheight rendering overlap.
– Fixed an issse in jqxGrid about adding new row. The boundindex of the row was not set so editing it was not possible.
– Fixed an issue in jqxGrid about an error when using showfilterrow, groupable and autoloadstate.
– Fixed an issue in jqx.black.css about an outdated CSS syntax.
– Fixed an issue in jqxScheduler about rendering of appointments in TimelineView.
– Fixed an issue in jqxDataTable and jqxTreeGrid about dynamically changing the columnGroups.
– Fixed an issue in jqxTreeGrid about dynamically setting the theme property.
– Fixed an issue in jqxTabs about the enabled “showCloseButtons” option with “reorder” option.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, Angular5, angular7, angular8, ASP .NET, 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
, , , , , , , , , , , , ,

Leave a comment

Angular Ivy

Introducing Angular Ivy to jQWidgets

Angular Ivy

What is Angular Ivy?

Ivy is the code name for Angular’s next-generation compilation and rendering pipeline. It takes your Typescript code and transpile it to Javascript.
Starting with Angular version 8, you can choose to opt in to start using a preview version of Ivy and help in its continuing development and tuning. More about Ivy: https://angular.io/guide/ivy.
Ivy is smaller, faster, and simpler. It will become the default engine in Angular 9.
Angular Ivy includes two key concepts: Locality and Tree-shaking.

Locality and Tree-shaking

Locality means that Ivy compiles one file at a time. It only looks at a component and its template, not its dependencies, when generating the output. Tree-shaking means that, if you are not using something in Angular, it does not get included.

What Ivy Means to all Angular application developers

By using Angular Ivy, the benefits are:
  1. 1. Better build times (with a more incremental compilation)
  2. 2. Better build sizes (with a generated code more compatible with tree-shaking)
  3. 3. Unlocks new potential features (metaprogramming or higher order components, lazy loading of component instead of modules, a new change detection system not based on zone.js…)
  4. 4. Human Readable Code
  5. 5. Faster Development

The Good News about jQWidgets & Angular Ivy

We are very happy to share that jQWidgets Angular Components are now fully compatible and tested with the Angular Ivy Engine. Now you can build your apps with the latest and biggest feature of Angular and take use of all of its advantages. You may take a look at: jqwidgets-ng

We do not have to change how we write our applications.
Angular Ivy View Engine aims to be compatible with the existing applications,
so we will just need to turn it on, no changes to the code needed.

ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, Angular5, angular7, angular8
, , ,

Leave a comment

jQWidgets ver8.2.0

The newest version of jQWidgets includes the following changes:

What’s New:

– Added Smart Web Components to the package.

What’s Fixed:

– Fixed Angular 8 related issue in jqxGrid grouping.
– Fixed Angular 8 related issue in jqxGrid filtering.
– Fixed Angular 8 related issue in jqxGrid, jqxDataTable and jqxTreeGrid about data export.
– Fixed Angular 8 related issue in jqxListBox about inserting new items.
– Fixed Angular 8 related issue in jqxCheckBox about the checked event.
– Fixed Angular 8 related issue in jqxGrid about the virtualization.
– Fixed Angular 8 related issue in jqxDateTimeInput about the Localization and Formatting.
– Fixed Angular 8 related issue in jqxCalendar about the Localization and Formatting.
ANGULAR, angular8


Leave a comment

Rotate Grid Column Headers

With this post, we will teach you how to rotate Grid column headers. 1. Add a new DIV tag to the HTML page and set its “id” to “jqxgrid”. 2. Create a new jqxGrid instance. Each column in the Grid has a ‘classname’ property which we set to a custom class called ‘rotate’.

  var data = new Array();
  var firstNames = [
      "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
  var lastNames = [
      "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
  var 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"];
  var priceValues = [
      "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
  for (var i = 0; i < 100; i++) {
      var row = {};
      var productindex = Math.floor(Math.random() * productNames.length);
      var price = parseFloat(priceValues[productindex]);
      var quantity = 1 + Math.round(Math.random() * 10);
      row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
      row["productname"] = productNames[productindex];
      row["price"] = price;
      row["quantity"] = quantity;
      row["total"] = price * quantity;
      data[i] = row;
  }
  var source = {
      localdata: data,
      datatype: "array"
  };
  var dataAdapter = new jqx.dataAdapter(source, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}
  });

  const grid = new jqxGrid('#jqxgrid', {
      theme: 'energyblue',
      altrows: true,
      width: 500,
      columnsheight: 100,
      source: dataAdapter,
      columns: [{
          text: 'First Name',
          datafield: 'firstname',
          width: 100,
          classname: 'rotate'
      }, {
          text: 'Last Name',
          classname: 'rotate', 
          datafield: 'lastname',
          width: 100
      }, {
          classname: 'rotate', 
          text: 'Product',
          datafield: 'productname',
          width: 180
      }, {
          classname: 'rotate', 
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          classname: 'rotate', 
          text: 'Unit Price',
          datafield: 'price',
          width: 90,
          cellsalign: 'right',
          cellsformat: 'c2'
      }, {
          classname: 'rotate', 
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }]
  });


3. The third and final step is to add our .rotate class to the Style section.


.rotate > div > div {
  display: flex;
  justify-content: center;
  transform: rotate(45deg);
  transform-origin: center center;
}


jQWidgets, jqxGrid
, , ,

Leave a comment

Gantt Chart

New Gantt Chart Component


We are happy to announce our new Gantt Chart component. It is included in our “Smart” product line and is part of the jQWidgets subscription for new and existing customers.

Gantt chart

Gantt Features


  • Auto Schedule
  • Expand/Collapse
  • Localization
  • State Maintenance
  • Project Drag and Resize
  • Tasks Drag and Resize
  • Synced Projects
  • Nonworking days and hours
  • Nested Projects
  • Ranges of tasks and projects
  • Task Connections
  • Zooming
  • Auto Height
  • Custom Task Editor

Gantt Chart Example


Gantt Chart

More examples: https://www.htmlelements.com/demos/.
Uncategorized
, , , ,

Leave a comment

Meet the Theme Builder ver.2.0.0

Our New jQWidgets Theme Builder


We are very happy to announce that the jQWidgets Team built a brand new, cute and fresh Theme Builder tool. With the new theme builder, you will be able to more easily create, edit themes, import and export settings. It has two modes – Basic and Advanced. The Basic mode allows you to edit the most common settings for all UI components. In the Advanced mode, you can edit more specific and detailed settings for the particular components. For example: “Row alternation text color” when editing the Grid component.
The Theme Builder targets modern web browsers with CSS3 variables support i.e Edge, Chrome, Firefox, Safari and Opera. For old web browsers like IE10, IE11, etc, you can still use our previous theme builder available on that page: https://jqwidgets.com/themebuilder-ver1.0/.

Theme Builder Images:






Themes

The themes can be applied to applications built with any of the frameworks jQWidgets supports: Angular, React, Vue, jQuery, ASP .NET Core.
Uncategorized

Leave a comment

jQWidgets ver.8.1.4

The new version is a minor build of jQWidgets, which includes two bug fixes related to the jqxScheduler component.

What’s Fixed:

– Fixed an issue in jqxScheduler regarding the rendering of appointments in timelineDayView when “exactTime” is turned on, the scale is 10 minutes and the appointment’s duration is less than 5 minutes.
– Fixed an issue in jqxScheduler resulting in error about globalize.js in Angular 8.
ANGULAR, angular8
, , ,

Leave a comment

jQWidgets ver.8.1.3

We are happy to announce the newest version of jQWidgets.

What’s Improved:

– jqxGrid row details can have variable dynamic height.

What’s Fixed:

– Fixed an issue in jqxGrid about row details visibility in Firefox when the Grid has many columns.
– Fixed an issue in jqxGrid about incorrect filtering through checkedlist filter, when there is “null” value in the Grid’s data.
– Fixed an issue in jqxGrid about scrolling right, then the exported data (xls) shows as a blank column.
– Fixed an issue in jqxScheduler about incorrectly rendered timeline appointment, when the appointment is longer than month, exact-time rendering is enabled and the view is timeline month view.
– Fixed an issue in jqxKanban about the columns rendering, expand and collapse, when trying to add dynamically new columns.
– Fixed an issue in jqxKanban addItem method. The kanban-item-id was incorrectly set.
– Fixed an issue in jqxKanban regarding dynamically setting the source. That may result to duplicated items in some cases.
– Fixed an issue in jqxDropDownList regarding the label rendering when the width is in percentages.
– Fixed an issue regarding Angular 8 production build, Globalize.js and jqxCalendar, jqxDateTimeInput and jqxScheduler.



ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, Angular5, angular7, angular8, Chart, 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 Widgets, jQWidgets, jqxButton, jqxCalendar, jqxChart, jqxCheckBox, jqxComboBox, 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

Integrating jQWidgets with Python and Zerynth for IOT

Our partner Zerynth wrote an interesting post which shows how to control Servo Motors for Internet of Things projects by using Python, Zerynth Studio and jQWidgets.



Servo Motor is a rotary actuator used for precise control of angular position.

Zerynth Studio is used to program the microcontroller-based board in Python and Zerynth App to run the JQWidgets-based graphical user interface. The web ui component used in the app is our jqxKnob component.

Read the full post here: Using Python to control Servo Motors for Internet of Things projects.

Another interesting post with Python and our ColorPicker web UI Component: Control Neopixels using Python and JQWidgets


Uncategorized
, , , ,

Leave a comment