Add a new Row to the current Edit Template

[Max]

Hi,

I am trying to use the existing template for adding to the scheduler. However, I can't see how. Looks like you you can if it a drop-down but I want to add input with formatting to it.

Essentially I want to add a text field to the current UI for adding or editing the scheduler.

Many Thanks,

Max.

[Alagumeena Kalaiselvan]

Hi Max, 

Greetings from Syncfusion support! 

We have checked your reported issue “Add a new Row to the current Edit Template” and you can customize the editor template using EditorTemplate option of Scheduler. Already, we have documented the your scenario  in our documentation site. Refer the below link for that. 

UG Link: https://blazor.syncfusion.com/documentation/scheduler/editor-template/#customizing-event-editor-using-template  

Kindly get back to us, If you need further assistance. 

Regards 

Alagumeena.K 

[Max]

Hi,

Sorry I meant to include that I have tried that. When I add a check box in a custom version I am unable to use that checkbox to change the datetime options i.e. from datetime options to date range. If I try just adding a scheduler resource I can't get this to work when all I want to add is an input/SfTextBox and not a dropdown.

I have trying the following:

https://blazor.syncfusion.com/documentation/scheduler/editor-template/#customizing-event-editor-using-template

https://blazor.syncfusion.com/documentation/scheduler/resources/

The second link is more what I was looking for however this doesn't work if all you are looking to add is an input/SfTextBox.

Regards,

Max.

[Vengatesh Maniraj]

Hi Max, 

Thanks for the update. 

Before proceeding further, could you please confirm whether your requirement is to add the All Day checkbox in the custom editor template? 

 

If this is not your requirement kindly share more details about your requirement like image/video demo to serve you better. 

Regards, 

Vengatesh 

[Max]

Hi,

That is indeed the one. Below is an example of what I'm trying to achieve.

As you can see when checked it still shows both.

Unchecked it does the same thing. So neither show the time.

Behind the scenes:

<EditorTemplate>

            @{

                var con = context as ItemModel;

                AllDay = con.IsAllDay;

                <input type="hidden" name="Id" class="e-field" value="@con.Id" />

                <table class="custom-event-editor" width="100%" cellpadding="5">

                    <tbody>

                        <tr>

                            <td colspan="4">

                                <SfTextBox ID="@nameof(ItemModel.Subject)" CssClass="e-field e-input" @bind-Value="@con.Subject" Placeholder="Name" FloatLabelType="FloatLabelType.Always"></SfTextBox>

                            </td>

                            <td colspan="4">

                                <SfTextBox ID="@nameof(ItemModel.Location)" CssClass="e-field e-input" @bind-Value="@(con.Location)" Placeholder="Location" FloatLabelType="FloatLabelType.Always"></SfTextBox>

                            </td>

                        </tr>

                        @if (con.IsAllDay)

                        {

                            <tr>

                                <td colspan="4">

                                    <SfDatePicker ID="@nameof(ItemModel.StartTime)" FirstDayOfWeek="1" Min="MinDate" Max="MaxDate" CssClass="e-field" TValue="DateTime" @bind-Value=con.StartTime Placeholder="Start" FloatLabelType="FloatLabelType.Always"></SfDatePicker>

                                </td>

                                <td colspan="4">

                                    <SfDatePicker ID="@nameof(ItemModel.EndTime)" FirstDayOfWeek="1" Min="con.StartTime" Max="MaxDate" CssClass="e-field" TValue="DateTime" @bind-Value=con.EndTime Placeholder="End" FloatLabelType="FloatLabelType.Always"></SfDatePicker>

                                </td>

                            </tr>

                        }

                        else

                        {

                            <tr>

                                <td colspan="4">

                                    <SfDateTimePicker ID="@nameof(ItemModel.StartTime)" FirstDayOfWeek="1" Min="MinDate" Max="MaxDate" CssClass="e-field" TValue="DateTime" @bind-Value=con.StartTime Placeholder="Start" FloatLabelType="FloatLabelType.Always"></SfDateTimePicker>

                                </td>

                                <td colspan="4">

                                    <SfDateTimePicker ID="@nameof(ItemModel.EndTime)" FirstDayOfWeek="1" Min="MinDate" Max="MaxDate" CssClass="e-field" TValue="DateTime" @bind-Value=con.EndTime Placeholder="End" FloatLabelType="FloatLabelType.Always"></SfDateTimePicker>

                                </td>

                            </tr>

                        }

                        <tr>

                            <td colspan="4">

                                <SfCheckBox ID="@nameof(ItemModel.IsAllDay)" @bind-Checked="con.IsAllDay" CssClass="e-field" Label="All Day"></SfCheckBox>

                            </td>

                        </tr>

                            <tr>

                                <td colspan="4">

                                    <SfNumericTextBox ID="@nameof(ItemModel.Value)"

                                                      TValue="decimal"

                                                      Format="c2"

                                                      Value=con.Value

                                                      Placeholder="Value"

                                                      FloatLabelType="FloatLabelType.Always"

                                                      CssClass="e-field"></SfNumericTextBox>

                                </td>

                            </tr>

                        <tr>

                            <td colspan="8">

                                <SfTextBox ID="@nameof(ItemModel.Description)" CssClass="e-field e-input" Value="@con.Description" Placeholder="Description" FloatLabelType="FloatLabelType.Always" Multiline="true"></SfTextBox>

                            </td>

                        </tr>

                    </tbody>

                </table>

            }

        </EditorTemplate>

• I have also tried calling this using (context as ItemModel).Property
• I have also tried setting up a function that gets called OnCheckedChanged

I am also trying the get the NumericTextbox (ItemModel.Value) to get saved along with it, however, I get a whenever I try.

My hope was not to need any of the above and to just add ItemModel.Value NumericTextField as a scheduler resource to the existing template

Many Thanks,
Max.

[Nevitha Ravi]

Hi Max, 

Thanks for sharing the details. 

We have checked the shared code snippet and modify the following changes to acieve your requirement. 

• Bind checkbox's ValueChange event to track the all day value dynamically.
• By default scheduler will handle only few components like text box, dropdown, autocomplete, multiselect, we need to manually update the field value for other components like NumericTextBox within OnPopupClose event.

…….               

      <tr> 

                        <td class="e-textlabel">OwnerId</td> 

                        <td colspan="4"> 

                            <SfNumericTextBox @ref="NumericTBRef" Format="#.##" TValue="int" Value=@((context as AppointmentData).OwnerId) Max=3 Min=1></SfNumericTextBox> 

                        </td> 

                    </tr> 

@if (((context as AppointmentData).IsAllDay) || IsAllDayValue) 

                    { 

                        <tr> 

                            <td class="e-textlabel">From</td> 

                            <td colspan="4"> 

                                <SfDatePicker ID="StartTime" HtmlAttributes="@StartName" FirstDayOfWeek="1" CssClass="e-field" TValue="DateTime" @bind-Value=@((context as AppointmentData).StartTime) Placeholder="Start" FloatLabelType="FloatLabelType.Always"></SfDatePicker> 

                            </td> 

                        </tr> 

                        <tr> 

                            <td class="e-textlabel">To</td> 

                            <td colspan="4"> 

                                <SfDatePicker ID="EndTime)" HtmlAttributes="@EndName" FirstDayOfWeek="1" CssClass="e-field" TValue="DateTime" @bind-Value=@((context as AppointmentData).EndTime) Placeholder="End" FloatLabelType="FloatLabelType.Always"></SfDatePicker> 

                            </td> 

                        </tr> 

                    } 

                    else 

                    { 

                        <tr> 

                            <td class="e-textlabel">From</td> 

                            <td colspan="4"> 

                                <SfDateTimePicker ID="StartTime" HtmlAttributes="@StartName" CssClass="e-field" Value="@((context as AppointmentData).StartTime.ToUniversalTime())"></SfDateTimePicker> 

                            </td> 

                        </tr> 

                        <tr> 

                            <td class="e-textlabel">To</td> 

                            <td colspan="4"> 

                                <SfDateTimePicker ID="EndTime" HtmlAttributes="@EndName" CssClass="e-field" Value="@((context as AppointmentData).EndTime.ToUniversalTime())"></SfDateTimePicker> 

                            </td> 

                        </tr> 

                    } 

                    <tr> 

                        <td class="e-textlabel">All day</td> 

                        <td colspan="4"> 

                            <SfCheckBox ID="IsAllDay" Checked="@((context as AppointmentData).IsAllDay)" CssClass="e-field" Label="All Day" ValueChange="OnAllDayChange"></SfCheckBox> 

                        </td> 

                    </tr> 

…… 

 

  private bool IsAllDayValue = false; 

    public void PopupClose(PopupCloseEventArgs<AppointmentData> args) 

    { 

        if (args.Data != null && args.Type == PopupType.Editor) 

        { 

            args.Data.OwnerId = NumericTBRef.Value; 

        } 

    } 

    private void OnAllDayChange(Syncfusion.Blazor.Buttons.ChangeEventArgs args) 

    { 

        IsAllDayValue = args.Checked; 

    } 

Please find the sample from the following link. 

https://www.syncfusion.com/downloads/support/forum/154349/ze/SchedulerEditorTemplate1406340494 

Note: Currently we are facing issue while editing the appointments when OnPopupClose event is used. We are validating the issue at our end, and will update you further details on May 21, 2020. We would appreciate your patience until then. 

Regards, 

Nevitha 

[Max]

Hi,

After implementing the solution provided the only error I could see (although tests have only been brief) was that the OnAllDayChange would only work when you are editing an existing item and not a new one?

Kind Regards,

Max

[Alagumeena Kalaiselvan]

Hi Max, 

We have resolved the issue while editing the appointments when OnPopupClose event is used and modified the already shared sample for your reference which can be get by the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SchedulerEditorTemplate-2039478410  

Note: OnAlldayChange work for all items not only for editing and existing items. 

Kindly try with above sample and let us know, If you need further assistance. 

Regards 

Alagumeena.K