jQWidgets 4.5.0

What’s New:

– React UI components.

What’s Fixed:

– Fixed an issue in jqxGrid regarding the DateTimeInput editor in Firefox.
– Fixed an issue in jqxGrid regarding the Tab-key navigation when the Grid is in edit mode and the editor is checkbox.
– Fixed an issue in jqxGrid regarding the Esc key behavior when the NumberInput column is in edit mode.
– Fixed an issue in jqxGrid regarding the auto-scroll behavior after editing and when grouping is turned on.
– Fixed an issue in jqxGrid regarding the row details expand/collapse behavior after sorting and filtering.
– Fixed an issue in jqxGrid regarding the filter row’s date range filter display after the grid is re-rendered.
– Fixed an issue in jqxScheduler regarding the columns rendering in timeline views after navigation.
– Fixed an issue in jqxTreeGrid regarding the auto-height calculation after cell editing when autoRowHeight is true.
– Fixed an issue in jqxCalendar and jqxDateTimeInput regarding their destroy method.
– Fixed an issue in jqxMaskedInput regarding the value property during initialization.
– Fixed an issue in jqxChart regarding the tooltip’s z-index.

Breaking changes:

Component selectors for Angular now start with “jqx” instead of “angular”. ASP .NET Tag Helpers now use dash style instead of camel case for creating helpers and setting attributes.
Uncategorized

Leave a comment

jQWidgets 4.4.0

This new release was focused entirely on improving the jQWidgets Angular 2 components and documentation. In this new release, you will also find multiple new examples about angular 2. Below is the list of changes:

- 30+ new examples for Angular 2.
- Angular 2 Web Pack support.
- Initialize jQWidgets Angular 2 Components through attributes.
- Angular 2 ngModel support.


View our Angular 2 Demos.
Angular 2
, ,

Leave a comment

Chart Studio

Chart Studio represents a cloud solution for visual editing and hosting of interactive charts. You can try it on: Chart Studio.

Chart
, , , ,

Leave a comment

jQWidgets 4.3.0

This release brings Angular 2 Components with support for the final Angular 2 version. The updated demos can be found on Angular 2 Components demos.
Major part of the release is the ASP .NET Core MVC Tag Helpers package. During the last few months, we built a .NET library with Tag Helpers for all components. Each ASP .NET Tag helper has the same API members. This means that if you are familiar with the jQWidgets API, you already know how to use this .NET package. If you are not, please refer to the documentation page. The Tag Helpers enable Server-Side code to participate in creating and rendering HTML elements in Razor files. For more information about the package, please refer to: ASP .NET Core MVC Documentation and the Demo page: ASP .NET Tag Helpers.

What’s New:

– Angular 2.0 Final version support.
– ASP .NET Core MVC Tag Helpers.
– ASP .NET Core MVC Bootstrap Tag Helpers.

What’s Improved:

– jqxDateTimeInput, jqxNumberInput Esc key behavior.

What’s Fixed:

– Fixed an issue in jqxTabs regarding the changing of tab titles dynamically. – Fixed an issue in jqxWindow regarding the changing of its content dynamically. – Fixed an issue in jqxProgressBar regarding its text layout. – Fixed an issue in jqxLayout regarding its rendering. – Fixed an issue in jqxRibbon regarding the z-index of its scroll buttons.
Angular 2
,

Leave a comment

ASP .NET MVC Core Tag Helpers

What is a ASP .NET MVC Core Tag Helper?


Tag Helper enables server-side code to participate in creating and rendering HTML elements in Razor files.

What Tag Helpers provide?


In general, HTML-friendly experience. Razor markup using Tag Helpers looks like standard HTML. Front-end designers familiar with HTML/CSS/JavaScript can edit Razor without learning C# Razor syntax. ASP .NET MVC Core Tag Helpers make you more productive and able to produce more robust, reliable, and maintainable code using information only available on the server.

What is ASP .NET MVC Core Tag Helpers for Bootstrap?


This is a package we built for the community. It provides Tag Helpers for the popular Boostrap framework. The package includes the following list of tag helpers:

  • Alert
  • Badge
  • Breadcrumb
  • Button
  • Carousel
  • Collapse
  • DropDown
  • Input
  • Jumbotron
  • Label
  • ListGroup
  • Media
  • Modal
  • NavBar
  • PageHeader
  • Pagination
  • Panel
  • Popover
  • ProgressBar
  • Tabs
  • Thumbnail
  • Tooltip
  • Well


Demo link: http://aspcore.jqwidgets.com/bootstrap”
Project link: https://github.com/jqwidgets/ASP.NET-Core-MVC-Bootstrap-Tag-Helpers
Installation link: https://www.nuget.org/packages/jQWidgets.AspNetCore.Mvc.Bootstrap.TagHelpers

What additional Tag Helpers to expect soon?



In several weeks, we release ASP .NET Tag Helpers for jQWidgets. It includes Tag Helpers for all the widgets we have. The package will be included in the jQWidgets subscription. Here is how a sample with the Grid’s Tag Helper will look:

@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
ViewData["Title"] = "ASP .NET MVC Grid Example";
}
<jqx-grid theme="@ViewData["Theme"]" sortable="true" filterable="true" autoheight="true" width="850" source="Model">
<jqx-grid-columns>
<jqx-grid-column columngroup="name" datafield="FirstName" width="100" text="First Name"></jqx-grid-column>
<jqx-grid-column columngroup="name" datafield="LastName" width="100" text="Last Name"></jqx-grid-column>
<jqx-grid-column datafield="Title" width="150"></jqx-grid-column>
<jqx-grid-column datafield="Address" width="200"></jqx-grid-column>
<jqx-grid-column datafield="City" width="150"></jqx-grid-column>
<jqx-grid-column datafield="Country"></jqx-grid-column>
</jqx-grid-columns>
<jqx-grid-column-groups>
<jqx-grid-column-group name="name" text="Name"></jqx-grid-column-group>
</jqx-grid-column-groups>
</jqx-grid>

Demo link: Grid Tag Helper

ASP .NET, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery Widgets, jQWidgets
, , , , , , , , , , , , , , , , , , , , , ,

Leave a comment

Angular 2 RC 5

Angular 2

Angular 2 RC 5



We tested our Angular 2 Components with the latest version of Angular 2 – Angular 2 RC 5 and we are happy to share with you that we did not encounter any issues. Actually, what we see is better performance and loading time compared to previous Release Candidates. Below, you will find a sample systemjs.config.js which can be used with our Angular 2 samples. It is configured in such way that the latest version of Angular 2 is always used.
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'https://npmcdn.com/@angular',
        'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api',
        'rxjs': 'https://npmcdn.com/rxjs',
        'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
        'typescript': 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);

    var config = {
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'ts',
        defaultJSExtensions: true,
        typescriptOptions: {
            tsconfig: true
        },
        meta: {
            'typescript': {
                "exports": "ts"
            }
        },
        map: map,
        packages: packages
    }
    System.config(config);
})(this);
Try our Angular 2 Demos.
Angular 2, AngularJS
, , , , ,

Leave a comment

jQWidgets 4.2.1

This release resolves several issues which were reported by our users.

What’s Fixed:

- Fixed issues in Angular 2 and Typescript Examples.
- Fixed an issue in jqxScheduler regarding the legend area rendering.
- Fixed an issue in jqxScheduler regarding the auto-height behavior.
- Fixed an issue in jqxRibbon regarding the scrolling behavior.
- Fixed an issue in jqxProgressBar regarding the value updates.
Uncategorized
, , , , , , ,

Leave a comment

jQWidgets 4.2.0

Angular 2

Angular 2

Typescript

Typescript



The focus of this release was on Angular 2 and Typescript. This new version of jQWidgets brings Angular 2 Components and Typescript definitions for all widgets. We also added more than 150 examples about Angular 2 and Typescript. Below you can find the highlights.

What’s New:

- Typescript Definitions.
- Angular 2 Components.
- More than 150 Examples about New Typescript and Angular 2
- jQuery 3.1.0 support.
- jqxGrid Grouping Aggregates.
- New layout options in jqxLayout and jqxDockingLayout widgets. It is not possible to set the size of the content part of an autoHideGroup’s pop-up.
- New jqxDockingLayout event – “floatGroupClosed”, which is triggered when a float group has been closed.

What’s Fixed:

- Fixed an issue in jqxGrid regarding the getrowid method results.
- Fixed an issue in jqxGrid regarding the data export of aggregates when selection mode is set to “checkbox”.
- Fixed an issue in jqxGrid regarding the initwidget callback function parameters.
- Fixed an issue in jqxGrid regarding the data export rendering when some columns is pinned.
- Fixed an issue in jqxGrid regarding the jqxDateTimeInput editor when editing begins with key press.
- Fixed an issue in jqxGrid regarding the jqxDateTimeInput editor selection positioning.
- Fixed an issue in jqxDateTimeInput regarding the AM/PM editing.
- Fixed an issue in jqxKanban regarding the rendering when kanban items overflow and the kanban widget is resized.
- Fixed an issue in jqxComboBox regarding the showArrow property when it is set dynamically.
- Fixed an issue in jqxScheduler regarding the auto-height of monthView cells.
- Fixed an issue in jqxBarGauge regarding the dynamic changing of values.
- Fixed an issue in jqxKanban regarding the dynamic changing of resources property.
- Fixed an issue in jqxRibbon regarding the “reorder” event being called incorrectly and causing an error to be thrown in jqxDockingLayout.
- Fixed an issue in jqxLayout/jqxDockingLayout occurring when resizing groups with relatively small width/height.
- Fixed an issue in jqxDockingLayout resulting in content of docked float groups not being loaded by the method “loadLayout”.
Uncategorized
, , , , , , , ,

1 Comment

Typescript

The next version of jQWidgets will come with Typescript definitions for all widgets and with many examples which demonstrate how to use the widgets with Typescript. Below is an example of a Grid defined with Typescript. It is actually the Grid’s default functionality example which you can find in the Grid’s demos page, but written in Typescript.
/// <reference path="../../../jqwidgets/jqwidgets.d.ts"></reference>
function createDefaultFunctionalityGrid(selector) {
var url = "../sampledata/products.xml";
// prepare the data
var source =
{
datatype: "xml",
datafields: [
{ name: 'ProductName', type: 'string' },
{ name: 'QuantityPerUnit', type: 'int' },
{ name: 'UnitPrice', type: 'float' },
{ name: 'UnitsInStock', type: 'float' },
{ name: 'Discontinued', type: 'bool' }
],
root: "Products",
record: "Product",
id: 'ProductID',
url: url
};
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (value < 20) {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '';
}
else {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
}
};
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
// initialize jqxGrid
// initialization options - validated in typescript
// jqwidgets.GridOptions has generated TS definition
var options: jqwidgets.GridOptions = {
width: 850,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable: true,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
{ text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
{ text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
{ text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
{ text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
],
columngroups: [
{ text: 'Product Details', align: 'center', name: 'ProductDetails' }
]
};
// creates an instance
var myGrid: jqwidgets.jqxGrid = jqwidgets.createInstance(selector, 'jqxGrid', options);
}


In the HTML page, we call createDefaultFunctionalityGrid function.
    <script>
$(document).ready(function () {
createDefaultFunctionalityGrid('#jqxgrid');
});
</script>


The Typescript integration will soon be online on our website. We are also working hard to provide AngularJS 2.0 integration for all our Javascript widgets.

AngularJS, 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, jqxGrid, typescript
, , , , , , , , , , , , , , , ,

1 Comment

jQWidgets 4.1.2

What’s New:

9 new Interactive/Template demos

What’s Fixed:

- Fixed an issue in jqxResponse regarding Microsoft Edge browser detection.
- Fixed an issue in jqxKanban regarding the updateItem method when itemRenderer is implemented.
- Fixed an issue in jqxScheduler regarding the ICAL export after appointment is updated.
- Fixed an issue in jqxScheduler regarding same Ids of rows and appointments.
- Fixed an issue in jqxGrid regarding the rendering of textboxes in filter row.
- Fixed an issue in jqxGrid regarding the handlekeyboardnavigation function. It’s now called only if the key event is raised by jqxGrid or some of its inner HTML elements.
- Fixed an issue in jqxGrid regarding the cell hover when there are pinned columns and horizontal bar was moved.
- Fixed an issue in jqxListBox regarding the “render” method call.
- Fixed an issue in jqxCalendar regarding the stepMonths property behavior.
- Fixed an issue in jqxDropDownButton regarding the drop down’s auto-closing behavior when there is another drop down widget inside it.
Uncategorized

Leave a comment