Details of the Markup

Parent Previous Next

If you copy paste any of the above examples, you should see a basic grid render in the browser like the screenshot below.

Let us examine the html markup used to generate the grid. Since the comments in the


1) The HTML wrapper:

<!doctype html>

<html lang="en" ng-app="myApp">

<head>

 <meta charset="utf-8">

 <title>Simple</title>


2) The framework specific imports (These are from the jquery sample)

 

       <!--These are jquery and plugins that we use from jquery-->

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery-1.8.2.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery-ui-1.9.1.custom.min.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.maskedinput-1.3.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.watermarkinput.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.ui.menu.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.toaster.js"></script>

3) The HTMLTreeGrid imports - The first one is the actual framework specific minified version, the second one lets you specify where your images are stored, and the third one is just a reference to the dozens of styling properties that the grid exposes.

       <!--These are specific to htmltreegrid-->

   <script type="text/javascript" src="http://htmltreegrid.com/demo/minified-compiled-jquery.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/examples/js/Configuration.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/themes.js"></script>

3) The css imports, one for the framework (jQuery UI) and the other for the HTMLTreeGrid (flexicious.css).

       <!--css imports-->

   <link rel="stylesheet" href="http://htmltreegrid.com/demo/flexicious/css/flexicious.css" type="text/css"/>

   <link rel="stylesheet" href="http://htmltreegrid.com/demo/external/css/adapter/jquery/jquery-ui-1.9.1.custom.min.css" type="text/css"/>

   

4) The grid initialization code, including the data that the grid is supposed to show. This data is usually JSON, although we will go over some examples that cover other kinds of backend data:


 <script type="text/javascript">

       $(document).ready(function(){

           var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),

             {

             dataProvider: [

                               { "id": "5001", "type": "None" },

                               { "id": "5002", "type": "Glazed" },

                               { "id": "5005", "type": "Sugar" },

                               { "id": "5007", "type": "Powdered Sugar" },                                                { "id": "5006", "type": "Chocolate with Sprinkles" },                                        { "id": "5003", "type": "Chocolate" },

                               { "id": "5004", "type": "Maple" }

                               ]

                   });

       });

   

5) The div that the grid will render inside:


<div id="gridContainer" style="height: 400px;width: 100%;">

</div>