# TreeGrid events example

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

## Code

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <title>Jquery-treegrid basic example</title>

        <link rel="stylesheet" href="../css/jquery.treegrid.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery.treegrid.js"></script>
        <script type="text/javascript">
          $(document).ready(function() {
                $('.tree').treegrid({
                onChange: function() {
                    alert("Changed: "+$(this).attr("id"));
                },
                onCollapse: function() {
                    alert("Collapsed: "+$(this).attr("id"));
                },
                onExpand: function() {
                    alert("Expanded "+$(this).attr("id"));
                }});
                $('#node-1').on("change", function() {
                    alert("Event from " + $(this).attr("id"));
                });
          });
        </script>

      </head>
      <body>

          <table class="tree">
            <tr class="treegrid-1">
              <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>
          </table>

      </body>
    </html>