# jQuery jQuery

npm version npm downloads Github issues Github repo

ActiveWidgets Datagrid for jQuery.

ATTENTION!

This package requires dependencies under ⚠️ FREE TRIAL/COMMERCIAL license. You have to purchase a license for each developer in your team before including this package in your application.

The library is available as an NPM package and over ActiveWidgets CDN.

> npm install --save @activewidgets/jquery

# NPM package

The main module adds mount function to jQuery and exports tpl function, does not expose internal component classes.

import { tpl } from "@activewidgets/jquery";

The css files are imported as dependencies - your bundler/build script should be configured to process css imports.

# Separate JS, CSS

If you build js and css separately - use @activewidgets/jquery/js and @activewidgets/jquery/css modules.

import { tpl } from "@activewidgets/jquery/js";  // code
import "@activewidgets/jquery/css";  // stylesheets

# Bundle

There is also a bundle module, which includes stylesheets as a string inside the javascript code and automatically injects them as a <style> tag into the page <head>.

import { tpl } from "@activewidgets/jquery/bundle";

This is the simplest if your build script does not like css imports.

For quick prototyping the package is also availble over ActiveWidgets CDN -

<script src="https://cdn.activewidgets.com/jquery"></script>

or, if you prefer separate js/css -

<link href="https://cdn.activewidgets.com/jquery/ax.css" rel="stylesheet" />
<script src="https://cdn.activewidgets.com/jquery/ax.js"></script>

which redirect to the latest version -

<script src="https://cdn.activewidgets.com/jquery@3.0.0/bundle.js"></script>
  or
<link href="https://cdn.activewidgets.com/jquery@3.0.0/ax.css" rel="stylesheet" />
<script src="https://cdn.activewidgets.com/jquery@3.0.0/ax.js"></script>

Use ActiveWidgets.jQuery global namespace with CDN packages.

const { tpl } = ActiveWidgets.jQuery;

# $.mount()

The package adds mount function to jQuery, which is used to create the components. The mount function does not require any arguments - it uses element tagName as a component ID.

<ax-datagrid id="my-grid-1"> ... </ax-datagrid>

You can apply any selector to find the placeholder element (but the tag must be ax-datagrid)

$('#my-grid-1')
    .prop('rows', rows)
    .mount();

To initialize or modify the component properties and to add event listeners use the standard $.prop(name, value) and $.on(event, handler) functions.

# Exported functions

Export Description
tpl HTML Templates
h JSX createElement

# tpl

The tpl function produces the render functions (templates) used for custom cells or other datagrid parts.

function contact({data}){
    return tpl`<div>
        <div class="bold">${data.contactName}</div>
        <div class="small">${data.contactTitle}</div>
    </div>`;
}

# h

Can be used for writing templates with JSX.

 /** @jsx h */
function contact({data}){
    return <div>
        <div class="bold">{data.contactName}</div>
        <div class="small">{data.contactTitle}</div>
    </div>;
}