Index

KoolGrid API Reference

KoolGrid is a JavaScript UI component that represents DataGrid in a web browser.

Notes

  • The class members can be accessed by using the XML attribute in the Layout, but if you want to access the class members within JavaScript, you need to use the getter and setter methods or to set the variable.
    e.g. horizontalScrollPolicy and sortableColumns can be accessed by using the XML attribute in the Layout as below:

          <DataGrid id="dg1" horizontalScrollPolicy="auto" sortableColumns="true">\
              <columns>\
                  <DataGridColumn dataField="From" width="110"/>\
                  <DataGridColumn dataField="Subject" width="140"/>\
              </columns>\
          </DataGrid>\

    You need to use the getter and setter methods or to set the variable within JavaScript as below:

     dataGrid.setHorizontalScrollPolicy("auto");        // getter/setter type
     dataGrid.sortableColumns = fale;                    // variable type

    When you use JavaScript to access the class members you need to figure out which type of method is used for a class member.
    In this document, if a class member is accessed by using the getter and setter methods, the following description will be at the bottom of that member section: "getter and setter methods are used"

  • The class styles can be accessed by using the XML attribute in the Layout, but if you want to access the class styles within JavaScript, you need to use the getStyle and setStyle methods.
    e.g. backgroundColor can be accessed by using the XML attribute in the Layout as below:

          <DataGrid id="dg1" backgroundColor="#e0e0e0">\
              <columns>\
                  <DataGridColumn dataField="From" width="110"/>\
                  <DataGridColumn dataField="Subject" width="140"/>\
              </columns>\
          </DataGrid>\

    You need to use the getStyle and setStyle methods within JavaScript as below:

     var bgColor = dataGrid.getStyle("backgroundColor");
     dataGrid.setStyle("backgroundColor", "#e0e0e0");

    The camelCase notation must be used for the style name. e.g. backgroundColor (background-color is not allowed)

  • Two types of the event source (HTML level and Grid level) are supported in KoolGrid.
    The HTML-level events can be handled by using the addEvent and removeEvent methods, and the Grid-level events can be handled by using the addEventListener and removeEventListener methods.

     dataGrid.addEvent("keydown", keyboardEventHandler);                    // HTML-level event
     dataGrid.removeEvent("keydown", keyboardEventHandler);                // HTML-level event
    
     dataGrid.addEventListener("itemClick", itemClickEventHandler);        // Grid-level event
     dataGrid.removeEventListener("itemClick", itemClickEventHandler);    // Grid-level event

    In this document, the events noted as MouseEvent, KeyboardEvent are the HTML-level events.

The steps to create a grid

  1. Include the required CSS and JavaScript files in the <head> section of your web page.

    <!-- KoolGrid CSS -->
    <link rel="stylesheet" type="text/css" href="../KoolGrid/Assets/Kool.css"/>
    <!-- KoolGrid License -->
    <script type="text/javascript" src="../LicenseKey/KoolGridLicense.js"></script>
    <!-- KoolGrid Library -->
    <script type="text/javascript" src="../KoolGrid/JS/KoolGrid.js"></script>
  2. Include the additional JavaScript files depending on the function you want to use.

    <!-- js-xlsx Library -->
    <!-- For Excel file handling in IE7, 8 -->
    <!--[if IE]><script language="javascript" type="text/javascript" src="../KoolGrid/JS/shim.js"></script><![endif]-->
    <script type="text/javascript" src="../KoolGrid/JS/jszip.min.js"></script>
    <script type="text/javascript" src="../KoolGrid/JS/xlsx.min.js"></script>
  3. Create a <DIV> in the <body> section.

     <div class="content">
         <!-- Grid will be represented in this DIV -->
         <div id="gridHolder"></div>
     </div>
  4. Write the following JavaScript codes in the <head> section.

    // Set the name of the function to be called when the grid is ready to be created.
    var jsVars = "KoolOnLoadCallFunction=gridReadyHandler";
    
    // Creating a DataGrid
    // Parameters
    //  1. Grid ID
    //  2. DIV ID (Grid will be represented in this DIV)
    //  3. Variables (jsVars) referenced by the KoolGrid library 
    //  4. Grid width (if omitted, 100%)
    //  5. Grid height (if omitted, 100%)
    KoolGrid.create("grid1", "gridHolder", jsVars, "100%", "100%");
  5. Write the following JavaScript codes, which set the layout and data to create a grid.

    // The function to be called when the grid is ready to be created
    function gridReadyHandler(id) {
       gridApp = document.getElementById(id);
       gridRoot = gridApp.getRoot();
    
       gridApp.setLayout(layoutStr);
       gridApp.setData(gridData);
    }
    
    var gridApp, gridRoot, dataGrid;
  6. An example layout (XML)

      var layoutStr = '\
      <?xml version="1.0" encoding="utf-8"?>\
      <KoolGrid>\
          <NumberFormatter id="numfmt" useThousandsSeparator="true"/>\
          <DataGrid id="dg1" horizontalScrollPolicy="auto" verticalAlign="middle" textAlign="center">\
              <columns>\
                  <DataGridColumn dataField="From" width="110"/>\
                  <DataGridColumn dataField="Subject" width="140"/>\
                  <DataGridColumn dataField="ReceiveDate" headerText="Date"/>\
                  <DataGridColumn dataField="CC"/>\
                  <DataGridColumn dataField="Level"/>\
                  <DataGridColumn dataField="Length" textAlign="right" formatter="{numfmt}"/>\
                  <DataGridColumn dataField="AttachCount" textAlign="right"/>\
              </columns>\
          </DataGrid>\
      </KoolGrid>';
  7. An example dataset (JSON) - JavaScript array, XML, JSON, CSV, TSV are supported.

     var gridData = [
          {From: "Amit", Subject: "GMC-1 Release1", ReceiveDate: "2016/09/06", SendDate: "2016/09/06", CC: "Jim", Length: 451572, Level: 1, AttachCount: 0},
          {From: "Amit", Subject: "GMC-1 Release3", ReceiveDate: "2016/08/06", SendDate: "2016/08/05", CC: "Jim", Length: 693572, Level: 3, AttachCount: 1},
          {From: "Amit", Subject: "GMC-1 Release3", ReceiveDate: "2016/08/06", SendDate: "2016/08/06", CC: "Jim", Length: 8281, Level: 1, AttachCount: 12}
     ];