# TreeGrid examples

API documentation

## Basic

Root node | Additional info
Node 1-1 | Additional info
Node 1-2 | Additional info
Node 1-2-1 | Additional info
Node 1-2-2 | Additional info
Root node | Additional info
Node 2-1 | Additional info

Make tree structure with `.treegrid-` and `.treegrid-parent-` classes for `<tr>` tag. Add class `expanded` to node if you want to show it expanded.

    <table class="tree">
      <tbody>
        <tr class="treegrid-1 expanded"><td>Root node</td><td>Additional info</td></tr>
        <tr class="treegrid-2 treegrid-parent-1"><td>Node 1-1</td><td>Additional info</td></tr>
        <tr class="treegrid-3 treegrid-parent-1"><td>Node 1-2</td><td>Additional info</td></tr>
        <tr class="treegrid-4 treegrid-parent-3"><td>Node 1-2-1</td><td>Additional info</td></tr>
        <tr class="treegrid-5 treegrid-parent-3"><td>Node 1-2-2</td><td>Additional info</td></tr>
        <tr class="treegrid-6"><td>Root node</td><td>Additional info</td></tr>
        <tr class="treegrid-7 treegrid-parent-6"><td>Node 2-1</td><td>Additional info</td></tr>
      </tbody>
    </table>

To initialize TreeGrid, use JavaScript:

    $('.tree').treegrid();

## Data loading

Root node | Additional info
Root node | Additional info

Add to table structure `data-count` attribute to make node loadable. In this attribute stores child node count. But in fact, it does not matter how many childs actually node have. Setting this attribute indicates that the necessary data loading.

    <tr class="treegrid-1" data-count="2"><td>Root node</td><td>Additional info</td></tr>

Data loading starts automaticaly when node expands. To add nodes use `source` option. You can use this option as function. If function returns false, node is not expands. Function should return array of strings, that contains html of adding rows.

    $('.tree').treegrid({
      source: function(id, response) {
        if (id == 1) response(['<tr><td>Loaded node 1</td></tr>']);
      }
    });

Also you can use `source` as url. Server returns data in `json` format.

    $('.tree').treegrid({
      source: '/data.php'
    });

## Adding and removing nodes

Add root

Root node | Add child
Root node | Additional info
Node 2-1 | Additional info

Use `add` function to add nodes. Nodes will added to element, that execute this function. If you want to add root nodes, call this function from table.

    $('.tree').treegrid('add', ['<tr><td>Added root</td></tr>']);
    $('.treegrid-1').treegrid('add', ['<tr><td>Added node</td></tr>']);

Root node | Remove me
Node 1-1 | Remove me
Node 1-2 | Remove me
Node 1-2-1 | Remove me
Node 1-2-2 | Remove me
Root node | Remove me
Node 2-1 | Remove me

Use `remove` function to remove nodes. When node removes, its children remves too.

    $('.treegrid-1').treegrid('remove');

## Moving nodes

Move node

Root node | Additional info
Node 1-1 | Additional info
Node 1-2 | Additional info
Node 1-2-1 | Additional info
Node 1-2-2 | Additional info
Node 1-3 | Additional info
Node 1-4 | Additional info
Root node | Additional info
Node 2-1 | Additional info

To make nodes moveable, set `enableMove` option in `true`. To control the node movement use events `onMoveStart`, `onMoveStop`, `onMoveOver`, `onMoveOut`, `onMove`. Helper element has `.treegrid-container.dragging` class. In moving events `position` param means where node should be move (0-before, 1-inside, 1-after) target.

    $('.tree').treegrid({
      enableMove: true,
      onMoveOver: function(item, helper, target, position) {
        if (target.hasClass('treegrid-8')) return false;
        return true;
      }
    });

If you want to manualy move node, use JavaScript:

    $('.treegrid-8').treegrid('move', $('.treegrid-2'), 2);