0
Üç devexpress düşürme, takvim kontrolü ve bir devexpress zamanlayıcısı görüntülemek için aşağıdaki kodu kullanıyorum. Bu kontroller bootstrap ile uygulandı. İşte bu kontrollere sahip MVC'mün görüntüsü. Takvim kontrolünü işaretlemeyi denedim, ancak bunu okumayı daha da zorlaştırarak yorumları kaldırdım. DateNavigator() kontrol bölümüne this video görüldüğü gibiPanel denetimi nasıl yanıt verir?
@{
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>
, takvimi burada arama bir tarayıcı penceresi yeniden boyutu bunun yerine tarayıcının sağ kenarına sabit bir konuma sahip sağındaki bir takvim paneli hareket etmektedir. Bu nedenle duyarlılık yeteneği ortadan kalkar. Kontrol bakılmaksızın tarayıcı yeniden boyutuna sağ kenarına
Teşekkür