# jQuery jQuery

npm version (opens new window) npm downloads (opens new window) Github issues (opens new window) Github repo (opens new window)

ActiveWidgets Datagrid for jQuery.

ATTENTION!

This package requires dependencies under ⚠️ FREE TRIAL/COMMERCIAL license. You have to purchase a license (opens new window) 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) (opens new window) and $.on(event, handler) (opens new window) 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>;
}

← @activewidgets/js →