We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Script elements disappears after ondatachange

Thread ID:

Created:

Updated:

Platform:

Replies:

141803 Jan 4,2019 04:59 PM UTC Jan 8,2019 03:57 AM UTC LightSwitch HTML 3
loading
Tags: Schedule
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

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. 
 
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 


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

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon