<!--
 =============================================================================================
  This file was AUTO-GENERATED by "SPA Views" Xomega.Net generator.
 
  Manual CHANGES to this file WILL BE LOST when the code is regenerated.
 =============================================================================================
-->
<div xmlns="http://www.w3.org/1999/xhtml" class="view-composition">
  <div>
    <div class="view with-footer" data-bind="with: $root" data-width="1760"
         data-height="860">
      <div class="view-header"><span class="view-title" data-bind="text: ViewTitle"></span></div>
      <div class="view-body">
        <div class="content indented">
          <div data-bind="panel: { title: 'Criteria', collapsed: CriteriaCollapsed }">
            <div class="xw-obj" data-part="content"
                 data-bind="with: $root.ListObject.CriteriaObject">
              <table class="xw-fieldset-layout">
                <tr>
                  <td class="fieldColumn" style="width: 50%">
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlSalesOrderNumberOperator') }"
                             class="label">Sales Order Number:</label>
                      <select data-bind="id: $root.id('ctlSalesOrderNumberOperator'), property: SalesOrderNumberOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlSalesOrderNumber'), property: SalesOrderNumber" /></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlStatusOperator') }" class="label">Status:</label>
                      <select data-bind="id: $root.id('ctlStatusOperator'), property: StatusOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlStatus'), property: Status" /></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlOrderDateOperator') }" class="label">Order Date:</label>
                      <select data-bind="id: $root.id('ctlOrderDateOperator'), property: OrderDateOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlOrderDate'), property: OrderDate" class="date" />
                      <input data-bind="id: $root.id('ctlOrderDate2'), property: OrderDate2" class="date" /></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlDueDateOperator') }" class="label">Due Date:</label>
                      <select data-bind="id: $root.id('ctlDueDateOperator'), property: DueDateOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlDueDate'), property: DueDate" class="date" />
                      <input data-bind="id: $root.id('ctlDueDate2'), property: DueDate2" class="date" /></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlTotalDueOperator') }" class="label">Total Due:</label>
                      <select data-bind="id: $root.id('ctlTotalDueOperator'), property: TotalDueOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlTotalDue'), property: TotalDue" class="decimal" />
                      <input data-bind="id: $root.id('ctlTotalDue2'), property: TotalDue2" class="decimal" /></div>
                  </td>
                  <td class="fieldColumn" style="width: 50%">
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlCustomerStoreOperator') }" class="label">Customer Store:</label>
                      <select data-bind="id: $root.id('ctlCustomerStoreOperator'), property: CustomerStoreOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlCustomerStore'), property: CustomerStore" /></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlCustomerNameOperator') }" class="label">Customer Name:</label>
                      <select data-bind="id: $root.id('ctlCustomerNameOperator'), property: CustomerNameOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlCustomerName'), property: CustomerName" /></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlGlobalRegion') }" class="label">Global Region:</label>
                      <select data-bind="id: $root.id('ctlGlobalRegion'), property: GlobalRegion"></select></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlTerritoryIdOperator') }" class="label">Sales Territory:</label>
                      <select data-bind="id: $root.id('ctlTerritoryIdOperator'), property: TerritoryIdOperator"
                              class="operator"></select>
                      <select data-bind="id: $root.id('ctlTerritoryId'), property: TerritoryId"></select></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlSalesPersonIdOperator') }" class="label">Sales Person:</label>
                      <select data-bind="id: $root.id('ctlSalesPersonIdOperator'), property: SalesPersonIdOperator"
                              class="operator"></select>
                      <select data-bind="id: $root.id('ctlSalesPersonId'), property: SalesPersonId"
                              multiple="multiple"></select></div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div data-bind="msglist: { items: getErrorList().Errors }"></div>
          <div class="action-bar">
            <input type="button" value="Search" class="btn-search" data-bind="click: search" />
            <input type="button" value="Reset" class="btn-reset" data-bind="click: reset" />
            <a class="permalink" href="#" data-bind="click: permalink">PermaLink</a></div>
          <div class="xw-obj" data-bind="pager: { items: ListObject.List }">
            <div data-part="content" style="overflow: auto">
              <table class="grid" data-bind="css: { selectable: $root.ListObject.RowSelectionMode }">
                <caption>
                  <div data-bind="criteria: { AppliedCriteria: $root.ListObject.AppliedCriteria, AppliedCriteriaText: $root.ListObject.AppliedCriteriaText }"></div>
                </caption>
                <thead>
                  <tr data-bind="with: $root.ListObject">
                    <th data-bind="sortby: SalesOrderNumber">SO#</th>
                    <th data-bind="sortby: Status">Status</th>
                    <th data-bind="sortby: OrderDate">Order Date</th>
                    <th data-bind="sortby: ShipDate">Ship Date</th>
                    <th data-bind="sortby: DueDate">Due Date</th>
                    <th data-bind="sortby: TotalDue">Total Due</th>
                    <th data-bind="sortby: OnlineOrderFlag">Online</th>
                    <th data-bind="sortby: CustomerStore">Customer Store</th>
                    <th data-bind="sortby: CustomerName">Customer Name</th>
                    <th data-bind="sortby: SalesPersonId">Sales Person</th>
                    <th data-bind="sortby: TerritoryId">Sales Territory</th>
                  </tr>
                </thead>
                <tbody data-bind="foreach: pagedItems">
                  <tr data-bind="css: { selected: _selected }, click: toggleSelection">
                    <td><a data-bind="click: $root.LinkDetails_Click.bind($root), css: {disabled: !$root.LinkDetails_Enabled($data)}"
                         href="#">
                        <span data-bind="property: List.SalesOrderNumber"></span></a></td>
                    <td><span data-bind="property: List.Status"></span></td>
                    <td><span data-bind="property: List.OrderDate"></span></td>
                    <td><span data-bind="property: List.ShipDate"></span></td>
                    <td><span data-bind="property: List.DueDate"></span></td>
                    <td><span data-bind="property: List.TotalDue"></span></td>
                    <td><span data-bind="property: List.OnlineOrderFlag"></span></td>
                    <td><span data-bind="property: List.CustomerStore"></span></td>
                    <td><span data-bind="property: List.CustomerName"></span></td>
                    <td><span data-bind="property: List.SalesPersonId"></span></td>
                    <td><span data-bind="property: List.TerritoryId"></span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="action-bar">
            <a data-bind="click: $root.LinkNew_Click.bind($root), css: {disabled: !$root.LinkNew_Enabled($data)}"
               href="#">New</a></div>
        </div>
      </div>
      <div class="view-footer action-bar">
        <input type="button" value="Select" class="btn-select"
               data-bind="click: select, visible: hasSelect()" />
        <input type="button" value="Close" class="btn-close"
               data-bind="click: close, visible: hasClose()" /></div>
    </div>
  </div>
  <div>
    <div data-bind="compose: ActiveChildView"></div>
  </div>
</div>