1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Several issues when upgrading the schedule to EJ2

Several issues when upgrading the schedule to EJ2

Hi,

We've implemented a schedule with EJ1 and it works (ej1_schedule.png)
Now, we've started to implement an EJ2 version of this schedule (ej2_schedule.png).

We are instantiating the schedule using the razor syntax and we have several issues:

1) The 1st day of the schedule is always "Sunday" even though we have added "FirstDayOfWeek(1)" in our code

2) We can't display the data in the template resource

In the code, we have

.Resources(res =>
{
res.DataSource(Model.ResourcesList).TextField("Name").IdField("Id"))
.Field("OwnerId"))
.Name("ResourceGp")
.Add();
})
.Group(gr =>
{
gr.Resources(new string[]{ "ResourceGp" });
})
.ResourceHeaderTemplate("#theResourceTemplate")

And in the template

<script id="theResourceTemplate" type="text/x-template">
    <div>${Name}</div>
</script>

But this displays "undefined" in the resource cells even though the resource list is correctly returned.

3) The schedule doesn't send CurrentDate and CurrentView anymore in the request payload.
Our back-end code expects to receive these 2 arguments.
Can you tell us what's the best way to always sends these 2 parameters on each request?

4) Events are not displayed

Here is our code

.EventSettings(builder =>
{
builder.DataSource(d => d.Url("/LoadData").Adaptor("UrlAdaptor"));

builder.Fields(fieldBuilder =>
{
fieldBuilder.StartTime(st => st.Name("StartDate")));
fieldBuilder.EndTime(et => et.Name("EndDate")));
});

builder.Template("#eventTemplate");
})

Here is our template

<script id="eventTemplate" type="text/x-template">
    <span class="box-schedule">
        ${Name}
    </span>
</script>

If we look at the browser console, we have data in the response, but it doesn't not appear in the schedule.

{"result":[{"Id":2,"StartDate":"\/Date(1580846400000)\/","EndDate":"\/Date(1580889600000)\/","Name":"Abc"}],"count":1}

Thanks




Attachment: ej1_ej2_schedule_2f84c04.zip

9 Replies
HB Hareesh Balasubramanian Syncfusion Team March 18, 2020 12:42 PM UTC

Hi Support Arcania, 

Greetings from Syncfusion Support. 

We have validated your reported problems at our end and prepared a sample with your requirements and it can be downloaded from the following link, 

Code snippet:  
@(Html.EJS().Schedule("schedule") 
    .FirstDayOfWeek(1) //query 1 
    .Width("100%") 
    .Height("550px") 
    .SelectedDate(new DateTime(2018, 4, 24)) 
    .Group(group => group.Resources(ViewBag.Resources)) 
    .Resources(res => 
            { 
        res.DataSource(ViewBag.Conferences) 
        .Field("ConferenceId") 
        .Title("Attendees") 
        .Name("Conferences") 
        .TextField("text") 
        .IdField("id") 
        .ColorField("color") 
        .Add(); 
    }) 
    .ResourceHeaderTemplate("#resourceTemplate") //query 2 
    .EventSettings(es => 
        es.Template("#EventTemplate") //query 4 
        .DataSource(dataManager => 
                { 
            dataManager.Url("/Home/LoadData") 
            .CrudUrl("/Home/UpdateData") 
            .CrossDomain(true) 
            .Adaptor("UrlAdaptor"); 
        }) 
        .Query("new ej.data.Query().from('Events').addParams('View', 'Week')") 
    ) 
    .ActionComplete("actionComplete") //query 3 
    .Render() 
) 


Kindly try the above sample and let us know if you have any concerns. 

Regards, 
Hareesh 


SA Support Arcania March 21, 2020 10:22 AM UTC

Hi,

Thanks for your reply,

for (1)
Sorry, I forgot to give you some details in my first post. We're using the timeline views.
If you add these lines in the sample, the first day of the week is always "Sunday" even if you add FirstDayOfWeek(1)

        .CurrentView(Syncfusion.EJ2.Schedule.View.TimelineWeek)
        .Views(view =>
        {
            view.Option(Syncfusion.EJ2.Schedule.View.TimelineDay).Add();
            view.Option(Syncfusion.EJ2.Schedule.View.TimelineWeek).Add();
            view.Option(Syncfusion.EJ2.Schedule.View.TimelineWorkWeek).Add();
            view.Option(Syncfusion.EJ2.Schedule.View.TimelineMonth).Add();
            view.Option(Syncfusion.EJ2.Schedule.View.Agenda).Add();
        })
        .TimeScale(new Syncfusion.EJ2.Schedule.ScheduleTimeScale
        {
            Interval = 1440, // 24h
            SlotCount = 2
        })

for (2)
I didn't know that we have to create a javascript function to display the data. I didn't see that in any of your documentation.
So we cannot use directly the template to display the data? Like "${Name}" for example?

for (3)
Your solution updates the parameter AFTER the request.
But I want to update the parameter before the request.
The "actionBegin" event doesn't work as well.
I placed a breakpoint in the action of your controller and it always receives the previous value.
eg. I change the view to "Month", but in the request, "Week" is sent. It's only on the 2nd query that the new value is sent.

In EJ1, "CurrentDate" and "CurrentView" used to be sent automatically by the schedule in the request payload with the newly changed values.

for (4)
The problem was that I returned the data like in EJ1, that is
{"result":[{...}],"count":1}
I didn't know you have to send it directly as a list now.

Thanks


HB Hareesh Balasubramanian Syncfusion Team March 23, 2020 10:48 AM UTC

Hi Support Arcania, 

Thanks for the update. 

Q1: We can able to reproduce the reported issue at our end and logged the below bug report. The fix will be included in our JS2 weekly release on April 15, 2020. Kindly be patience until then. 

Q2: kindly refer the below UG link for this query, 

And for further reference kindly refer the below code snippets of our previously updated sample, 

Code snippet: 
<div> 
    @(Html.EJS().Schedule("schedule") 
        .FirstDayOfWeek(1) //query 1 
        .Width("100%") 
        .Height("550px") 
        .CurrentView(View.TimelineWeek) 
        .Views(view => 
         { 
             view.Option(View.TimelineDay).Add(); 
             view.Option(View.TimelineWeek).Add(); 
             view.Option(View.TimelineWorkWeek).Add(); 
             view.Option(View.TimelineMonth).Add(); 
             view.Option(View.Agenda).Add(); 
         }) 
        .TimeScale(ts => ts.Enable(true).Interval(1440).SlotCount(2)) 
        .SelectedDate(new DateTime(2018, 4, 24)) 
        .Group(group => group.Resources(ViewBag.Resources)) 
        .Resources(res => 
        { 
            res.DataSource(ViewBag.Conferences) 
            .Field("ConferenceId") 
            .Title("Attendees") 
            .Name("Conferences") 
            .TextField("text") 
            .IdField("id") 
            .ColorField("color") 
            .Add(); 
        }) 
        .ResourceHeaderTemplate("#resourceTemplate") //query 2 
        .EventSettings(es => 
            es.Template("#EventTemplate") //query 4 
            .DataSource(dataManager => 
            { 
                dataManager.Url("/Home/LoadData") 
                .CrudUrl("/Home/UpdateData") 
                .CrossDomain(true) 
                .Adaptor("UrlAdaptor"); 
            }) 
            .Query("new ej.data.Query().from('Events').addParams('View', 'Week')") 
        ) 
        .ActionComplete("actionComplete") //query 3 
        .Render() 
    ) 
</div> 
 
<script id="resourceTemplate" type="text/x-template"> 
    <div class='template-wrap'> 
        <div class="resource-details"> 
            <div class="resource-name">${getEmployeeName(data)}</div> 
            <div class="resource-name">${getEmployeeDesignation(data)}</div> 
        </div> 
    </div> 
</script> 
 
<script type="text/javascript"> 
    //query 3 
    function actionComplete(args) { 
        if (args.requestType == "viewNavigate") { 
            var schObj = document.querySelector('.e-schedule').ej2_instances[0]; 
            schObj.eventSettings.query.params[0].value = schObj.currentView; 
            schObj.refreshEvents(); 
        } 
    } 
    var instance = new ej.base.Internationalization(); 
    function getTimeString(value) { 
        return instance.formatDate(value, { skeleton: 'hm' }); 
    } 
    window.getEmployeeName = function (value) { 
        return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName; 
    }; 
    window.getEmployeeDesignation = function (value) { 
        var resourceName = window.getEmployeeName(value); 
        return (resourceName === 'Margaret') ? 'Sales Representative' : (resourceName === 'Robert') ? 
            'Vice President, Sales' : 'Inside Sales Coordinator'; 
    }; 
</script> 

Q3: Our previously updated sample will fetch the selected currentView in the request payload tab and for further reference we have taken a video demo of it. 
 

Q4: Kindly refer the UG link for this query, 

And for further reference kindly refer the below code snippets of our previously updated sample, 

Code snippet: 
<div> 
    @(Html.EJS().Schedule("schedule") 
        .FirstDayOfWeek(1) //query 1 
        .Width("100%") 
        .Height("550px") 
        .CurrentView(View.TimelineWeek) 
        .Views(view => 
         { 
             view.Option(View.TimelineDay).Add(); 
             view.Option(View.TimelineWeek).Add(); 
             view.Option(View.TimelineWorkWeek).Add(); 
             view.Option(View.TimelineMonth).Add(); 
             view.Option(View.Agenda).Add(); 
         }) 
        .TimeScale(ts => ts.Enable(true).Interval(1440).SlotCount(2)) 
        .SelectedDate(new DateTime(2018, 4, 24)) 
        .Group(group => group.Resources(ViewBag.Resources)) 
        .Resources(res => 
        { 
            res.DataSource(ViewBag.Conferences) 
            .Field("ConferenceId") 
            .Title("Attendees") 
            .Name("Conferences") 
            .TextField("text") 
            .IdField("id") 
            .ColorField("color") 
            .Add(); 
        }) 
        .ResourceHeaderTemplate("#resourceTemplate") //query 2 
        .EventSettings(es => 
            es.Template("#EventTemplate") //query 4 
            .DataSource(dataManager => 
            { 
                dataManager.Url("/Home/LoadData") 
                .CrudUrl("/Home/UpdateData") 
                .CrossDomain(true) 
                .Adaptor("UrlAdaptor"); 
            }) 
            .Query("new ej.data.Query().from('Events').addParams('View', 'Week')") 
        ) 
        .ActionComplete("actionComplete") //query 3 
        .Render() 
    ) 
</div> 


@*query 4*@ 
<script id="EventTemplate" type="text/x-template"> 
    <div class='template-wrap'> 
        <div class="subject">${Subject}</div> 
        <div class="time">Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div> 
    </div> 
</script> 
<script type="text/javascript"> 
    //query 3 
    function actionComplete(args) { 
        if (args.requestType == "viewNavigate") { 
            var schObj = document.querySelector('.e-schedule').ej2_instances[0]; 
            schObj.eventSettings.query.params[0].value = schObj.currentView; 
            schObj.refreshEvents(); 
        } 
    } 
    var instance = new ej.base.Internationalization(); 
    function getTimeString(value) { 
        return instance.formatDate(value, { skeleton: 'hm' }); 
    } 
    window.getEmployeeName = function (value) { 
        return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName; 
    }; 
    window.getEmployeeDesignation = function (value) { 
        var resourceName = window.getEmployeeName(value); 
        return (resourceName === 'Margaret') ? 'Sales Representative' : (resourceName === 'Robert') ? 
            'Vice President, Sales' : 'Inside Sales Coordinator'; 
    }; 
</script> 

Kindly try the above solution and if the issue still persists at your side kindly try to replicate the same problem in our previously shared sample else if share your working sample(if possible) for the better serve. 

Regards, 
Hareesh 


SA Support Arcania March 26, 2020 05:27 AM UTC

Hello,

And thanks for your assistance.

Q1:
How can we get your fixes after it has been released?
Beside installing the nuget package, we've also  downloaded the ej2 files using Essential Studio as we needed to use the splitted version of the javascript files.
Do we need to update Essential Studio to get them?

Q3:
We checked your sample project.
It looks like, when changing the view (from 'Week' to 'Month' for example), it first sends a request with View = 'Week' then sends a 2nd request with View = 'Month'.
But we would like to send only one request. We want to reproduce the same behavior as in EJ1.
In EJ1 for example an object like this is sent automatically by EJ1 in the request payload
{
CurrentDate: "2020-02-04T20:00:00.000Z"
CurrentView: "month"
CurrentAction: "ViewChange"
}

Thanks

HB Hareesh Balasubramanian Syncfusion Team March 27, 2020 12:42 PM UTC

Hi Support Arcania, 

Thanks for the update. 

Q1: You can just update the corresponding NuGet package version in your project and you can able to avail the corresponding fixes in that our fixed version. 

Q2: We have validated your reported problem at our end and for that we have modified our previously updated sample using navigating event and the sample can be downloaded from the following link, 

Code snippet: 
    function Navigating(args) { 
        if (args.action == "view") { 
            this.eventSettings.query.params[0].value = args.currentView; 
        } 
    } 


Kindly try the above sample and if you have any other concerns please revert for further assistance. 

Regards, 
Hareesh 


SA Support Arcania March 30, 2020 07:06 AM UTC

Hi,

Thanks for your reply

Q1:
What about the 2nd part of the question?
We've installed Essential Studio to get the splitted JS files (ej2-base.min.js, ej2-dropdowns.min.js, ej2-schedule.min.js, etc.). We don't use ej2.min.js directly.
How do we then get the fixes in this case? Do we have to update this software?

Thanks

HB Hareesh Balasubramanian Syncfusion Team March 31, 2020 01:12 PM UTC

Hi Support Arcania, 
  
Thanks for the update. 
  
We have validated your reported scenario at our end and it can achieved using the below link, 
  
Kindly try the above link to generate your required scripts and if you have any other concerns please revert for further assistance. 
  
Regards, 
Hareesh 


SA Support Arcania April 1, 2020 10:35 AM UTC

OK, maybe I don't explain well!

This is your documentation for schedule:

Do you see the part "You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location"?
This is what we've done: we took the JS files individually and added them to our application
We include only the files we need in a page

So that's why my question was: "do we need to update Essential Studio to get the fixes you've provided"

If you say we can get the same files with the link you've provided, please show us then how to do it.

Please note that we want the EXACT same files but with the fixes you've provided, we don't want to re-architecture our application.
Here are the 19 files we are using:
ej2-base.min.js
ej2-buttons.min.js
ej2-calendars.min.js
ej2-charts.min.js
ej2-compression.min.js
ej2-data.min.js
ej2-dropdowns.min.js
ej2-excel-export.min.js
ej2-file-utils.min.js
ej2-grids.min.js
ej2-inputs.min.js
ej2-lists.min.js
ej2-navigations.min.js
ej2-pdf-export.min.js
ej2-pdfviewer.min.js
ej2-popups.min.js
ej2-schedule.min.js
ej2-splitbuttons.min.js
ej2-svg-base.min.js



HB Hareesh Balasubramanian Syncfusion Team April 6, 2020 12:33 PM UTC

Hi Support Arcania, 

Thanks for the update. 

You can either update directly the entire  Essential Studio JavaScript (Essential JS 2)  for global scripts and CSS styles or else you may update your required files through the CSG ink. 

If you have any other concerns please revert for further assistance. 

Regards, 
Hareesh 


Loader.
Up arrow icon