0
我有以下代碼來顯示三個devexpress下拉菜單，日曆控件和devexpress schedular。這些控制與引導應用。這是我的MVC的視圖，有這些控件。我試圖標記日曆控件，但這使得它更難以閱讀，所以我刪除了評論。請搜索在DateNavigator（）控制部如何使面板控制響應？
@{
ViewBag.Title = "Scheduler";
}
<style>
.label-text
{
font-size: 12px;
font-weight: normal;
padding-top: 10px;
}
.left {
float: left;
width: 125px;
text-align: left;
margin: 2px 10px;
display: inline
}
.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline
}
</style>
<style>
/*.form-control {
}*/
</style>
<script>
$(document).ready(function() {
// $('#accordion').css('position', 'relative');
// alert('ready');
$("#demo").on("hide.bs.collapse", function() {
$(".btn").html(' <span style="float:left;">Calendar</span><span class="glyphicon glyphicon-menu-down" style="float:right"></span>');
});
$("#demo").on("show.bs.collapse", function() {
$(".btn").html('<span style="float:left;">Calendar</span><span class="glyphicon glyphicon-menu-up" style="float:right"></span>');
});
});
$(document).load(function() {
// alert('ready');
});
</script>
<script type="text/javascript">
var SelectedResources = "";
var SelectedResourcesLookup = "";
function OnBeginCallback(s, e) {
//alert('called');this gets called selected date, months, year changes, when new appointment and other contextmenu items changes
// scheduler.GetVisibleIntervals()[0].start
// Thu Jan 07 2016 00:00:00 GMT-0600 (Central Standard Time)
//(index):42 NewAppointment
// e.command
// "MNUVIEW|NewAppointment"
// (index):42 NewAppointment
// scheduler.GetActiveViewType()
// "Day"
//if (args.Contains())
//
//if (args.Contains("OFFSETVISI"))
// selectedDate = Convert.ToDateTime(args.Split(',')[args.Split(',').Length - 1]);
var dt = new Date();
var selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
//if ((e.command.indexOf("NewAppointment") > -1) || (e.command.indexOf("Month") > -1) || (e.command.indexOf("APTSAVE") > -1)) {
// dt = new Date(scheduler.GetVisibleIntervals()[0].start);
// selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
//}
if ((e.command.indexOf("SETVISDAYS") > -1))
selectedDate = e.command.split('|')[1];
else if ((e.command.indexOf("OFFSETVISI") > -1))
selectedDate = e.command.split(',')[e.command.split(',').length - 1]
else if ((e.command.indexOf("Month") > -1)) {
dt = new Date(scheduler.GetVisibleIntervals()[0].start);
selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
}
else if ((e.command.indexOf("WorkWeek") > -1)) {
dt = new Date(scheduler.GetVisibleIntervals()[0].start);
selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
}
else {
dt = new Date(scheduler.GetVisibleIntervals()[0].start);
selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
}
//dateNavigator.GetFirstDate() dateNavigator.GetLastDate() gridLookup.gridView.GetSelectedFieldValues("FacID", OnGetSelectedFieldValues)
//e.customArgs['SelectedResources'] = checkListBox.GetSelectedValues().join(';'); SelectedResourcesLookup SelectedResourcesLookup
e.customArgs['SelectedResources'] = SelectedResources;
e.customArgs['SelectedDate'] = selectedDate;
e.customArgs['SelectedResourcesLookup'] = SelectedResourcesLookup.toString();
e.customArgs['timeZoneId'] = $('#timeZoneEdit_cmd_VI').val();
}
function validateAppointment(s, e) {
/*
$.ajax({
url: '/Home/ValidateAppointment',
type: 'POST',
dataType: 'json',
data: { startTime: new Date().toUTCString(), scheduleDetailID : 2030 },
success: function (result) {
if (result == false)
alert('appointment not exits');
else
alert('appointment exits');
}
});*/
AppointmentType.HideDropDown();
}
//function disableMenuItems(menu, args) {
// var item = menu.GetItemByName("GotoToday");
// if (item) {
// item.SetEnabled(false);
// }
//}
// ------------------------------------Resource select Lookup-------------------------------------------
function CloseResourceGridLookup() {
gridLookupResource.ConfirmCurrentSelection();
gridLookupResource.HideDropDown();
}
function OngridLookupResourceSelectionChanged(s, e) {
//gridLookupResource.gridView.GetSelectedFieldValues("PartyRoleID", OnResourceGetSelectedFieldValues);
SelectedResourcesLookup = gridLookupResource.GetValue();
scheduler.PerformCallback();
}
//function OnResourceGetSelectedFieldValues(selectedValues) {
// SelectedResourcesLookup = "";
// if (selectedValues.length == 0) {
// scheduler.PerformCallback();
// return;
// } else {
// alert(selectedValues.length);
// for (i = 0; i < selectedValues.length; i++) {
// SelectedResourcesLookup = SelectedResourcesLookup + selectedValues[i] + ";";
// }
// scheduler.PerformCallback();
// }
//}
//// ------------------------------------Resource select Lookup-------------------------------------------
// ------------------------------------Patient Multiselect Lookup-------------------------------------------
function SelectedPatient(s, e) {
var g = patientgridLookup.GetGridView();
//if (g.GetFocusedRowIndex() >= 0) {
// alert("rows selected");
//}
//else {
// alert("rows NOT selected");
//}
var valor = g.GetRowKey(g.GetFocusedRowIndex());
// alert('selected by mouse:'+valor);
$('#PatientPartyRoleID').val(valor);
ClosePatientGridLookup();
}
function TestSelection(s, e) {
alert('hello');
}
function OnValueChange(s, e) {
alert('selected by auto select: '+s.getValue());
}
function ClosePatientGridLookup() {
// alert('close patient grid');
patientgridLookup.ConfirmCurrentSelection();
patientgridLookup.HideDropDown();
}
// ------------------------------------Patient Multiselect Lookup-------------------------------------------
// ------------------------------------Multiselect Lookup-------------------------------------------
function ResourcePerformCall(s, e)
{
ResourceDataLoad();
CloseGridLookup()
}
function CloseGridLookup() {
gridLookup.ConfirmCurrentSelection();
gridLookup.HideDropDown();
//alert('close patient grid');
}
function OnGridLookupSelectionChanged(s, e)
{
gridLookup.gridView.GetSelectedFieldValues("FacID", OnGetSelectedFieldValues);
}
function OnGetSelectedFieldValues(selectedValues) {
SelectedResources = "";
if (selectedValues.length == 0) {
scheduler.PerformCallback();
return;
} else {
for (i = 0; i < selectedValues.length; i++) {
SelectedResources = SelectedResources + selectedValues[i] + ";";
}
scheduler.PerformCallback();
}
//ResourceDataLoad();
}
function ResourceDataLoad()
{
var grid = gridLookupResource.GetGridView();
grid.PerformCallback();
}
// ------------------------------------Multiselect Lookup-------------------------------------------
function OnAppointmentFormSave(s, e) {
if (IsValidAppointment())
scheduler.AppointmentFormSave();
}
function IsValidAppointment() {
$.validator.unobtrusive.parse('form');
return $("form").valid();
}
function OnInplaceCloseButtonClick(s, e) {
scheduler.InplaceEditFormCancel();
}
function OnSaveInplaceFormData(s, e) {
if (IsValidAppointment())
scheduler.InplaceEditFormSave();
}
function OnInplaceFormMoreButtonClick(s, e) {
scheduler.InplaceEditFormShowMore();
}
function OnAppointmentFormCancel(s, e) {
scheduler.AppointmentFormCancel()
}
function OnAppointmentFormDelete(s, e) {
scheduler.AppointmentFormDelete();
}
//tooltip
var toolTipContext;
function OnToolTipDisplaying(s, e) {
toolTipContext = e;
switch (e.toolTip.type) {
case MVCxSchedulerToolTipType.Appointment:
OnAppointmentTipDisplaying(s, e);
break;
case MVCxSchedulerToolTipType.AppointmentDrag:
OnAppointmentDragTipDisplaying(s, e);
break;
case MVCxSchedulerToolTipType.Selection:
OnSelectionTipDisplaying(s, e);
break;
}
}
// ------------------------------------Appointment Type Dropdown-------------------------------------------
var textSeparator = ";";
function OnAppointmentTypeSelectionChanged(listBox, args) {
AppointmentTypeUpdateText();
SetEndDate(listBox, args);
}
function SetEndDate(listBox, e) {
var aptTypeList = $('#typeList').val().split(',');
var mins = 0;
$.each(listBox.GetSelectedItems(), function (index, item) {
mins += parseInt(aptTypeList[item.index]);
});
var startdate = new Date(StartTime.GetDate());
EndTime.SetDate(new Date(startdate.getTime() + mins * 60000));
}
function AppointmentTypeUpdateText() {
var selectedItems = checkListAppointmentTypeID.GetSelectedItems();
AppointmentType.SetText(GetSelectedAppointmentTypeText(selectedItems));
$('#AppointmentTypeIDList').val(GetSelectedAppointmentTypeValue(selectedItems));
}
function SynchronizeAppointmentTypeValues(dropDown, args) {
checkListAppointmentTypeID.UnselectAll();
var texts = dropDown.GetText().split(textSeparator);
var values = GetAppointmentTypeValuesByTexts(texts);
checkListAppointmentTypeID.SelectValues(values);
AppointmentTypeUpdateText(); // for remove non-existing texts
}
function GetSelectedAppointmentTypeText(items) {
var texts = [];
for (var i = 0; i < items.length; i++)
texts.push(items[i].text);
return texts.join(textSeparator);
}
function GetSelectedAppointmentTypeValue(items) {
var texts = [];
for (var i = 0; i < items.length; i++)
texts.push(items[i].value);
return texts.join(textSeparator);
}
function GetAppointmentTypeValuesByTexts(texts) {
var actualValues = [];
var item;
for (var i = 0; i < texts.length; i++) {
item = checkListAppointmentTypeID.FindItemByText(texts[i]);
if (item != null)
actualValues.push(item.value);
}
return actualValues;
}
function OnAppointmentTypeSelectedIndexChanged(s, e) {
var aptTypeList = $('#typeList').val().split(',');
var mins = 0;
if (aptTypeList[s.GetSelectedIndex()]) {
mins = parseInt(aptTypeList[s.GetSelectedIndex()]);
$('#AppointmentTypeID').val(s.GetSelectedItem().value);
}
var startdate = new Date(StartTime.GetDate());
EndTime.SetDate(new Date(startdate.getTime() + mins * 60000));
}
// ------------------------------------Appointment Type Dropdown-------------------------------------------
</script>
<style>
.test {width: 225px !important;}
.timezonecss-class {height:30px !important;}
</style>
@using System.Web.UI.WebControls
@model CareHere.WebUI.Scheduler.Models.SchedulerDataObject
<div class="row" style="border:0px solid red;padding-left:4px;padding-top:5px;padding-right:4px;">
<div class="col-sm-7" style="border:0px solid green;padding:0px;width:800px;">
@* <h3 class="display-4">Scheduler</h3><br />*@
<div class='form-group left' style="border:0px solid blue;padding-left:0px;padding-right:0px;width:300px;margin-left:0px;">
<label class="form-group" for="timeZoneEdit" >Time Zone</label>
@Html.DevExpress().TimeZoneEdit(
settings =>
{
settings.Name = "timeZoneEdit";
settings.SchedulerName = "scheduler";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Percentage(300);
//settings.Attributes.CssStyle.Add("font-weight", "large");
settings.ControlStyle.CssClass = "timezonecss-class";
//settings.Width = 300;
}).GetHtml()
</div>
<div class='form-group right' style="border:0px solid blue;padding-right:0px;padding-left:0px;width:228px;margin-left:2px;">
<label for="timeZoneEdit">Select Clinic</label>
@{
ViewBag.Facility = Model.Facility;
}
@Html.Partial("_MultiSelectPartial", Model)
</div>
<div class='form-group right' style="border:0px solid yellow;padding-right:0px;padding-left:0px;width:228px;margin-left:1px;">
<label for="timeZoneEdit">Select Provider</label>
@{
ViewBag.Resources = Model.Resources;
}
@Html.Partial("_ResourceMultiSelectPartial", Model.Resources)
</div>
</div>
<div class="panel-group" id="accordion" style="margin-left:880px;margin-top:26px;width:458px;padding:0px;border:0px solid black;">
<div class="panel panel-default">
<div class="panel-heading" style="padding:0px;">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:456px;margin:0px;" data-parent="#accordion">
<span style="float:left;">Calendar</span>
<span class="glyphicon glyphicon-menu-down" style="float:right"></span>
</button>
</div>
<div id="demo" class="panel-collapse collapse" style="border:0px solid black;padding:0px;width:458px;">
<div class="panel-body" style="padding-left:4px;padding-right:1px;padding-top:0px;padding-bottom:1px;border:0px solid black">
@Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding:0px;border:0px solid black;position:relative;"id="sp1">
<div class="col-sm-12" style="padding:5px;border:0px solid black"">
@Html.Partial("SchedulerPartial", Model)
</div>
</div>
<script>
</script>
如所看到的上this video，日曆時我重新大小的瀏覽器窗口中的日曆面板移動到右側具有固定位置以瀏覽器的右邊緣，而不是。因此，響應能力消失。如何解決這個問題，使控制，就會顯示在右邊不管瀏覽器重新大小的
感謝