Dynamic resources and template

[Riccardo Zucchetto]

Hi,
I am using the client-server version of Blazor.

I need to add Resources to the Scheduler (in Timeline view) after having downloaded them from a webserver. However, currently I cannot assign resources after creating the scheduler even if they are local and static.

I attach an example project: by clicking on the "Click here" button a method is called, which should assign the resources to the scheduler; actually, no resource is assigned, and there seems to be an exception raised. I have tried different methods, but none of them are working.

Can you please tell me if there is a way to achieve this?

Moreover, is there (or will there be) the possiblity to create a template for the resources? For instance, I need to have three columns in the resource row: the name of the person, its department and another data.

Thank you,

Riccardo

Attachment: SyncfusionBlazor_3f28c51d.zip

[Nevitha Ravi]

Hi Riccardo, 

Greetings from Syncfusion Support. 

 

We have prepared a sample with our latest version 17.2.39-beta for your requirements “adding resources dynamically to scheduler” and “create a template for resources” using AddResources public method and ResourceHeaderTemplate which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/146364/ze/Blazor-Scheduler-1959090081  

Please find the following code snippet for adding the resources dynamically. 

<EjsButton OnClick="@AddResources" Content="Add Resource"></EjsButton> 

   

  EjsSchedule<AppointmentData> ScheduleObj; 

    public List<object> ResourceData { get; set; } = new List<object> 

    { 

         new { text= "Jack", id= 9, color= "#ea7a57", capacity= 31, type= "Conference"     } 

    }; 

    public void AddResources() 

    { 

        this.ScheduleObj.AddResource(ResourceData, "Rooms", 0); 

    } 

The following code helps you to have three columns in the resource row. 

<ScheduleTemplates> 

        <ResourceHeaderTemplate> 

            <div class='template-wrap'> 

                <div class="room-name">@((context as dynamic).ResourceData.Text)</div> 

                <div class="room-type">@((context as dynamic).ResourceData.Capacity)</div> 

                <div class="room-capacity">@((context as dynamic).ResourceData.Type)</div> 

            </div> 

        </ResourceHeaderTemplate> 

    </ScheduleTemplates> 

 

    public class TemplateArgs 

    { 

        public ResourceDataModel ResourceData { get; set; } 

    } 

    public class ResourceDataModel 

    { 

        public string Type { get; set; } 

        public string Text { get; set; } 

        public int Capacity { get; set; } 

    } 

    public TemplateArgs Model = new TemplateArgs(); 

The resource Jack is added dynamically on button click as in the following image. 

 

Please try out the sample and let us know if you need any further assistance. 

Regards, 

Nevitha 

 

[Riccardo Zucchetto]

Hi Nevitha,

Thank you for your project, it exactly meets my requirements. Now I'll do a few more tests for my scenario, which is client-based (your example is Blazor server only).

Meanwhile, I would like to share with you a working example of the same requirement in the client version of Blazor: I had to add a few references and a build tag in the Client.csproj project to make it work.

Thank you again,

Riccardo

Attachment: SyncfusionBlazor_f7140eb4.zip

[Karthigeyan Krishnamurthi]

Hi Riccardo, 

 

Thanks for sharing your project. 

 

We are happy that our solution fulfilled your requirements. 

 

Regards, 

Karthi 

[Uwe Hein]

Hi Karthi,

  thank you for the sample you provided. There must be something wrong with the server-side sample, as I only can add 5 resources. The 6th one tries to reconnect and displays the following error:

Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.

Every additional resource produces the same error.

Ricardo's sample works fine - I can add as many resources as I want. Server and client code in index.razor are identical. 

I tried with Version="17.2.0.40-beta" and Version="17.2.0.39-beta"

I also adjusted link and script tags in _Host.chtml to:

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.2.40/material.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/17.2.40/dist/ej2.min.js">script>
<script src="https://cdn.syncfusion.com/ej2/17.2.40/dist/ejs.interop.min.js">script>

Maybe you can take a closer look - to me it looks like a bug in server-side blazor.    

     regards

      Uwe

[Hareesh Balasubramanian]

Hi Uwe, 

Thanks for your update. 

When we add resources to the scheduler dynamically, (for ex 5 resource will take approximately 1100ms), the execution of next step need to wait until the process complete which can be resolved by increasing the buffer size like below. Kindly add the following highlighted code in the Startup.cs file 

        public void ConfigureServices(IServiceCollection services) 

        { 

            services.AddRazorPages(); 

            services.AddServerSideBlazor(); 

            services.AddSingleton<WeatherForecastService>(); 

            services.AddSignalR(e => { 

                e.MaximumReceiveMessageSize = 102400000; 

            }); 

        } 

We have modified our previous sample, such that we can add more number of resources dynamically. 

https://www.syncfusion.com/downloads/support/forum/146364/ze/Blazor-Scheduler152155870 

Regards, 

Hareesh 

[Uwe Hein]

Hi Hareesh,

  thank you for the quick reply. Is this limitation only is related to server-side blazor ? Is there a similar limit with client-side blazor ? I have to deal with 40 rooms - so it might be reasonable to set a filter on the rooms I want to check before displaying the schedule. What control would you recommend ? I am new to web programming (I come from winforms). Is there something like a checkable listbox or a checkable grid.

    regards

       Uwe

[Hareesh Balasubramanian]

Hi Uwe, 

Thanks for your update. 

No, there is no limitations in the Client side sample, as Client side Balzor sample doesn’t use SignalR. 

We recommend you to try the ListBox component to add/remove resources dynamically, please find the sample demo link for the ListBox component, 

https://ej2.syncfusion.com/blazor/ListBox/Checkbox?theme=material 

Please revert us back, if you need any further assistance on this. 

Regards, 

Hareesh