Changing views fail when using ActionCompleted in Timeline grouping

[Uwe Hein]

Hi everybody,

   it is not possible to change views in scheduler in Timeline grouping when using ActionCompleted on the control. The newly selected view flashes for a second and then resets to the CurrentView. I am using 17.3.0.10-beta

To reproduce do the following:

In the demo source go to TimelineResourceGroup.razor

Add:

<ScheduleEvents TValue="ScheduleData.ResourceData" ActionCompleted="OnActionCompleted">ScheduleEvents>

to the control and

public void OnActionCompleted(ActionEventArgs<ScheduleData.ResourceData> args)
{
	if (args.RequestType == "eventCreated")
	{
		// will trigger when appointment created
	}
	if (args.RequestType == "eventRemoved")
	{
		// will trigger when appointment deleted
	}
	if (args.RequestType == "eventChanged")
	{
		// will trigger when appointment edited
	}
}

to the code section. After this it is not possible to change the view.
        regards
           Uwe

[Nevitha Ravi]

Hi Uwe, 

Greetings from Syncfusion Support. 

The reported issue is a known issue in our end and we resolved it and will be included in our upcoming patch release, which is expected to be rolled out on 1^st week of October, 2019.  

In the meantime, we suggest you to use the following code to overcome the reported issue. 

 

<EjsSchedule TValue="ScheduleData.ResourceData" Width="100%" Height="650px" SelectedDate="@(new DateTime(2018, 4, 4))" @bind-CurrentView="@TimelineWeek"> 

    <ScheduleGroup Resources="@GroupData"></ScheduleGroup> 

    <ScheduleResources> 

        <ScheduleResource DataSource="@ProjectData" Field="ProjectId" Title="Choose Project" Name="Projects" TextField="text" IdField="id" ColorField="color"></ScheduleResource> 

        <ScheduleResource DataSource="@TaskData" Field="TaskId" Title="Category" Name="Categories" TextField="text" IdField="id" GroupIDField="groupId" ColorField="color" AllowMultiple="true"></ScheduleResource> 

    </ScheduleResources> 

    <ScheduleViews> 

        <ScheduleView Option="View.TimelineDay"></ScheduleView> 

        <ScheduleView Option="View.TimelineWeek"></ScheduleView> 

        <ScheduleView Option="View.TimelineWorkWeek"></ScheduleView> 

        <ScheduleView Option="View.TimelineMonth"></ScheduleView> 

        <ScheduleView Option="View.Agenda"></ScheduleView> 

    </ScheduleViews> 

    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 

    <ScheduleEvents TValue="ScheduleData.ResourceData" ActionCompleted="OnActionCompleted"></ScheduleEvents> 

</EjsSchedule> 

 

@code{ 

    public View TimelineWeek = View.TimelineWeek; 

    public List<ScheduleData.ResourceData> DataSource = new ScheduleData().GetResourceData(); 

    public string[] GroupData = new string[] { "Projects", "Categories" }; 

    private List<object> ProjectData { get; set; } = new List<object> { 

        new {text = "PROJECT 1", id= 1, color= "#cb6bb2"}, 

        new {text = "PROJECT 2", id= 2, color= "#56ca85"}, 

        new {text = "PROJECT 3", id= 3, color= "#df5286"} 

    }; 

    private List<object> TaskData { get; set; } = new List<object> { 

        new { text = "Nancy", id= 1, groupId = 1, color = "#df5286" }, 

        new { text = "Steven", id= 2, groupId = 1, color = "#7fa900" }, 

        new { text = "Robert", id= 3, groupId = 2, color = "#ea7a57" }, 

        new { text = "Smith", id= 4, groupId = 2, color = "#5978ee" }, 

        new { text = "Micheal", id= 5, groupId = 3, color = "#df5286" }, 

        new { text = "Root", id= 6, groupId = 3, color = "#00bdae" } 

    }; 

    public void OnActionCompleted(ActionEventArgs<ScheduleData.ResourceData> args) 

    { 

        if (args.RequestType == "eventCreated") 

        { 

            // will trigger when appointment created 

        } 

        if (args.RequestType == "eventRemoved") 

        { 

            // will trigger when appointment deleted 

        } 

        if (args.RequestType == "eventChanged") 

        { 

            // will trigger when appointment edited 

        } 

    } 

} 

Regards, 

Nevitha. 

 

[Uwe Hein]

Hi Nevitha,

  thank you for the fast response! - works as expected.

      regards

         Uwe

[Nevitha Ravi]

Hi Uwe, 

You are most welcome..! 

Regards, 

Nevitha

[NKOUAMBIA CHIMENE]

Hello Nevitha!

I have some issues

1- Day view doesn't show (My scheduler has Timeline with 2 ressources)

2- Even when I implement the solution bellow about changing view it doesn't work correctly since in my Method OnNavigating() I change the MyView Variable

and in Method On ActionCompleted I need the date to handle somes filter in my datasource(like bind only data of correspondant Week/Month/Day) but the Current Date doesn't show anything when Navigating as this image show. I Hope the issues will be fixed

3- Sometimes when Navigatings into View OnEventRendered just show and Errors 

this is my code, I had the If condition because I was think it is the agenda view thas cause problem but it is not 

 public View MyView = View.TimelineWeek;  

 public async void OnEventRendered(EventRenderedArgs args) 

    { 

        if (MyView == View.TimelineWeek || MyView == View.TimelineMonth){

            var style = await args.Element.GetAttribute("Style"); 

            string height = style.ToString() + "height:67px;"; //reduce two pixels from the height of work cells for borders 

            args.Element.SetAttribute("Style", height);

        }

    }  

Thanks,

Chimène NK.

[Balaji Paramesvaran]

Hi Nkouambia, 

Greetings from Syncfusion Support. 

Q1. As mentioned in our previous update, this is a known issue. Please use the suggested workaround solution until the release has been rolled out. 

 

<EjsSchedule TValue="AppointmentData" CssClass="my-schedule" Width="100%" Height="650px" SelectedDate="@(new DateTime(2019, 1, 31))" @bind-CurrentView="@CurrentView"> 

        <ScheduleGroup Resources="@GroupData"></ScheduleGroup> 

        <ScheduleResources> 

            <ScheduleResource DataSource="@ProjectData" Field="ProjectId" Title="Choose Project" Name="Projects" TextField="text" IdField="id" ColorField="color"></ScheduleResource> 

            <ScheduleResource DataSource="@TaskData" Field="TaskId" Title="Category" Name="Categories" TextField="text" IdField="id" GroupIDField="groupId" ColorField="color" AllowMultiple="true"></ScheduleResource> 

        </ScheduleResources> 

        <ScheduleViews> 

            <ScheduleView Option="View.TimelineDay"></ScheduleView> 

            <ScheduleView Option="View.TimelineWeek"></ScheduleView> 

            <ScheduleView Option="View.TimelineWorkWeek"></ScheduleView> 

            <ScheduleView Option="View.TimelineMonth"></ScheduleView> 

            <ScheduleView Option="View.Agenda"></ScheduleView> 

        </ScheduleViews> 

        <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 

        <ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered"></ScheduleEvents> 

    </EjsSchedule> 

…. 

public View CurrentView = View.TimelineWeek; 

 

Q2. While the Action is "view"(view navigation action), CurrentDate and PreviousDate will not be available in the parameter, which will be available when the Action is "date"(date navigation action). If you still need CurrentDate and PreviousDate in “view” Action, kindly share your exact use case scenario to provide the prompt solution. 

 

Q3.  The cause for reported issue is in agenda view styles will not be available in element attribute. So we had modified the sample which can be downloaded in the following link. https://www.syncfusion.com/downloads/support/directtrac/250221/ze/SchedulerSample1608695197  

    public async void OnEventRendered(EventRenderedArgs<AppointmentData> args) 

    { 

        if (CurrentView != View.Agenda) 

        { 

            var style = await args.Element.GetAttribute("Style"); 

            string height = style.ToString() + "height:98px;"; //reduce two pixels from the height of work cells for borders 

            args.Element.SetAttribute("Style", height); 

        } 

    } 

Regards, 

Balaji 

[Nevitha Ravi]

Hi Nkouambia, 

Thanks for your update. 

Q1 & Q2: We were unable to reproduce the reported issues, we have checked both vertical and timeline views which are working fine at our end. Kindly share the following details to check the issue further at our end. 

• Whether you are using vertical view, timeline view or both.
• Share your customization done within Navigating event.
• Kindly check whether you have used the following code snippet as the image shared by you doesn’t contain the timeline day view.

<ScheduleView Option="View.TimelineDay"></ScheduleView> 

Q3: Currently we couldn’t receive current view range in our blazor scheduler and we have logged the bug report to achieve it using CustomAdaptor which can be tracked form the following link. The fix will be included in our upcoming bi-weekly patch release expected to be rolled out in the mid of October. 

https://www.syncfusion.com/feedback/9272/not-able-to-receive-parameters-in-customadaptor 

Q4: We suspect that the locale files might be missed in your mentioned location which could cause the reported problem. We have prepared a sample for your reference which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/147933/ze/SchedulerSample87771409  

Regards, 

Nevitha 

[NKOUAMBIA CHIMENE]

Hello Balaji,

I'm not sure you understand my issues, I know that my english is not very clear but all the answers you provide is already implement in my existing code but I still Have errors. Your Team members Nevitha has already give the solution in 30th of September so I implement it but no Solution

1- View day doesn't show 

2- When navigating in month view my application just crash 

3- When Navigating in timeline Month I need to know the Month I'm about to load so my data will be charge only for that month 

4- How can I Translate this in French 

I add this in my code but still show in english, i'm I missing something?? 

[Inject]

IJSRuntime JsRuntime { get; set; }

protected override void OnAfterRender(bool firstRender) 

    {

        this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/fr.json").SetCulture("fr-CA").LoadCldrData(new string[] { "wwwroot/cldr-data/main/fr-CA/ca-gregorian.json", "wwwroot/cldr-data/main/fr-CA/timeZoneNames.json", "wwwroot/cldr-data/supplemental/numberingSystems.json", "wwwroot/cldr-data/main/fr-CA/numbers.json" });

    }

Thanks,

Chimène Nk.

[NKOUAMBIA CHIMENE]

Hello Nevitha,

Q1-I use Timeline View, I just Add the View.TimelineDay option I have forgot it but my problem is that I don't want Day and TimelineDay to be shown at the same time.

Q2- In timelineMonth How can I adjust the heigth of timelineMonth cells when multiple event has to be show in the same cells since I set the properties RowAutoHeight="true"

like in image my line for Salle 01 have to show 2 event but his heigth is not coherent with the content

Q3- When Load my agenda view scheduler heigth just reduce I don't know what i'm missing, other view are showing auto heigth but AgendaView Not

Q4- Since you are not able to reproduce my crash issue Have you try with lot of Data with cells templates

Q5 When load my scheduler I have like 2 times cells load(just millisecond but enougth to see it) when use custom templates cells, but I don't have the same problem with normal cells(When not customized)

I just attach my code logic, I Hope it is sufficient to understand my case.

Thanks,

Chimene NK.

Attachment: NKCBlazorCode_d0aa6d09.7z

[Nevitha Ravi]

Hi Nkouambia, 

 

Thanks for your update. 

 

Q1. We suspect that your requirement is to have only specific views. The views that are added within ScheduleView will be rendered on the scheduler. Kindly share more details about your requirement if we misunderstood your requirement. 

  

Q2. We have prepared a sample to make the event details visible and not exceed cell grid lines with RowAutoHeight property as true, and there will be a default space available below the event in the cell. Please refer the sample from the following link. 

 https://www.syncfusion.com/downloads/support/directtrac/250221/ze/SchedulerSample1585493154  

 

Q3.  In agenda view, to get the height as auto, please use the following code snippet. 

  

        .e-schedule .e-agenda-view .e-content-wrap { 

        height: auto !important; 

    } 

 

Q4.  The reported issue is due to large amount of data and using template, to overcome this we need to increase the buffer size in startup.cs file as in the following code. 

 

     

     public void ConfigureServices(IServiceCollection services) 

        { 

            services.AddRazorPages(); 

            services.AddServerSideBlazor(); 

            services.AddSingleton<WeatherForecastService>(); 

            services.AddSignalR(e => { 

                e.MaximumReceiveMessageSize = 102400000; 

            }); 

        } 

 

Q5.  By default when we use templates, there will be a delay in rendering the template due to that the component loads twice. We have already considered this as enhancement and will be included in any of our upcoming releases. 

Regards, 

Nevitha