Configured JavaPlanner per documentation. Everything works great. However, when I double-click on a calendar, it launches the lightbox where I can enter the appointment details like start date, end date, text etc…Click Save, I invoke lightbox.save() method. It creates the event correctly in the database, however, the event that is displayed on the calendar still has an id of “0”. It only fetches the event when I refresh the view. Prior release of JavaPlanner used to always return the Integer on saveEvent but not returns the status. How can I automatically refresh and get the calendar id after I create and dispose the lighbox? Please help.
Anyone there to help with this issue? Create custom lightbox. Create new event. Lightbox closes and the calendar shows the event. Double-click on new event, make some change and click save. Check the database and there are two records. It is supposed to be an insert followed by an update.
Please help
Hi,
sorry for the delay in answerring.
Could you provide initialization code of JavaPlanner and implementation of method saveEvent?
Hi Radyno,
Thank you for your willingness to help. Here is the Spring Controller and JSP Code Sample
Spring Controller
@RequestMapping("/calendar")
public ModelAndView calendar(HttpServletRequest request) throws Exception {
// creates and configures scheduler instance
Calendar now = Calendar.getInstance();
DHXPlanner s = new DHXPlanner("./codebase/", DHXSkin.TERRACE);
s.setName("scheduler");
s.preventCache();
s.data.enableDynamicLoading(DHXDynLoadingMode.week);
s.extensions.add(DHXExtension.RECURRING);
s.extensions.add(DHXExtension.CONTAINER_AUTORESIZE);
s.extensions.add(DHXExtension.TOOLTIP);
String eventText = "{cevHref}{cevName} {text}({cevStatusTxt}){cevHrefEnd}\n";
s.templates.setEventText(eventText);
DHXYearView yearView = new DHXYearView();//initializes the view
s.views.add(yearView);//adds the view to the planner
s.config.setMultiDay(true);
s.config.setMarkNow(true);
s.config.setApiDate("%m/%d/%Y %H:%i %a");
s.config.setDetailsOnDblClick(true);
s.config.setDetailsOnCreate(true);
s.config.setFirstHour(0);
s.config.setLastHour(24);
s.setInitialDate(now.get(Calendar.YEAR), now.get(Calendar.MONTH), now.get(Calendar.DATE));
s.config.setScrollHour(8);
s.config.setDisplayedEventColor("#000000");
s.config.setServerUTC(true);
s.setHeight(800);
//Custom Fields
//Custom Form
DHXExternalLightboxForm form = s.lightbox.setExternalLightboxForm("CustomCalendarEditor.do", 640, 450);
form.set("placeholder", "Test");
form.setClassName("custom_lightbox");
//Custom Form
s.load("events.do", DHXDataFormat.JSON);
s.data.dataprocessor.setURL("events.do");
// creates mini-calendar
DHXMiniCalendar cal = new DHXMiniCalendar("minical");
cal.setNavigation(true);
s.calendars.add(cal);
ModelAndView mav = new ModelAndView(PMConstants.VIEW_ADMIN_CALENDAR_LOCATION + "PracticeCalendarView");
// puts scheduler code in view
mav.addObject("body", s.render());
return mav;
}
@RequestMapping("/events")
@ResponseBody public String events(HttpServletRequest request) {
CustomEventsManager evs;
evs = new CustomEventsManager(request,0);
String jsonStr = evs.run();
return jsonStr;
}
============ JSP Page =========
${body}
<script>
dp.attachEvent("onAfterUpdate", function(sid, action, tid, tag) {
console.log("onAfterUpdate invoked..." + sid + " " + tid + " " + tag.getAttribute("cevId"));
//scheduler.clearAll();
//scheduler.load("events.do");
//scheduler.updateView(); //Does not Refresh
});
scheduler.attachEvent("onEmptyClick", function (date, e) {
var startDate = date;
var endDate = new Date(date.getTime());
endDate.addMinutes(15);
console.log(startDate + " " + endDate);
var eventId = scheduler.addEventNow({
start_date: startDate,
end_date: endDate,
cevStatusTxt:"New",
cevHref:"",
cevHrefEnd:"",
text: "New Appointment",
cevName:""
});
console.log(startDate + " " + endDate);
});
/* Not sure how to handle this, no documentation
scheduler.attachEvent("onEventSave", function (id,data) {
console.log(id);
console.log(data);
}); */
</script>Please, provide listing of custom editor. I tried to test your code with custom editor from demo and it works correctly.
<%@page import=“com.imedics.emr.constants.ApplicationConstants”%>
<%@page import=“com.imedics.pm.vo.CommonRoleVO”%>
<%@ page language=“java” contentType=“text/html; charset=ISO-8859-1” pageEncoding=“ISO-8859-1”%>
<%@page isELIgnored=“false” %>
<%@include file="…/…/taglibs_emr.jsp" %>
var selectedPatient;
var loadingComplete = 0;
var obj;
$(document).ready(function() {
//$(".branchRow").hide();
//$(".providerRow").hide();
//$(".facilityRow").hide();
$(".patientRow").show();
var edit = $("#cevId").val();
$("#start-date").closest("span.k-datetimepicker").width(250);
$("#end-date").closest("span.k-datetimepicker").width(250);
});
function initialize() {
loadingComplete = 0;
console.log('Loading...');
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'branches.do',
dataType : "json",
success : function(data, textStatus, jqXHR) {
var grid = $("#bcfId").data("kendoDropDownList");
grid.dataSource.data(data);
loadingComplete++;
displayCalendarDetail();
},
error : function(xhr, err) {
console.log('Fail on filter' + xhr.status);
return true;
}
});
/*
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'getCodeByType.do?type=Calendar Event Type',
dataType : "json",
success : function(data, textStatus, jqXHR) {
var grid = $("#cevEvntTypeTxt").data("kendoDropDownList");
grid.dataSource.data(data);
loadingComplete++;
displayCalendarDetail();
},
error : function(xhr, err) {
console.log('Fail on filter' + xhr.status);
return true;
}
});
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'getCodeByType.do?type=Facility Appt',
dataType : "json",
success : function(data, textStatus, jqXHR) {
var grid = $("#cevEvntApptTxt").data("kendoDropDownList");
grid.dataSource.data(data);
loadingComplete++;
displayCalendarDetail();
},
error : function(xhr, err) {
console.log('Fail on filter' + xhr.status);
return true;
}
});
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'getCodeByType.do?type=Location Appt',
dataType : "json",
success : function(data, textStatus, jqXHR) {
var grid1 = $("#cevEvntApptTxt1").data("kendoDropDownList");
loadingComplete++;
grid1.dataSource.data(data);
displayCalendarDetail();
},
error : function(xhr, err) {
console.log('Fail on filter' + xhr.status);
return true;
}
});
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'getCodeByType.do?type=Provider Appt',
dataType : "json",
success : function(data, textStatus, jqXHR) {
var grid1 = $("#cevEvntApptTxt2").data("kendoDropDownList");
loadingComplete++;
grid1.dataSource.data(data);
displayCalendarDetail();
},
error : function(xhr, err) {
console.log('Fail on filter' + xhr.status);
return true;
}
});
*/
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'getCodeByType.do?type=Patient Appt',
dataType : "json",
success : function(data, textStatus, jqXHR) {
var grid1 = $("#cevEvntApptTxt").data("kendoDropDownList");
loadingComplete++;
grid1.dataSource.data(data);
displayCalendarDetail();
},
error : function(xhr, err) {
console.log('Fail on filter' + xhr.status);
return true;
}
});
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'getCodeByType.do?type=Appt Disposition',
dataType : "json",
success : function(data, textStatus, jqXHR) {
var grid = $("#cevStatusTxt").data("kendoDropDownList");
grid.dataSource.data(data);
loadingComplete++;
displayCalendarDetail();
},
error : function(xhr, err) {
console.log('Fail on filter' + xhr.status);
return true;
}
});
/*
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'userList.do',
dataType : "json",
success : function(data, textStatus, jqXHR) {
var grid = $("#resource").data("kendoDropDownList");
grid.dataSource.data(data);
loadingComplete++;
displayCalendarDetail();
},
error : function(xhr, err) {
console.log('Fail on filter' + xhr.status);
return true;
}
}); */
}
function displayCalendarDetail() {
if (loadingComplete >= 3) {
var cevId = obj['cevId'];
var patId = obj['patId'];
var penId = obj['penId'];
console.log("Encounter ID: " + penId);
if (penId > 0) {
$("#btnChart").show();
$("#btnDelete").hide();
} else {
$("#btnChart").hide();
$("#btnDelete").show();
}
var mode = 0;//Create
if (cevId > 0) {
console.log("Edit Mode");
mode = 1;
} else {
mode = 0;
//$(".facilityRow").show();
}
var inputs = document.body.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type != "button") {
var name = inputs[i].getAttribute('name');
if (name == "start_date" || name == "end_date") {
inputs[i].value = parent.scheduler.date.date_to_str(parent.scheduler.config.api_date)(obj[name]);
} else if (mode > 0) {
//if ((name == "cevEvntTypeTxt" || name == "cevEvntApptTxt" || name == "cevStatusTxt" || name == 'bcfId' || name == "cusId" || name == "cevId" || name == "version") || name == "patId" || name == "patientName") {
if (name == 'bcfId' || name == "cusId" || name == "cevId" || name == "version" || name == "patId" || name == "patientName" || name == "pdrId") {
inputs[i].value = obj[name];
//} else if (name == "resource") {
//inputs[i].value = obj['cusId'];
}
} else if (mode <= 0) {
$("#bcfId").val("0");
$("#cevId").val("0");
$("#cusId").val("0");
$("#pdrId").val("0");
$("#patId").val("0");
$("#version").val("0");
$("#event_text").val(obj['text']);
}
}
}
//$(".facilityRow").hide();
//$(".branchRow").hide();
//$(".providerRow").hide();
$(".patientRow").show();
$("#btnDemographics").hide();
if (cevId > 0) {
console.log('CEV ID greater than 0');
if (patId > 0) {
}
/*
$('#cevEvntApptTxt').val(obj['cevEvntApptTxt']);
$('#cevStatusTxt').val(obj['cevStatusTxt']);
$('#cevEvntApptTxt1').val(obj['cevEvntApptTxt1']);
$('#cevEvntApptTxt2').val(obj['cevEvntApptTxt2']);
*/
/* Iterate thru datasource*/
var ds = $("#bcfId").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
console.log(ds[i].cdvCodeValueTxt);
if (ds[i].bcfId == obj['bcfId']) {
console.log('Selecting Index ' + i);
$('#bcfId').data("kendoDropDownList").select(i);
}
}
$("#bcfId").data("kendoDropDownList").readonly();
if (obj['cevEvntTypeTxt'] == 'Facility') {
//$(".facilityRow").show();
} else if (obj['cevEvntTypeTxt'] == 'Location') {
$(".locationRow").show();
} else if (obj['cevEvntTypeTxt'] == 'Provider') {
//$(".providerRow").show();
} else if (obj['cevEvntTypeTxt'] == 'Patient') {
$(".patientRow").show();
$("#btnDemographics").show();
}
/*
var ds = $("#cevEvntTypeTxt").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
if (ds[i].cdvCodeValueTxt == obj['cevEvntTypeTxt']) {
console.log('Selecting Index ' + i);
$('#cevEvntTypeTxt').data("kendoDropDownList").select(i);
}
}
var ds = $("#cevEvntApptTxt").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
console.log(ds[i].cdvCodeValueTxt);
if (ds[i].cdvCodeValueTxt == obj['cevEvntApptTxt']) {
console.log('Selecting Index for ' + obj['cevEvntApptTxt'] + i);
$('#cevEvntApptTxt').data("kendoDropDownList").select(i);
break;
}
}
var ds = $("#cevEvntApptTxt1").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
console.log(ds[i].cdvCodeValueTxt);
if (ds[i].cdvCodeValueTxt == obj['cevEvntApptTxt']) {
console.log('Selecting Index for ' + obj['cevEvntApptTxt'] + i);
$('#cevEvntApptTxt1').data("kendoDropDownList").select(i);
break;
}
}
var ds = $("#cevEvntApptTxt2").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
console.log(ds[i].cdvCodeValueTxt);
if (ds[i].cdvCodeValueTxt == obj['cevEvntApptTxt']) {
console.log('Selecting Index for ' + obj['cevEvntApptTxt'] + i);
$('#cevEvntApptTxt2').data("kendoDropDownList").select(i);
break;
}
}
*/
var ds = $("#cevEvntApptTxt").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
console.log(ds[i].cdvCodeValueTxt);
if (ds[i].cdvCodeValueTxt == obj['cevEvntApptTxt']) {
console.log('Selecting Index for ' + obj['cevEvntApptTxt'] + i);
$('#cevEvntApptTxt').data("kendoDropDownList").select(i);
break;
}
}
$("#cevEvntApptTxt").data("kendoDropDownList").readonly();
var ds = $("#cevStatusTxt").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
console.log(ds[i].cdvCodeValueTxt);
if (ds[i].cdvCodeValueTxt == obj['cevStatusTxt']) {
console.log('Selecting Index ' + i);
$('#cevStatusTxt').data("kendoDropDownList").select(i);
}
}
//var ds = $("#resource").data("kendoDropDownList").dataSource.data();
//for (var i = 0; i < ds.length; i++) {
// if (ds[i].cusId == obj['cusId']) {
// console.log('Selecting Index ' + i);
// $('#resource').data("kendoDropDownList").select(i);
// }
//}
/*
var ds = $("#renderingProvider").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
if (ds[i].pdrId == obj['pdrId']) {
console.log('Selecting Index ' + i);
$('#renderingProvider').data("kendoDropDownList").select(i);
}
}
*/
var renderingProviderDropDownlist = $("#renderingProvider").data("kendoDropDownList");
renderingProviderDropDownlist.value(obj['pdrId']);
$("#renderingProvider").data("kendoDropDownList").readonly();
$("#patientName").data("kendoAutoComplete").readonly();
/*
$("#bcfId").data("kendoDropDownList").enable(false);
$("#cevEvntTypeTxt").data("kendoDropDownList").enable(false);
$("#cevEvntApptTxt").data("kendoDropDownList").enable(false);
$("#resource").data("kendoDropDownList").enable(false);
$("#patientName").data("kendoAutoComplete").enable(false);
*/
$("#event_text").val(obj['text']);
} else {
console.log("Create Mode");
$(".patientRow").show();
//$(".facilityRow").show();
/*
$("#patientName").data("kendoAutoComplete").enable();
$("#bcfId").data("kendoDropDownList").enable();
$("#cevEvntTypeTxt").data("kendoDropDownList").enable();
$("#cevEvntApptTxt").data("kendoDropDownList").enable();
$("#resource").data("kendoDropDownList").enable();
*/
$("#bcfId").val("0");
$("#cevId").val("0");
$("#cusId").val("0");
$("#pdrId").val("0");
$("#patId").val("0");
$("#version").val("0");
$("#event_text").val(obj['text']);
/*
var ds = $("#cevEvntTypeTxt").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
console.log(ds[i].cdvCodeValueTxt);
if (ds[i].cdvCodeValueTxt == 'Patient Appointment') {
console.log('Selecting Index ' + i);
$('#cevEvntTypeTxt').data("kendoDropDownList").select(i);
}
}
var ds = $("#cevEvntApptTxt").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
console.log(ds[i].cdvCodeValueTxt);
if (ds[i].cdvCodeValueTxt == 'Office Visit') {
console.log('Selecting Index ' + i);
$('#cevEvntApptTxt').data("kendoDropDownList").select(i);
}
} */
var ds = $("#cevStatusTxt").data("kendoDropDownList").dataSource.data();
for (var i = 0; i < ds.length; i++) {
console.log(ds[i].cdvCodeValueTxt);
if (ds[i].cdvCodeValueTxt == 'New') {
console.log('Selecting Index ' + i);
$('#cevStatusTxt').data("kendoDropDownList").select(i);
}
}
}
}
}
function autocomplete_select(e) {
var autocomplete = $("#patientName").data("kendoAutoComplete");
var itm = autocomplete.dataSource.at(e.item.index());
console.log("Selected Patient : " + itm.patientid);
selectedPatient = itm.patientid;
}
function onSelectEventType() {
var dataItem = $("#cevEvntTypeTxt").val();
console.log('Changed Event ' + dataItem);
//$(".branchRow").hide();
//$(".providerRow").hide();
//$(".facilityRow").hide();
$(".patientRow").show();
if (dataItem == "Facility") {
//$(".facilityRow").show();
//$(".patientRow").hide();
//$(".providerRow").hide();
$(".patientRow").show();
//$(".branchRow").hide();
} else if (dataItem == "Location") {
//$(".facilityRow").hide();
//$(".patientRow").hide();
//$(".branchRow").show();
//$(".providerRow").hide();
$(".patientRow").show();
} else if (dataItem == "Provider") {
//$(".facilityRow").hide();
//$(".patientRow").hide();
//$(".branchRow").hide();
//$(".providerRow").show();
$(".patientRow").show();
} else if (dataItem == "Patient") {
//$(".patientRow").show();
//$(".branchRow").hide();
//$(".providerRow").hide();
//$(".facilityRow").hide();
$(".patientRow").show();
}
}
getValues = function () {
var ev = {};
var cevId = $('#cevId').val();
var mode = 0;//Create
if ($('#cevId').val() > 0) {
mode = 1;
}
var inputs = document.body.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "button") {
continue;
}
var name = inputs[i].getAttribute('name');
if (name == "start_date" || name == "end_date") {
ev[name] = parent.scheduler.templates.api_date(inputs[i].value);
console.log("Getting Value for " + name + ":" + inputs[i].value);
} else if (name == "patId") {
if (mode == 1) {
if(!(selectedPatient>0)){
ev[name] = inputs[i].value;
}else{
ev[name] = selectedPatient;
}
//ev[name] = inputs[i].value;
} else {
if (selectedPatient > 0) {
ev[name] = selectedPatient;
} else {
ev[name] = "0";
}
}
} else if (name == "cevId") {
if (mode == 1) {
ev[name] = inputs[i].value;
} else {
ev[name] = "0";
}
} else if (name == "cusId") {
if (mode == 1) {
ev[name] = inputs[i].value;
} else {
//ev[name] = $("#resource").val();
}
} else if (name == "pdrId") {
if (mode == 1) {
// ev[name] = inputs[i].value;
ev[name] = $("#renderingProvider").val();
} else {
ev[name] = $("#renderingProvider").val();
}
} else if (name == "resource") {
if (mode == 1) {
ev[name] = inputs[i].value;
} else {
ev[name] = "0";
}
} else if (name == "bcfId") {
console.log('Branch Facility ID selected is ' + $("#bcfId").val());
ev[name] = $("#bcfId").val();
} else {
ev[name] = inputs[i].value;
}
}
ev['text'] = $("#event_text").val();
ev['cevEvntTypeTxt'] = 'Patient';
ev['encounterHref'] = '';
ev['encounterHrefEnd'] = '';
ev['demographicsHref'] = '';
ev['demographicsHrefEnd'] = '';
console.log(JSON.stringify(ev));
return ev;
};
setValues = function (objectData) {
obj = objectData;
console.log(obj);
initialize();
};
/*
function openPatientDemographics() {
lightbox.close();
$("#patientDemographicsPopup").kendoWindow({
modal: true,
resizable: false,
content:"patientDetailPopup.do?patId= " + obj['patId']
}).data("kendoWindow").center().open();
}*/
function openPatientChart() {
lightbox.close();
<%
CommonRoleVO role = (CommonRoleVO)session.getAttribute("roleVO");
if ((role.getCroBuiltinRoleTxt() != null &&
(role.getCroBuiltinRoleTxt().equalsIgnoreCase(ApplicationConstants.PROVIDER) ||
(role.getCroBuiltinRoleTxt().equalsIgnoreCase(ApplicationConstants.PHYSICIAN_ASST)) ||
(role.getCroBuiltinRoleTxt().equalsIgnoreCase(ApplicationConstants.NURSE_PRACTITIONER)) ||
(role.getCroBuiltinRoleTxt().equalsIgnoreCase(ApplicationConstants.NURSE)) ||
(role.getCroBuiltinRoleTxt().equalsIgnoreCase(ApplicationConstants.MEDICAL_ASST))
)) ||
(role.getCroRoleTxt() != null &&
(role.getCroRoleTxt().equalsIgnoreCase(ApplicationConstants.PROVIDER) ||
(role.getCroRoleTxt().equalsIgnoreCase(ApplicationConstants.PHYSICIAN_ASST)) ||
(role.getCroRoleTxt().equalsIgnoreCase(ApplicationConstants.NURSE_PRACTITIONER)) ||
(role.getCroRoleTxt().equalsIgnoreCase(ApplicationConstants.NURSE)) ||
(role.getCroRoleTxt().equalsIgnoreCase(ApplicationConstants.MEDICAL_ASST))
))) { %>
parent.window.location.href = "calendarEncounterDetail.do?penId=" + obj['penId'] + "&patId=" + obj['patId'];
<%
} else {
%>
parent.window.location.href = "patientSummaryPage.do?patId=" + obj['patId'];
<%
}
%>
}
function onClickSaveAppointment() {
lightbox.save();
//scheduler.callEvent("onEventSave", [this._lightbox_id, data, this._new_event]);
//scheduler.callEvent("onAfterLightbox", []);
}
</script>
<div>
<kendo:window name="patientDemographicsPopup" title="Patient Demographics" draggable="false" resizable="false" width="900" height="600" visible="false" iframe="true" modal="true" >
</kendo:window>
<form id='calendarForm'>
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="20%" align="right" valign="middle">Location:</td>
<td width="80%" align="left" valign="middle">
<kendo:dropDownList name="bcfId" dataTextField="bcfNameTxt" dataValueField="bcfId" autoBind="false" index="0">
<kendo:dataSource>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read
url="branches.do" />
</kendo:dataSource-transport>
</kendo:dataSource>
</kendo:dropDownList>
</td>
</tr>
<!--
<tr>
<td width="20%" align="right" valign="middle">Event Type:</td>
<td width="80%" align="left" valign="middle">
<kendo:dropDownList name="cevEvntTypeTxt" change="onSelectEventType" dataTextField="cdvCodeValueTxt" dataValueField="cdvCodeValueTxt" autoBind="false">
<kendo:dataSource>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read
url="getCodeByType.do?type=Calendar Event Type" />
</kendo:dataSource-transport>
</kendo:dataSource>
</kendo:dropDownList>
</td>
</tr>
<tr class="facilityRow">
<td width="20%" align="right" valign="middle">Facility Appt:</td>
<td width="80%" align="left" valign="middle">
<kendo:dropDownList name="cevEvntApptTxt"
dataTextField="cdvCodeValueTxt" dataValueField="cdvCodeValueTxt"
autoBind="false">
<kendo:dataSource>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read
url="getCodeByType.do?type=Facility Appt" />
</kendo:dataSource-transport>
</kendo:dataSource>
</kendo:dropDownList>
</td>
</tr>
<tr class="branchRow">
<td width="20%" align="right" valign="middle">Location Appt:</td>
<td width="80%" align="left" valign="middle">
<kendo:dropDownList name="cevEvntApptTxt1"
dataTextField="cdvCodeValueTxt" dataValueField="cdvCodeValueTxt"
autoBind="false">
<kendo:dataSource>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read
url="getCodeByType.do?type=Location Appt" />
</kendo:dataSource-transport>
</kendo:dataSource>
</kendo:dropDownList>
</td>
</tr>
<tr class="providerRow">
<td width="20%" align="right" valign="middle">Provider Appt:</td>
<td width="80%" align="left" valign="middle">
<kendo:dropDownList name="cevEvntApptTxt2"
dataTextField="cdvCodeValueTxt" dataValueField="cdvCodeValueTxt"
autoBind="false">
<kendo:dataSource>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read
url="getCodeByType.do?type=Provider Appt" />
</kendo:dataSource-transport>
</kendo:dataSource>
</kendo:dropDownList>
</td>
</tr>
-->
<tr class="patientRow">
<td width="20%" align="right" valign="middle">Appointment Type:</td>
<td width="80%" align="left" valign="middle">
<kendo:dropDownList name="cevEvntApptTxt"
dataTextField="cdvCodeValueTxt" dataValueField="cdvCodeValueTxt"
autoBind="false">
<kendo:dataSource>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read
url="getCodeByType.do?type=Patient Appt" />
</kendo:dataSource-transport>
</kendo:dataSource>
</kendo:dropDownList>
</td>
</tr>
<tr>
<td width="20%" align="right" valign="middle">Appointment Status:</td>
<td width="80%" align="left" valign="middle">
<kendo:dropDownList name="cevStatusTxt"
dataTextField="cdvCodeValueTxt" dataValueField="cdvCodeValueTxt"
autoBind="false">
<kendo:dataSource>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read
url="getCodeByType.do?type=Appt Disposition" />
</kendo:dataSource-transport>
</kendo:dataSource>
</kendo:dropDownList>
</td>
</tr>
<tr>
<td width="20%" align="right" valign="middle">Reason:</td>
<td width="80%" align="left" valign="middle">
<!-- <input id="event_text" class="k-textbox" name="text" style="width:50%;">-->
<textarea name="event_text" id="event_text" cols="10" rows="4" class="k-textbox" id="blog-content" style="width:450px;"></textarea>
</td>
</tr>
<!--
<tr>
<td width="20%" align="right" valign="middle">Resource:</td>
<td width="80%" align="left" valign="middle">
<kendo:dropDownList name="resource" dataTextField="formattedName" dataValueField="cusId" autoBind="false">
<kendo:dataSource>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read url="userList.do" />
</kendo:dataSource-transport>
</kendo:dataSource>
</kendo:dropDownList>
</td>
</tr>
-->
<tr class="patientRow">
<td width="20%" align="right" valign="middle">Rendering Provider:</td>
<td width="80%" align="left" valign="middle">
<kendo:dropDownList name="renderingProvider" dataTextField="pdrName" dataValueField="pdrId" autoBind="true">
<kendo:dataSource>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read url="getProviderList.do" />
</kendo:dataSource-transport>
</kendo:dataSource>
</kendo:dropDownList>
</td>
</tr>
<tr>
<td width="20%" align="right" valign="middle">Start Date/Time:</td>
<td width="80%" align="left" valign="middle">
<kendo:dateTimePicker name="start_date" value="${today}" readonly="readonly" format="MM/dd/yyyy hh:mm tt"></kendo:dateTimePicker>
</td>
</tr>
<tr>
<td width="20%" align="right" valign="middle">End Date/Time:</td>
<td width="80%" align="left" valign="middle">
<kendo:dateTimePicker name="end_date" value="${today}" readonly="readonly" format="MM/dd/yyyy hh:mm tt"></kendo:dateTimePicker>
</td>
</tr>
<tr class="patientRow">
<td width="20%" align="right" valign="middle">Patient:</td>
<td width="80%" align="left" valign="middle">
<kendo:autoComplete name="patientName" placeholder="Search Patient Last Name..." dataTextField="formattedPatientInfo" filter="startswith" ignoreCase="true" minLength="3" style="width:350px" select="autocomplete_select" highlightFirst="true">
<kendo:dataSource serverFiltering="true">
<kendo:dataSource-transport>
<kendo:dataSource-transport-read url="patientLookup.do" type="POST" contentType="application/json"/>
<kendo:dataSource-transport-parameterMap>
<script>
function parameterMap(options,type) {
return JSON.stringify(options);
}
</script>
</kendo:dataSource-transport-parameterMap>
</kendo:dataSource-transport>
<kendo:dataSource-schema data="data" total="total">
</kendo:dataSource-schema>
</kendo:dataSource>
</kendo:autoComplete>
<input id="pdrId" name="pdrId" type="hidden"/>
<input id="cusId" name="cusId" type="hidden"/>
<input id="patId" name="patId" type="hidden"/>
<input id="version" name="version" type="hidden"/>
<input id="cevId" name="cevId" type="hidden"/>
</td>
</tr>
</table>
</form>
</div>
<div>
<div id="BtnClass">
<div id="DlgButtonBar">
<span class="button3Dorrange" id="btnChart" onclick="openPatientChart()" style="padding: 6px 6px;"> Open Chart</span>
<span class="button3D" id="btnDelete" onclick="lightbox.remove()"> Delete</span>
<span class="button3D" id="btnSave" onclick="onClickSaveAppointment()"> Save</span>
<span class="button3D" id="btnCancel" onclick="lightbox.close()"> Cancel</span>
</div>
</div>
</div>
</body>
Hi,
unfortunately I can’t test your custom-editor as it has a lot of dependencies.
Please, provide complete demo or generated html file of custom-form with javascript/css dependencies.