<div data-options="dxView : { name: 'WorkConfirmPopup' } "> <div data-bind="dxPopup: popupOptions "> <div class="dx-clearfix" data-options="dxTemplate: { name: 'title' } " style="margin: 0 auto;"> <div data-bind="dxToolbar: { dataSource: toolbarItems }"></div> </div> <div class="dx-clearfix" data-options="dxTemplate: { name: 'content' } "> <div id="popupDetail" data-bind="dxscrollview: { }"> <h2 data-bind="text: dataModel.Name, css: {'dx-state-invisible': isEditModeInPopup }"></h2> <div class="dx-fieldset"> <div class="dx-field cw-multi-field-merge"> <div class="dx-field-label cw-multi-field-label">@workTypeName</div> <div class="dx-field-value cw-multi-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup }, text: dataModel.WorkTypeName"></div> <!-- ko if: isEditModeInPopup --> <div class="dx-field-value cw-multi-field-value" data-bind="dxSelectBox: { dataSource: workTypes, displayExpr: 'Name' , valueExpr: 'WorkTypeId' , value: dataModel.WorkTypeId }"> </div> <!-- /ko --> </div> <div class="dx-field cw-multi-field"> <div class="dx-field cw-multi-field-left"> <div class="dx-field-label cw-multi-field-label-ex">@companyInCharge</div> <div class="dx-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup },text: dataModel.ChargeCompanyName"></div> <!-- ko if: isEditModeInPopup --> <div class="dx-field-value" data-bind="dxSelectBox: { dataSource: companies, displayExpr: 'Name' , valueExpr: 'CompanyId' , value: dataModel.ChargeCompanyId }"> </div> <!-- /ko --> </div> <div class="dx-field cw-multi-field-right"> <div class="dx-field-label cw-multi-field-label-ex">@businessFieldName</div> <div class="dx-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup },text: dataModel.BusinessFieldName"></div> <!-- ko if: isEditModeInPopup --> <div class="dx-field-value" data-bind="dxSelectBox: { dataSource: businessFields, displayExpr: 'Name' , valueExpr: 'BusinessFieldId' , value: dataModel.BusinessFieldId }"> </div> <!-- /ko --> </div> </div> <div class="dx-field cw-multi-field"> <div class="dx-field cw-multi-field-left"> <div class="dx-field-label cw-multi-field-label-ex">@requesterName</div> <div class="dx-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup }, text: dataModel.RequesterName "></div> <div class="dx-field-value" data-bind="dxTextBox: { value: dataModel.RequesterName, readOnly: true }, css: {'dx-state-invisible': !isEditModeInPopup() }"></div> <div class="dx-field-value cw-multi-field-value-multiple" data-bind="dxButton: { icon: 'search', clickAction: handleButtonSearchUser }, css: {'dx-state-invisible': !isEditModeInPopup() }"></div> </div> <div class="dx-field cw-multi-field-right"> <div class="dx-field-label cw-multi-field-label-ex">@requesterPost</div> <div class="dx-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup }, text: dataModel.RequesterPost"></div> <div class="dx-field-value" data-bind="dxTextBox: { value: dataModel.RequesterPost }, css: {'dx-state-invisible': !isEditModeInPopup() }"></div> </div> </div> <div class="dx-field cw-multi-field"> <div class="dx-field cw-multi-field-left"> <div class="dx-field-label cw-multi-field-label-ex">@requesterMobileNo</div> <div class="dx-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup }, text: dataModel.RequesterMobileNo"></div> <div class="dx-field-value" data-bind="dxTextBox: { value: dataModel.RequesterMobileNo }, css: {'dx-state-invisible': !isEditModeInPopup() }"></div> </div> <div class="dx-field cw-multi-field-right"> <!--<div class="dx-field-label cw-multi-field-label-ex">@requesterPost</div> <div class="dx-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup }, text: dataModel.RequesterPost"></div> <div class="dx-field-value" data-bind="dxTextBox: { value: dataModel.RequesterPost }, css: {'dx-state-invisible': !isEditModeInPopup() }"></div>--> </div> </div> <div class="dx-field cw-multi-field-merge"> <div class="dx-field-label cw-multi-field-label">@targetFacility</div> <div class="dx-field-value cw-multi-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup }, text: dataModel.FacilityName"></div> <div class="dx-field-value cw-multi-field-value" data-bind="dxTextBox: { value: dataModel.FacilityName, readOnly: true }, css: {'dx-state-invisible': !isEditModeInPopup() }"></div> <div class="dx-field-value cw-multi-field-value-multiple" data-bind="dxButton: { icon: 'search', clickAction: handleButtonSearchFacility }, css: {'dx-state-invisible': !isEditModeInPopup() }"></div> </div> <div class="dx-field cw-multi-field-merge"> <div class="dx-field-label cw-multi-field-label">@requestTitle</div> <div class="dx-field-value cw-multi-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup }, text: dataModel.Title "></div> <div class="dx-field-value cw-multi-field-value" data-bind="dxTextBox: { value: dataModel.Title }, css: {'dx-state-invisible': !isEditModeInPopup() }"></div> </div> <div class="dx-field cw-multi-field-merge"> <div class="dx-field-label cw-multi-field-label">@requestContent</div> <div class="dx-field-value cw-wordwrap" data-bind="css: {'dx-state-invisible': isEditModeInPopup }, text: dataModel.Comment"></div> <div class="dx-field-value" data-bind="dxTextArea: { value: dataModel.Comment, height: 200 }, css: {'dx-state-invisible': !isEditModeInPopup() }"></div> </div> </div> </div> </div> </div> </div>