Master/Details HTML

When defining the HTML, we have chosen to include all the items that might appear on the page so we can hide and show them as necessary, rather than adding and removing them dynamically.

We start with the controls on top.

<table>
  <tr>
    <td class="Structure">
      <table cellspacing="1" cellpadding="1"  class="Entries" >
        <tr class="Entries">
          <td class="Labels">Posting to</td>
          <td class="Entries"><select class="EntriesValue" name="fullpage_cboaccount" id="fullpage_cboaccount" value="18"  tabindex="0"  onfocus="SetFocus(fullpage_cboaccount)" /><option value="18" selected="yes">100 - 03: Cash & Bank Deposits - T-D General</option><option value="82">100 - 04: Cash & Bank Deposits - T-D US Dollars</option><option value="91">100 - 02: Cash & Bank Deposits - T-D Payroll</option></select></td>
        </tr>
      </table>
    </td>
    <td class="Structure">
      <table cellspacing="1" cellpadding="1"  class="Entries" >
        <tr class="Entries">
          <td class="Labels">On</td>
          <td class="Entries"><input class="EntriesValue" name="fullpage_txtdate" id="fullpage_txtdate" value="2009/02/22"  tabindex="0" style="WIDTH: 80px; "  onfocus="SetFocus(fullpage_txtdate)" /></td>
        </tr>
        <tr class="Entries">
          <td class="Labels">for the Month of</td>
          <td class="Entries"><select class="EntriesValue" name="fullpage_cboperiod" id="fullpage_cboperiod" value="200610"  tabindex="0"  onfocus="SetFocus(fullpage_cboperiod)" /><option value="200610" selected="yes">October 2006 (Open)</option>...<option value="200809">September 2008 (Future)</option></select></td>
        </tr>
        <tr class="Entries">
          <td class="Labels" title="This will be assigned after saving your first transaction." >Batch</td>
          <td class="Entries"><input class="EntriesValue" name="fullpage_txtbatch" id="fullpage_txtbatch" value=""  tabindex="0" title="This will be assigned after saving your first transaction." style="WIDTH: 40px; "  onfocus="SetFocus(fullpage_txtbatch)" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

then show the buttons that appear between the controls and the grids

<div class="ToolBar">
  <span ID="fullpage_cmdnewbatch" name="fullpage_cmdnewbatch" class="Button7" > <img style="VERTICAL-ALIGN: middle" src="../images/add.gif"   /> New Batch </span>
  <span ID="fullpage_cmddepositslip" name="fullpage_cmddepositslip" class="Button7" > <img style="VERTICAL-ALIGN: middle" src="../images/print.gif" /> Deposit Slip </span>
  <span ID="fullpage_cmdaudittrail" name="fullpage_cmdaudittrail" class="Button7" > <img style="VERTICAL-ALIGN: middle" src="../images/print.gif"   /> Audit Trail </span>
</div>

then the two grids

<table id="tblMaster" class="scroll"></table> 
<div id="tblMasterPager" class="scroll" style="text-align:right;"></div> 
<div id="tblMasterMessage"></div>
<table id="tblDetails" class="scroll"></table> 
<div id="tblDetailsPager" class="scroll" style="text-align:right;"></div> 
<div id="tblDetailsMessage"></div>

and finish with the buttons that are to appear below the grids.

<div class="ToolBar">
  <span ID="fullpage_cmdsavetrans" name="fullpage_cmdsavetrans" class="Button7"  > <img style="VERTICAL-ALIGN: middle" src="../images/Save.gif" /> Save </span>
  <span ID="fullpage_cmdcancel" name="fullpage_cmdcancel" class="Button7" > <img style="VERTICAL-ALIGN: middle" src="../images/Cancel.bmp"  /> Cancel </span>
</div>

Now continue on to have a look at the jqGrid definitions.