1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Error in the code to show tooltip

Error in the code to show tooltip

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














12 Replies
KK Karthigeyan Krishnamurthi Syncfusion Team 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 


JO Jorge 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



KK Karthigeyan Krishnamurthi Syncfusion Team 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 


JO Jorge 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



NR Nevitha Ravi Syncfusion Team 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 



JO Jorge 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





KK Karthigeyan Krishnamurthi Syncfusion Team 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 


JO Jorge 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

KK Karthigeyan Krishnamurthi Syncfusion Team 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 


JO Jorge 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


JO Jorge 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



KK Karthigeyan Krishnamurthi Syncfusion Team 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 
 


Loader.
Up arrow icon