SpreadJS 14
Getting Started / Quick Start / Data Binding
In This Topic
    Data Binding
    In This Topic

    The following section describes detailed steps to load data from a data source into a table.

    You can add the script from the steps below to the HTML page created in Quick Start.

    Step 1: Create Sample Data for Data Source

    Create createSampleData function which contains a student's report card data.

    JavaScript
    Copy Code
    //1:- create createSampleData()
    function createSampleData() {
        // Create sample report card data
    data
        return [
            {
                Course: "Calculus",
                Term: 1,
                Credit: 5,
                Score: 80,
                Teacher: "Nancy.Feehafer",
            },
            {
                Course: "P.E.",
                Term: 1,
                Credit: 3.5,
                Score: 85,
                Teacher: "Andrew.Cencini",
            },
            {
                Course: "Political Economics",
                Term: 1,
                Credit: 3.5,
                Score: 95,
                Teacher: "Jan.Kotas",
            },
            {
                Course: "Basic of Computer",
                Term: 1,
                Credit: 2,
                Score: 85,
                Teacher: "Steven.Thorpe",
            },
            {
                Course: "Micro-Economics",
                Term: 1,
                Credit: 4,
                Score: 62,
                Teacher: "Jan.Kotas",
            },
            {
                Course: "Linear Algebra",
                Term: 2,
                Credit: 5,
                Score: 73,
                Teacher: "Nancy.Feehafer",
            },
            {
                Course: "Accounting",
                Term: 2,
                Credit: 3.5,
                Score: 86,
                Teacher: "Nancy.Feehafer",
            },
            {
                Course: "Statistics",
                Term: 2,
                Credit: 5,
                Score: 85,
                Teacher: "Robert.Zare",
            },
            {
                Course: "Marketing",
                Term: 2,
                Credit: 4,
                Score: 70,
                Teacher: "Laura.Giussani",
            },
        ];
    }
    

    Step 2: Add Table with Specified Data Source

    1. Create loadTable function and invoke suspendPaint and resumePaint methods (following best practices) and get the active spreadsheet.
      JavaScript
      Copy Code
       //2.1: Create table with data from a data source
             function loadTable(ss, data) {
          //suspend paint to repaint all changes at once as best practice
             ss.suspendPaint;
             try {
              //Get the active spreadsheet
              var sheet = ss.getActiveSheet;
                } catch (e) {
              alert(e.message);
             }
            //Resume paint to repaint entire spread instance with all changes at once
            ss.resumePaint;
          }
      

    2. Use addFromDataSource method within the loadTable function to add a range table with specified data source to the active sheet.
      JavaScript
      Copy Code
          //2.1: Create table with data from a data source
          function loadTable(ss, data) {
            ss.suspendPaint;
            try {
              var sheet = ss.getActiveSheet;
              //2.2: Add a range table with the specified data source
              var table = sheet.tables.addFromDataSource(
                "Table1",
                0,
                0,
                data,
                GC.Spread.Sheets.Tables.TableThemes.medium2
              );
             } catch (e) {
              alert(e.message);
            }
            ss.resumePaint;
          }
      

    Step 3: Set Table Style

    1. Modify table style by setting highlightFirstColumn and showHeader methods to True.
    2. Set column width by using setColumnWidth method.
      JavaScript
      Copy Code
      //2: Create table with data from a data source
      //3: Set table styles
          function loadTable(ss, data) {
            //suspend paint to repaint all changes at once as best practice
            ss.suspendPaint();
            try {
              //Get the active spreadsheet
              var sheet = ss.getActiveSheet();
       
              //Add a range table with the specified data source      
              var table = sheet.tables.addFromDataSource(
                "Table1",
                0,
                0,
                data,
                GC.Spread.Sheets.Tables.TableThemes.medium2
              );
              // 3.1) Show header
              table.showHeader(true);
              
              // 3.1) Highlight first column
              table.highlightFirstColumn(true);
       
              // 3.2) Set column widths
              sheet.setColumnWidth(0, 130);
              sheet.setColumnWidth(1, 130);
              sheet.setColumnWidth(2, 70);
              sheet.setColumnWidth(3, 70);
              sheet.setColumnWidth(4, 100);
              sheet.setColumnWidth(5, 260);
       
            } catch (e) {
              alert(e.message);
            }
            //Resume paint to repaint entire spread instance with all changes at once
            ss.resumePaint();
          }
      

    Step 4: Refresh SpreadJS Instance

    1. Create refresh function to refresh the SpreadJS instance and remove the changes that are made using the reset method. This function also the loads the sample data and adds a table using loadTable(ss, data) function.
      JavaScript
      Copy Code
      //4:- Create refresh function
      function refresh() {
          var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
          // Get activesheet
          var sheet = ss.getActiveSheet();
          // Reset the sheet and set the column count
          sheet.reset();
          sheet.setColumnCount(7);
          // Load the table to the Spread instance using the sample data
          var data = createSampleData();
          loadTable(ss, data);
      }
      

    2. Invoke the refresh function while initializing the spread component.
      JavaScript
      Copy Code
      $(document).ready(function () {
          // initializing Spread
          var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
          // invoke the refresh function
          refresh();
      });
      

     The output of above code will look like below: