<div data-options="dxView : { name: 'orderReports', title: 'orderReports' } " >
   
    <div data-bind="dxPopup: { 
         buttons: [        
         { toolbar: 'bottom', location: 'after', widget: 'button', options:
             {
                text: '@cancel',
                onClick: cancelClick
             }
          }],
        title: 'Reports and Documents',
        visible: visible,
        closeOnOutsideClick: true,
        showTitle: true,
        width: '600px',        
        }">
        <div data-options="dxTemplate : { name: 'content' } ">
            <div data-bind="dxSelectBox: { dataSource: reports, value: selectedDocumentId, valueExpr: 'DocumentId', displayExpr: 'CombinedDateAndAuthor', onSelectionChanged: reportSelectionChanged }"></div>
            <!--ko if: selectedReportText-->
            <div class="notes-text" data-bind="dxTextArea: { value: selectedReportText, height: '90%' }"></div>
            <!--/ko-->
        </div>
    </div>   
   
</div>