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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Error in the code to show tooltip

Thread ID:

Created:

Updated:

Platform:

Replies:

143611 Mar 28,2019 08:38 PM UTC Apr 12,2019 10:24 AM UTC ASP.NET MVC - EJ 2 12
loading
Tags: Schedule
Jorge
Asked On March 28, 2019 08:38 PM UTC

Hi, I am testing the sample code of Multiple Resources - Room Scheduler:



But when I want to add the code to show the ToolTip of the "Templates - Tooltip" example, after the "DataSource":





I get an error:




I'm using VS 20017 and MVC5

Thanks in advance.

Jorge














Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 29, 2019 09:21 AM UTC

Hi Jorge, 
 
Greetings from Syncfusion . 
 
The tooltip API is not defined correctly which is the cause for the issue. Use any one of the below methods in your sample. 
 
@Html.EJS().Schedule("schedule").Width("100%").Height("650px").EventRendered("onEventRendered").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource, EnableTooltip = true, TooltipTemplate = "#toolTip" }).SelectedDate(new DateTime(2018, 2, 15)).Render() 
 
 
@Html.EJS().Schedule("schedule").Width("100%").Height("650px").EventSettings(e => e.DataSource(ViewBag.datasource).EnableTooltip(true)).Render() 
 
Regards, 
Karthi 


Jorge
Replied On April 1, 2019 06:42 PM UTC

Hi Karthigeyan,

Thanks for the example codes that you sent me. They work well.

I was able to execute all the code examples without problems.

The problem is that they do not work with the sample code of the "Room Scheduler".






You can send me the code based on the demo of the "Room Scheduler":

https://ej2.syncfusion.com/aspnetmvc/Schedule/TimelineResources#/material


Other additional queries about the schedule control:

 - Why do not you see the horizontal and vertical scroll bars ...?

 - Why do not you take the css style right in the header ...? (Without modifying the demo css)


Again thanks for the help.

Jorge



Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 2, 2019 09:45 AM UTC

Hi Jorge,  
 
We are happy to hear that our sample helped you. 
 
In our Room Scheduler online sample, CSS is included only for Timeline Day and Week views. For TimelineMonth view, we need to add styles as below and for the same we have prepared the sample for your reference. 
 
<style> 
    .e-schedule .e-timeline-month-view .e-resource-left-td, 
    .e-schedule .e-timeline-view .e-resource-left-td { 
        vertical-align: bottom; 
    } 
 
    .e-schedule.e-device .e-timeline-month-view .e-resource-left-td, 
    .e-schedule.e-device .e-timeline-view .e-resource-left-td { 
        width: 75px; 
    } 
 
    .e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text, 
    .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text { 
        display: flex; 
        font-weight: 500; 
        padding: 0; 
    } 
 
        .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div { 
            border-top: 1px solid rgba(0, 0, 0, 0.12); 
        } 
 
        .e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text > div, 
        .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div { 
            border-right: 1px solid rgba(0, 0, 0, 0.12); 
            flex: 0 0 33.3%; 
            font-weight: 500; 
            height: 36px; 
            line-height: 34px; 
            padding-left: 5px; 
        } 
 
            .e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text > div:last-child, 
            .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div:last-child { 
                border-right: 0; 
            } 
 
    .e-schedule .template-wrap { 
        display: flex; 
        height: 100%; 
        text-align: left; 
    } 
 
        .e-schedule .template-wrap > div { 
            border-right: 1px solid rgba(0, 0, 0, 0.12); 
            flex: 0 0 33.3%; 
            font-weight: 500; 
            line-height: 57px; 
            overflow: hidden; 
            padding-left: 5px; 
            text-overflow: ellipsis; 
        } 
 
            .e-schedule .template-wrap > div:last-child { 
                border-right: 0; 
            } 
 
    .e-schedule .e-timeline-view .e-resource-cells, 
    .e-schedule .e-timeline-month-view .e-resource-cells { 
        padding-left: 0; 
    } 
 
    .e-schedule .e-timeline-month-view .e-date-header-wrap table col, 
    .e-schedule .e-timeline-month-view .e-content-wrap table col, 
    .e-schedule .e-timeline-view .e-date-header-wrap table col, 
    .e-schedule .e-timeline-view .e-content-wrap table col { 
        width: 100px; 
    } 
 
    .e-schedule .e-read-only { 
        opacity: .8; 
    } 
 
    @@media (max-width: 550px) { 
        .e-schedule .e-timeline-month-view .e-resource-left-td, 
        .e-schedule .e-timeline-view .e-resource-left-td { 
            width: 100px; 
        } 
 
            .e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text > div, 
            .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div, 
            .e-schedule .template-wrap > div { 
                flex: 0 0 100%; 
            } 
 
                .e-schedule .template-wrap > div:first-child { 
                    border-right: 0; 
                } 
 
                .e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text > div:first-child, 
                .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div:first-child { 
                    border-right: 0; 
                } 
 
        .e-schedule .room-type, 
        .e-schedule .room-capacity { 
            display: none; 
        } 
    } 
</style> 
 
We believe the above CSS will resolve your other reported issues. 
 
Regards, 
Karthi 


Jorge
Replied On April 3, 2019 10:47 PM UTC

Hi Karthi,

Thanks for the help with the css. It worked.

But I continue without being able to show the tooltip.

If you see the previous message, attach images of all the errors in the code.

I appreciate you can help me with that.

Regards,

Jorge



Nevitha Ravi [Syncfusion]
Replied On April 4, 2019 12:24 PM UTC

Hi Jorge, 

Thanks for your update. 

We have shared our previous sample by enabling tooltip in it which can be downloaded from the following link. 

<div> 
    @(Html.EJS().Schedule("schedule") 
        .Width("100%") 
        .Height("650px") 
        .CurrentView(View.TimelineMonth) 
        .WorkHours(new ScheduleWorkHours { Start = "08:00", End = "18:00" }) 
        .TimeScale(ts => ts.SlotCount(1).Interval(60)) 
        .Views(view => { view.Option(View.TimelineDay).Add(); view.Option(View.TimelineMonth) 
        .EventTemplate("#timeline-event-template").Add(); view.Option(View.MonthAgenda).Add(); }) 
        .ResourceHeaderTemplate("#resource-template") 
        .Group(group => group.EnableCompactView(false).Resources(ViewBag.ResourceNames)) 
        .Resources(res => { res.DataSource(ViewBag.RoomDatas).Field("RoomId").Title("Room Type").Name("MeetingRoom").TextField("name").IdField("id").ColorField("color").AllowMultiple(true).Add(); }) 
        .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource, EnableTooltip = true, TooltipTemplate = "#toolTip" }) 
        .PopupOpen("onPopupOpen") 
        .RenderCell("onRenderCell") 
        .EventRendered("onEventRendered") 
        .ActionBegin("onActionBegin") 
        .Render() 
    ) 
</div> 

So please check whether this could resolve your issue, if the issue persist still please share your code or else reproduce it in the above sample to check further. 

Regards, 
Nevitha 



Jorge
Replied On April 6, 2019 05:45 PM UTC

Hi Nevitha

The demo works perfect.

But when I try to do it in my solution, it gives error: Uncaught ReferenceError: ej is not defined






Try these variants and they do not work, get same error, "is not defined":

var instancia = new ej2.base.Internationalization();

 var instancia = new ej2_instances.base.Internationalization();


Looking for a solution in the forum, try putting the value to False and it did not work either:

<add key="UnobtrusiveJavaScriptEnabled" value="true" />


I hope you can guide me.

Thansk in advance

Jorge





Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 8, 2019 06:03 AM UTC

Hi Jorge,  
 
Thanks for your update.  
 
We were unable to see the provided image and kindly try the below code example. 
 
var instance = new ej.base.Internationalization(); 
 
Kindly share your index and layout files to proceed further. 
 
Regards, 
Karthi 


Jorge
Replied On April 8, 2019 10:54 PM UTC

Hi Karti,

Just this line is the one that gives error:


 var instance = new ej.base.Internationalization(); 


After the error, does not load the events.

Regards,

Jorge






Attachment: Index_80df4994.rar

Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 9, 2019 05:38 AM UTC

Hi Jorge,   
  
Thanks for your update.   
 
We suspect that in layout file, true is set within @RenderSection which could be the cause. If true is set means, we need to use @section in cshtml like in the below online sample. 
 
Kindly try the below code example in your sample. 
 
layout 
@RenderSection("scripts", required: false) 
 
index 
<script type="text/javascript"> 
    var instance = new ej.base.Internationalization(); 
    function getTimeString(value) { 
        return instance.formatDate(value, { skeleton: 'hm' }); 
    } 
</script> 
 
Note: Your index file is empty. 
 
Regards, 
Karthi 


Jorge
Replied On April 9, 2019 01:31 PM UTC

Hi Karthi,

Try the code inside and outside the scripts section and it did not work.

I keep getting the error.

I attach the test solution.

Inside the solution is the Room Schedule code, that I need to use.

I cannot upload de file. Here I uploaded it to Drive

https://drive.google.com/file/d/1UenjtsYrw0J8wK80KPF-3TN2ASKK_RXI/view?usp=sharing

Regards,

Jorge


Jorge
Replied On April 11, 2019 01:51 PM UTC

Hi,

I do not know if you could see the project I sent ...?

I can not attach it, but I leave the download link in Google Drive:


Regards,

Jorge




Jorge
Replied On April 9, 2019 01:31 PM UTC

Hi Karthi,

Try the code inside and outside the scripts section and it did not work.

I keep getting the error.

I attach the test solution.

Inside the solution is the Room Schedule code, that I need to use.

I cannot upload de file. Here I uploaded it to Drive

https://drive.google.com/file/d/1UenjtsYrw0J8wK80KPF-3TN2ASKK_RXI/view?usp=sharing

Regards,

Jorge



Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 12, 2019 10:24 AM UTC

Hi Jorge, 
 
Thanks for sharing your sample. 
 
In your sample, script is not referred which is the cause and adding the below lines resolved the issue. 
 
Note: Step 4 in the above UG is missed in your sample. 
 
<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" /> 
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> 
 
 
Regards, 
Karthi 
 


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