Script elements disappears after ondatachange

Stephen Barash

Asked On January 4, 2019 04:59 PM UTC

Hello again friends,

I know this is old stuff, but I need to get tooltips working on schedule cells, have been trying for days. And, I don't think this issue has anything to do with LightSwitch.

I need tooltips that accept variables. I tried the <IF></IF> statements used in your examples, but that doesn't seem to work well. I have things almost completely working using a combination of 'tooltipSettings' and 'appointmentHover'. But if I change update parameter for the query that feeds the Schedule, then the Schedule's oncollectionchange event fires as it should, and causes the tooltips to break. Specifically, the element the tooltip refers to that displays the tooltip ('fooholder') disappears and I get an " JavaScript runtime error: Unable to set property 'innerHTML' of undefined or null reference" error. Below is my code:

(functions below called by Schedule that are not use are not displayed)

var vCat;

myapp.Home.EventItems_render = function (element, contentItem) {

var deleteCustomizationMessage = {

DeleteConfirmation: "Are you sure you want to delete this Event?",

MouseOverDeleteTitle: "Delete Event",

};

$.extend(ej.Schedule.Locale["en-US"], deleteCustomizationMessage);

var script = document.createElement('script');

script.id = "apptemplate";

script.type = 'text/x-jsrender';

script.innerHTML = "{{if View == 'month'}}<div style='height:35px'><div style='float:left;'>{{:~format(StartTime,'month')}}</div><br><div>{{:Subject}}</div></div>{{else}}<div style='height:100%'><div style='float:left;'>{{:~format(StartTime,'strTime')}}</div><div style='float:left;'>{{:~format(EndTime)}}</div> <br><div>{{:Subject}}</div></div>{{/if}}";

document.head.appendChild(script);

var script1 = document.createElement('script');

script1.id = "tooltipTemplate";

script1.type = 'text/x-jsrender';

script1.innerHTML = "<div style='width:450px'> <div style='padding-top:3px;'> <div style='padding-top:2px; font:13px Segoe UI SemiBold;'>{{:Subject}}</div> </div> <div style='padding-top:3px'> <div id='fooHolder' style='padding-top:2px; font:12px Segoe UI SemiBold;'></div> </div> </div>";

document.head.appendChild(script1);

$.views.helpers({ format: _getTime });

var itemTemplate = $("<div id='schedule1'></div>");

itemTemplate.appendTo($(element));

contentItem.value.oncollectionchange = function () {

var first = contentItem.children[0];

var id = first.children[0].valueModel.name;

var subject = first.children[1].valueModel.name;

var starttime = first.children[2].valueModel.name;

var endtime = first.children[3].valueModel.name;

var categorize = first.children[4].valueModel.name;

var dataManger = ej.DataManager({

json: contentItem.value.data,

});

itemTemplate.ejSchedule({

width: "100%", height: "660px",

contextMenuSettings: {

enable: true,

menuItems: {

appointment: [{ id: "open", text: "Open Event" },

{ id: "delete", text: "Delete Event" }],

cells: [{ id: "new", text: "New Event" },

{ id: "today", text: "Today" },

{ id: "gotodate", text: "Go to date" }]

}

},

//currentView: ej.Schedule.CurrentView.Month,

categorizeSettings: { enable: true },

workHours: { highlight: true, start: 7, end: 18 },

tooltipSettings: {

enable: true,

templateId: "#tooltipTemplate"

},

appointmentHover: "setMouse",

showAppointmentNavigator: true,

showTimeZoneFields: false,

showQuickWindow: false,

enableResize: false,

appointmentWindowOpen: "onAppointmentWindowOpen",

beforeAppointmentRemove: "AppointmentRemove",

//navigation: "setYear",

navigation: "setNewDate",

timeMode: ej.Schedule.TimeMode.Hour12,

timeZone: "UTC -08:00",

enableAppointmentResize: false,

allowDragAndDrop: false,

appointmentTemplateId: "#apptemplate",

appointmentSettings: {

applyTimeOffset: false,

categorize: "categorize",

dataSource: dataManger,

id: "Id",

subject: "Subject",

startTime: "StartTime",

endTime: "EndTime",

categorize: "categorize",

allday: false

}

});

}

};

function setMouse(args) {

//var vCat = "";

if (args.appointment.categorize == 3) { vCat = "Orange - Collaborating Agency: Collaborating Agency events are events offered or hosted by a community organization at a PSHH site."; }

else if (args.appointment.categorize == 0) { vCat = "Blue - Complete: The event information has been entered and nothing more is needed."; }

else if (args.appointment.categorize == 1) { vCat = "Green - Resident Only: Resident only events are open to only PSHH residents."; }

else if (args.appointment.categorize == 6) { vCat = "Yellow - Staff Only: Staff only events are open to only PSHH staff."; }

else { vCat = "Red - Incomplete: The event is missing information (# of residents, volunteers present, etc.)"; }

$('#fooHolder')[0].innerHTML = vCat;

//document.getElementById("fooHolder").innerHTML = vCat;

}

In the above, the setMouse function fails after an oncollectionchange as the $('#fooHolder')[0].innerHTML becomes undefined. Trying getElementByID also fails, as the error seems to be the same with various browsers that I've tried.

Thanks for any help or suggestions!

Stephen

Reply | Reply with quote

Karthigeyan Krishnamurthi [Syncfusion]

Replied On January 7, 2019 12:14 PM UTC

Hi Stephen,

Thank you for contacting Syncfusion support.

In the provided code example, tooltip element is accessed with in appointment hover event which is the cause for the issue. Tooltip element will be dynamically rendered and removed only after the appointment hover event, kindly update the footer content within tooltip template as shown below.

http://www.syncfusion.com/downloads/support/forum/141803/ze/Sample-2057869614

var script1 = document.createElement('script');

script1.id = "tooltipTemplate";

script1.type = 'text/x-jsrender';

script1.innerHTML = "<div style='width:450px'> <div style='padding-top:3px;'> <div style='padding-top:2px; font:13px Segoe UI SemiBold;'>{{:Subject}}</div> </div> <div style='padding-top:3px'> <div id='fooHolder' style='padding-top:2px; font:12px Segoe UI SemiBold;'>{{:~format1(Categorize)}}</div> </div> </div>";

document.head.appendChild(script1);

$.views.helpers({ format1: _getText });

function _getText(cate) {

if (cate == 3) { return "Orange - Collaborating Agency: Collaborating Agency events are events offered or hosted by a community organization at a PSHH site."; }

else if (cate == 0) { return "Blue - Complete: The event information has been entered and nothing more is needed."; }

else if (cate == 1) { return "Green - Resident Only: Resident only events are open to only PSHH residents."; }

else if (cate == 6) { return "Yellow - Staff Only: Staff only events are open to only PSHH staff."; }

else { return "Red - Incomplete: The event is missing information (# of residents, volunteers present, etc.)"; }

}

appointmentSettings: {

applyTimeOffset: false,

dataSource: dataManger,

id: "Id",

subject: "Subject",

startTime: "StartTime",

endTime: "EndTime",

categorize: "Categorize",

allday: false

}

Regards,

Karthigeyan

Reply | Reply with quote

Stephen Barash

Replied On January 8, 2019 02:48 AM UTC

Karthigeyan thank you very much. Close, but it still doesn't quiet work. With your new code implemented, the mouseover works correctly for the first appointment item, but then moving the cursor over a different appointment item does not change the mouseover text to text appropriate for that item.

With the debugger, I can see that the function _getText(cate) runs with a mouseover on the first appointment, but subsequent mouseovers on different appointments does not cause the function to run again.

Wait a minute!!! It does work correctly with Google Chrome, which is perfect. (Doesn't work with Internet Explorer 11, which I need to use for debugging. Not problem!)

You guys are amazing and ridiculously smart. Case closed, thank you so much!

Stephen

Reply | Reply with quote

Karthigeyan Krishnamurthi [Syncfusion]

Replied On January 8, 2019 03:57 AM UTC

Hi Stephen,

We are happy that our solution resolved your issue.

Regards,

Karthigeyan

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
141803	Jan 4,2019 04:59 PM UTC	Jan 8,2019 03:57 AM UTC	LightSwitch HTML	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US