Angular Grid

Angular Grid UI Component


jQWidgets Angular Grid is an advanced data grid user interface component built on top of Typescript, Angular and the jQWidgets framework. It is feature complete and is built by the same developers who implemented the best Javascript Grid – jqxGrid. With our Angular Grid, you can use the same API and functionalities.

GREAT PERFORMANCE


jqxGrid offers fast data updates on all end-user features such as grouping, sorting, paging, and scrolling. The Angular Grid also comes with row and column virtualization, which minimizes the amount of items that need to be rendered, and ensures unbeatable performance in spread-like scenarios with thousands of rows and columns.

UNIQUE FLEXIBILITY


jqxGrid is developed on top of the jQWidgets UI Framework and delivers a combination of unique features which can be easily enabled, disabled or customized. Our Angular Grid provides the ultimate flexibility over your data and its presentations including paging, grouping and sorting.

SORTING


The Angular Grid supports built-in powerful sorting capabilities like one-click automatic sorting, selection of sort option from a context menu, and sorting through APIs. The data grid automatically chooses the most appropriate comparison. Users can also implement and use a custom sort comparer. The sorting works well with all possible configurations including rows grouping and paging. Angular Grid also has an option to display an additional background in the sorted column.

Some of the other supported features by our Angular Grid are: Filtering, Paging, Grouping, Nested Grids, Pinned(Frozen) Columns, Conditional Formatting, Cells Editing, Row Editing, Data Validation and many more.


Lets start with a simple Angular Grid setup:

Template:
    <jqxgrid [width]="500" [source]="dataAdapter" [columns]="columns">
</jqxgrid>


Component:

    export class AppComponent {
//This generates some random array with data
data: any[] = generatedata(100);
source: any =
{
localdata: this.data,
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'price', type: 'number' }
],
datatype: 'array'
};
dataAdapter: any = new $.jqx.dataAdapter(this.source);
columns: any[] =
[
{ text: 'First Name', datafield: 'firstname', width: 200 },
{ text: 'Last Name', datafield: 'lastname', width: 200 },
{ text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
];
}


As you can see we can either directly assign value to the property like with the width or we can use a property from our component class – source & columns.

And here is the result:

angular grid

Now let’s add some features to the Angular Grid:

    <jqxgrid [width]="500" [source]="dataAdapter" [columns]="columns"
[pageable]="true" [editable]="true" [filterable]="true" [autoheight]="true">
</jqxgrid>


The code in AppComponent stays the same(as above Component example), because we don’t have anything new we need from there. This looks like this:

Editing Feature:

angular grid editing

Paging Feature:

jQWidgets Angular Grid has integrated paging functionality that lets the users to view large data sets in multiple pages for faster loading and intuitive navigation. Users also have an option to select how many records they would like to see on a page by using a page-size dropdown. To navigate to a page, users can enter the page number in the page-input box and click the ‘enter’ key or they can click the ‘next’ and ‘previous’ navigation buttons to navigate to the next or the previous page.

angular grid paging

Filtering Feature:

angular grid filtering

Every event you have in the normal jqxGrid is available in Angular Grid too. All you need to do is write on before it and upperCase it’s first letter.

You bind it like this:

 <jqxgrid (onCellbeginedit)="cellBeginEditEvent($event)"
[width]="500" [source]="dataAdapter" [columns]="columns">
</jqxgrid>


The Angular Grid by jQWidgets is fast and easy to use. It works across devices and has a consistent look and behavior on PCs, tablets and mobile phones. It is a perfect solution for complex Angular UI applications.

Browser our Grid demos: http://www.jqwidgets.com/angular/angular-grid/
ANGULAR, Angular 2, ANGULAR GRID, AngularJS, JavaScript
, , , , ,

Leave a comment

jQWidgets 4.5.2

We are happy to announce that jQWidgets 4.5.2 is available for download.
In this release, we prepared and added more than 650 examples for our ReactJS components. We hope that you will find them useful and will allow you to use the react components more easily.

Demos: React Components

Documentation: React Components Documentation
React, React Javascript Library, REACTJS

Leave a comment

React Grid

jQWidgets React Grid component represents an unique and feature complete UI Grid component built on top of ReactJS and the jQWidgets framework. Our React Grid component is fast, it has many enterprise features such as:

  • Grid Data Export
  • Grid Data Print
  • Conditional Cells Formatting
  • Cells and Full Row Edit
  • Server side operations
  • Grid Sorting
  • Grid Filtering
  • Grid Grouping
  • Grid Paging




Demos page and sources: React Grid
Uncategorized
, ,

Leave a comment

How to use Webpack with React

Webpack is an amazing tool for processing and bundling together all of your project modules.

Initial Webpack Configuration



For start we need to tell Webpack our application entry and output points


    module.exports = {
        entry: {
            myApp: __dirname + '/src/app.js',
        }
        output: {
            path: __dirname + '/build',
            filename: '[name].bundle.js'
        }
    }

entry: Webpack gets one file for entry
output.path: Webpack outputs file to ‘./build’ folder located in our root folder
output.filename: Webpack names both files according to their entry
In most cases you will have only 1 entry file, from which Webpack will get to all needed other files. But it is possible to have more than one.

Loaders

Babel

Babel is a platform for JavaScript compilation and tooling. It’s a powerful tool that, among other things, let you: Use next versions of JavaScript (ES6 / ES2015, ES7 / ES2016, etc.), not yet fully supported in all browsers. Use JavaScript syntax extensions, such as React’s JSX.
Babel is a stand alone tool, but it can be used as a loader and pair very well with Webpack.

     
    {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query:
        {
            presets: ['es2015', 'react']
        }
    }

test: A regular expression that matches the file extensions that should run through this loader (Required).
loader: The name of the loader (Required).
include / exclude: Optional setting to manually set which folders and files the loader should explicitly add or ignore.
query: The query setting can be used to pass Additional options to the loader.
There are a lot of more loaders like css or json and you must add them here if you need them in your project.
Important: In order to use this loaders we need to have their dependencies installed.
For more info about loaders please visit Webpack Official Page

Plugins

They serve the purpose of doing anything else that a loader cannot do.
Here are some examples:

DefinePlugin
  
    new webpack.DefinePlugin
    ({
        'process.env':
        {
            'NODE_ENV': JSON.stringify('production')
        }
    })

The DefinePlugin allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds.

UglifyJsPlugin
 
   new webpack.optimize.UglifyJsPlugin
   ({
       mangle: true,
       sourcemap: false,
       compress: { warnings: false }
   })

This plugin adds support for the UglifyJS Features.

Full Example

     
    var path = require('path');
    var webpack = require('webpack');
    module.exports =
    {
        entry:
        {
            myApp: __dirname + '/src/app.js',
        },
 
        output:
        {
            path: __dirname + '/build',
            filename: '[name].bundle.js'
        },
 
        module:
        {
            loaders:
            [{
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query:
                {
                    presets: ['es2015', 'react']
                }
            }]
        },
 
        plugins:
        [
            new webpack.DefinePlugin
            ({
                'process.env':
                {
                    'NODE_ENV': JSON.stringify('production')
                }
            }),
            new webpack.optimize.UglifyJsPlugin
            ({
                mangle: true,
                sourcemap: false,
                compress: { warnings: false }
            })
        ]
    };
 
Uncategorized
, , ,

Leave a comment

How to use Webpack with Angular 4

Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one or more bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS.

Initial Configuration



For start we need to tell Webpack our application entry and output points


    var path = require('path');
    module.exports = {
        entry: {
            appPart1: './src/appPart1.ts',
            appPart2: './src/appPart2.ts',
        }
        output: {
            path: path.resolve(__dirname, './dist/),
            filename: '[name].bundle.js'
        }
    }


entry: Webpack gets two files for entry
output.path: Webpack outputs both files to ‘./dist’ folder located in our root folder
output.filename: Webpack names both files according to their entry

In most cases you will have only 1 entry file – main.ts, from which Webpack will get to all needed other files.

Loaders


Angular is writter in TypeScript and supports external templates and styles.
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
But the browser alone don`t understand that. So we must get all of this into one(or several if the app is big) JavaScript file/s. We do that by using Webpack Loaders. Here are the most common used with Angular:

TypeScript


     
    {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
    }

HTML


     
    {
        test: /\.html$/,
        use: 'raw-loader'
    }

CSS


    {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
    }
 

test: File type to look for. We provide a regex expression that will match the required files

loaders/use: The loaders to use
Webpack processes Loaders from right to left, so the results of css-loader (the file contents) are passed to style-loader (adding the styles to the HTML document)
Important: In order to use this loaders we need to have their dependencies installed.
For more info about loaders please visit Webpack Official Page

Full Example


    'use strict';
    let path = require('path');
    let webpack = require('webpack');
 
    module.exports = {
        entry: './app/main.ts',
 
        output: {
            path: path.resolve(__dirname + '/dist'),
            filename: 'bundle.js'
        },
 
        module: {
            loaders:
            [
                {
                    test: /\.ts$/,
                    loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
                },
                {
                    test: /\.htm$/,
                    use: 'raw-loader'
                },
                {
                    test: /\.css$/,
                    loaders: ['style-loader', 'css-loader']
                }
            ]
        },
 
        plugins: [
            new webpack.ProgressPlugin(),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                path.join(process.cwd(), 'app')
            )
        ],
 
        resolve: {
            extensions: ['.ts', '.js']
        }
    };
 
Uncategorized
, , , ,

Leave a comment

Understanding How Webpack Works

Understanding How Webpack Works


Webpack is a module bundler. It takes disparate dependencies, creates modules for them and bundles them into manageable output files. This is especially useful for Single Page Applications (SPAs), which is the defacto standard for Web Applications today

Initial Configuration


For start we need to tell Webpack our application entry and output points
     
    var path = require('path');
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, './dist/),
         filename: 'bundle.js
        }
    }
entry: This is the main entry point of our application. This is where our initial loading and application logic will be output.path: An absolute path for the resulting bundle. We use a built-in Node.js function (path) to dynamically create an absolute path, relative to where we are output.filename: The filename of the resulting bundle. This can be anything, but by convention it’s called bundle.js __dirname: This is the directory name of the current file.

Loaders


In most of the occasions our project source files are HTML, CSS , JS/TS. Webpack understands JavaScript from the box, but what about the other file types? Here are the most common Webpack loaders for this files types: TypeScript

     
    {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
    }
test: File type to look for. We provide a regex expression that will match .ts files loaders: The loader to use HTML

     
    {
        test: /\.html$/,
        use: 'raw-loader'
    }
test: File type to look for. We provide a regex expression that will match .html files use: The loader to use CSS

 
    {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
    }
 
test: File type to look for. We provide a regex expression that will match .css files loaders: The loaders to use. Webpack processes Loaders from right to left, so the results of css-loader (the file contents) are passed to style-loader (adding the styles to the HTML document) Important: In order to use this loaders we need to have their dependencies installed. For more info about loaders please visit Webpack Official Page

Plugins


They serve the purpose of doing anything else that a loader cannot do. Here is an example:

     
    plugins: [
        new webpack.ProgressPlugin(),
        new webpack.ContextReplacementPlugin(
            resourceRegExp,
            [newContentResource],
            [newContentRecursive],
            [newContentRegExp]
        )      
    ]
ProgressPlugin: This plugin extracts progress information ContextReplacementPlugin: If the resource (directory) matches resourceRegExp, the plugin replaces the default resource, recursive flag or regExp generated by parsing with newContentResource, newContentRecursive or newContextRegExp respectively. If newContentResource is relative, it is resolve relative to the previous resource For more info about plugins please visit Webpack Official Page

Resolve


Here you can change how modules are resolved. Webpack provides reasonable defaults, but it is possible to change the resolving in detail. Example:
    
    resolve: {
        extensions: ['.ts', '.js']
    }
This automatically resolves certain extensions which is what enables users to leave off the extension when importing:
 
    import File from '../path/to/file'
 
For more info about resolve please visit Webpack Official Page

Full Example


    'use strict';
    let path = require('path');
    let webpack = require('webpack');
 
    module.exports = {
        entry: './app/main.ts',
 
        output: {
            path: path.resolve(__dirname + '/dist'),
            filename: 'bundle.js'
        },
 
        module: {
            loaders:
            [
                {
                    test: /\.ts$/,
                    loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
                },
                {
                    test: /\.htm$/,
                    use: 'raw-loader'
                },
                {
                    test: /\.css$/,
                    loaders: ['style-loader', 'css-loader']
                }
            ]
        },
 
        plugins: [
            new webpack.ProgressPlugin(),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                path.join(process.cwd(), 'app')
            )
        ],
 
        resolve: {
            extensions: ['.ts', '.js']
        }
    };
Uncategorized
, , , , , ,

Leave a comment

jQWidgets 4.5.1

What’s Improved:

– The jqxLayout/jqxDockingLayout “allowClose” setting in is now preserved when pinning tabbedGroups or unpinning autoHideGroups.

What’s Fixed:

– Fixed an issue in jqxNumberInput regarding mobile devices behavior when decimalSeparator is “,”.
– Fixed an issue in jqxScheduler regarding the exactTimeRendering functionality, when an appointment is rendered in 2 days.
– Fixed an issue in jqxScheduler regarding the edit dialog when the dialog is opened when there’s no focused cell.
– Fixed an issue in jqxPopover regarding the showArrowButton property, when it is set dynamically.
– Fixed an issue in jqxGrid regarding the tooltips in Checkbox column.
– Fixed an issue in jqxGrid regarding the clipboard paste functionality.
– Fixed an issue in jqxGrid regarding the toggle arrows display when the grid’s row details and grouping with aggregates features are enabled.
– Fixed an issue in jqxGrid regarding the grouping aggregates rendering logic.
– Fixed an issue in jqxGrid regarding the filter row dropdownlist and “select all” item.
– Fixed an issue in jqxGrid regarding the full row edit when “ESC” is pressed and “updaterow” is defined in the source object.
– Fixed an issue in jqxDataTable regarding the server-side filtering.
– Fixed an issue in jqxWindow regarding the dynamic enabling/disabling of window dragging.
– Fixed an issue in jqxWindow regarding the Tab key navigation after closing modal window.
– Fixed an issue in jqxTabs regarding the setTitleAt method when close buttons are enabled.
– Fixed an issue in jqxRibbon about the animationType: “slide”.
– Fixed an issue in jqxWindow regarding the method “destroy” in Internet Explorer.




Angular 2, AngularJS, ASP .NET, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, Chart, 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, typescript
, , , , , , , , ,

Leave a comment

Bootstrap ASP .NET Core Mvc Tag Helpers

For All major Bootstrap Components and JavaScript plugins, we built ASP .NET Core Mvc Tag Helpers.

That package is completely FREE.

Demos & Download: http://aspcore.jqwidgets.com/bootstrap

ASP .NET, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, 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
, , , , , , , , , , , , , , , , ,

Leave a comment

Asp .Net Mvc Tag Helpers Docs

New ASP .NET Core MVC Documentation page with Getting started, Styling and Appearance and API documentation pages for all ASP .NET Tag Helpers – asp.net-core-mvc-tag-helpers-documentation/. Each property, method and event on the API page includes a how-to-use ASP .NET example.
ASP .NET, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers

Leave a comment

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