Answers

• allan Posts: 63,520Questions: 1Answers: 10,473 Site admin

  November 2017

  Could you clarify in what way it isn't working please? Are you seeing any error messages?

  Allan
• elenastenina Posts: 5Questions: 2Answers: 0

  November 2017 edited November 2017

  I was able to generate a table in browser but could not find extended buttons "New", "Edit" and "Delete" above of table.

  I am using these libraries below for my Visual Studio:

   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jqc-1.12.3/jqc-1.12.3/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/af-2.2.2/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/kt-2.3.2/r-2.2.0/rg-1.0.2/rr-1.2.3/sc-1.4.3/sl-1.2.3/datatables.min.css">
      <link href="~/Areas/Eforms/Content/DataTables/css/generator-base.css" rel="stylesheet" />
      <link href="~/Areas/Eforms/Content/DataTables/css/editor.bootstrap4.css" rel="stylesheet" />
  
      <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs4/jqc-1.12.3/jqc-1.12.3/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/af-2.2.2/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/kt-2.3.2/r-2.2.0/rg-1.0.2/rr-1.2.3/sc-1.4.3/sl-1.2.3/datatables.min.js"></script>
      <script src="~/Areas/Eforms/Scripts/DataTables/dataTables.editor.min.js"></script>
      <script src="~/Areas/Eforms/Scripts/DataTables/editor.bootstrap4.min.js"></script>
      <script src="~/Areas/Eforms/Scripts/DataTables/table.Travel.js"></script>
  

  And table code below:

  <div class="container">
  
                  <h1 style="font-size:20px">
                      Travel Expense
                  </h1>
  
                  <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="Travel" style ="width:100%">
                      <thead>
                          <tr style="background-color: #018751">
                              <th>Date</th>
                              <th>Type of Expense</th>
                              <th>Decription</th>
                              <th>CostCenter</th>
                              <th>Account Number</th>
                              <th>W/O</th>
                              <th>Project</th>
                              <th>Amount</th>
                              <th>Attachment</th>
                          </tr>
                      </thead>
                  </table>
  
              </div>
  

  Where jQuery code should be go

  (function($){
             $(document).ready(function () {
         var editor = new $.fn.dataTable.Editor( {
          ajax: 'api/Travel',
          table: '#Travel',)?
  

  Thank you very much for your help.

  Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• allan Posts: 63,520Questions: 1Answers: 10,473 Site admin

  November 2017

  The Javascript should contains some code that looks like this:

      new $.fn.dataTable.Buttons( table, [
          { extend: "create", editor: editor },
          { extend: "edit",   editor: editor },
          { extend: "remove", editor: editor }
      ] );
  
      table.buttons().container()
          .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
  

  If I create a table in Generator and click the "Run now" button it appears to work as expected when Bootstrap is selected.

  Can you link to the page so I can see the issue, or give me step by step instructions for how to replicate the issue with Generator's Run now button?

  Allan
• elenastenina Posts: 5Questions: 2Answers: 0

  November 2017

  Thank you, Allan.
  Unfortunately, I cannot provide a link to you. There are a code in chtml:

  (function($){
  $(document).ready(function () {

     var editor = new $.fn.dataTable.Editor( {
      ajax: 'api/Travel',
      table: '#Travel',
  
      fields: [
          {
              "label": "Date:",
              "name": "date",
              "type": "datetime",
              "format": "ddd, D MMM YY"
          },
  
          {
              "label": "Type of Expense:",
              "name": "type_of_expense",
              "type": "select",
              "options": [
                  "Miles",
                  " Gas",
                  " Taxi",
                  ""
                  ]
          },
  
          {
              "label": "Decription:",
              "name": "decription",
              "type": "textarea"
          },
          {
              "label": "CostCenter:",
              "name": "costcenter",
              "type": "select",
              "options": [
                  "700",
                  " 625",
                  " 550",
                  " 890"
              ]
          },
          {
              "label": "Account Number:",
              "name": "account_number",
              "type": "select",
              "def": "Select Account Number",
              "options": [
                  "456.90 General Expense",
                  " 4567.90 Travel Expense"
              ]
          },
          {
              "label": "W\/O:",
              "name": "wo"
          },
          {
              "label": "Project:",
              "name": "project"
          },
          {
              "label": "Amount:",
              "name": "amount"
          }
      ]
  } );
  
     var table = $('#Travel').DataTable( {
         ajax: 'api/Travel',
         columns: [
             {
                 "data": "date"
             },
  
             {
                 "data": "type_of_expense"
             },
             {
                 "data": "decription"
             },
             {
                 "data": "costcenter"
             },
             {
                 "data": "account_number"
             },
             {
                 "data": "wo"
             },
             {
                 "data": "project"
             },
             {
                 "data": "amount"
             }
         ],
         select: true,
         lengthChange: false
  
     });
  
  
  new $.fn.dataTable.Buttons( table, [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
  ] );
  
  table.buttons().container()
      .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
  

  } );
  }(jQuery));

  ajax: 'api/Travel', - do I have to use my url here?

  Plus table in html above but still doesn't work properly, I am not sure what is wrong.
  Can I make a screen shot and attached to you?
• allan Posts: 63,520Questions: 1Answers: 10,473 Site admin

  November 2017

  Are you looking all of the Javascript files that the HTML provided by Generator gives?

  Allan
• elenastenina Posts: 5Questions: 2Answers: 0

  November 2017

  I already figured out, Allan. Thank you!