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

Changing views fail when using ActionCompleted in Timeline grouping

Thread ID:

Created:

Updated:

Platform:

Replies:

147933 Sep 28,2019 05:45 AM UTC Oct 4,2019 08:47 PM UTC Blazor 9
loading
Tags: Scheduler
Uwe Hein
Asked On September 28, 2019 08:10 AM UTC

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.ResourceDataargs)
{
	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 [Syncfusion]
Replied On September 30, 2019 11:37 AM UTC

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 1st 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
Replied On September 30, 2019 12:17 PM UTC

Hi Nevitha,

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

      regards

         Uwe

Nevitha Ravi [Syncfusion]
Replied On October 1, 2019 04:01 AM UTC

Hi Uwe, 

You are most welcome..! 

Regards, 
Nevitha

NKOUAMBIA CHIMENE
Replied On October 1, 2019 04:52 PM UTC

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 [Syncfusion]
Replied On October 2, 2019 03:09 PM UTC

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 [Syncfusion]
Replied On October 3, 2019 05:48 PM UTC

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. 

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. 

Regards, 
Nevitha 


NKOUAMBIA CHIMENE
Replied On October 3, 2019 06:07 PM UTC

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
Replied On October 3, 2019 07:58 PM UTC

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 [Syncfusion]
Replied On October 4, 2019 08:47 PM UTC

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


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