Using another Control (e.g. autocomplete) in appointment window

[Stefan]

Hi,

I'm wondering what is the correct way to integrate another control in the appointment window, and initialise it's value from an appointment?

What I've tried:

In order to use the tag helpers, I have wrapped the autocomplete block in a named script block, but with type "text/html" to make Razor look at it.

Model.Users is just a list of Users with ID and Name properties. Ideally, I'd like to persist that list later with the appointment object (haven't gotten that far yet)

<Code>

<script type="text/html" id="myAutoComplete">

    <ej-autocomplete id="UserList" width="100%" watermark-text="User hinzufügen" datasource="@Model.Users" multi-select-mode="@MultiSelectModeTypes.VisualMode"

                     filter-type="Contains" highlight-search="true" enable-auto-fill="true" show-rounded-corner="true" show-popup-button="true" allow-sorting="true" sort-order="Ascending"

                     show-empty-result-text="true" empty-result-text="Den kann ich nicht finden, sorry.">

        <e-autocomplete-fields key="Id" text="UserName" />

    </ej-autocomplete>    

</script>

</Code>

I'm initialising the data value onScheduleCreate.

<Code>

function onScheduleCreate(args) {

    this._appointmentSettings["UserList"] = "UserList";

}

</Code>

Here's another side topic; I was unable to add my custom design during onScheduleCreate - is there a reason for that? I've had to move it to onAppointmentWindowOpen

<Code>

function onAppointmentWindowOpen(args) {

                var schObj = this;

                if ($("#UserList").length === 0) // if the ID does not yet exist, add the design

                    $("." + this._id + "parrow").after("<tr class='userlist'><td class='e-leftfields e-textlabel'>Userliste:</td><td colspan='3' class='e-rightfields'>" + $("#myAutoComplete").html() + "</td></tr>");

                if (!ej.isNullOrUndefined(args.appointment)) {

                    schObj._appointmentAddWindow.find("#UserList").val(args.appointment.UserList);

                } else {                   

                    schObj._appointmentAddWindow.find("#UserList").val("");

                }

            }

</Code>

Obviously, the script block #myAutoComplete is only replaced by a normal input field, which is then activated by the EJ script manager later. Looking at the JS it is there, but there must be something wrong with the order of execution because when I open my appointment the field remains just a normal input field; it is not "activated" as an autocomplete field.

Could you please shed some light as to why not? Your help is much appreciated, thank you!

[Nevitha Ravi]

Hi Stefan,   

  

Thank you for contacting Syncfusion Support.   

  

Q: To integrate another control in the appointment window, and initialize it's value from an appointment   

We have prepared a sample for your requirement “populate autocomplete control within appointment window” which can be downloaded from the below location.   

http://www.syncfusion.com/downloads/support/forum/134606/ze/sample1218671210    

  

Please refer the below code used in the above sample.   

@(Html.EJ().Schedule("Schedule1")   

        .Width("100%")   

        .Height("525px")   

        .CurrentDate(new DateTime(2016, 10, 29))   

        .ScheduleClientSideEvents(evt =>   

          evt.AppointmentWindowOpen("onAppointmentWindowOpen"))   

        .AppointmentSettings(fields => fields.Datasource(ViewBag.datasource)   

        .ApplyTimeOffset(false)   

                .Id("Id")   

                    .Subject("Subject")   

                    .StartTime("StartTime")   

                    .EndTime("EndTime")   

                    .AllDay("AllDay")   

                    .Recurrence("Recurrence")   

                    .RecurrenceRule("RecurrenceRule"))   

)   

<script>   

    function onAppointmentWindowOpen(args) {   

        if (this._appointmentAddWindow.find("#EventType").length == 0) {   

            $("<tr><td class='e-leftfields e-textlabel'>Event Type:</td><td class='e-rightfields' colspan='3'><input type='text' id='EventType'/></td></tr>").insertAfter(this._appointmentAddWindow.find("." + this._id +"parrow"));   

            this._appointmentAddWindow.find("#EventType").ejAutocomplete({   

                dataSource: [   

                    { text: "Public Event", value: "Public Event" },   

                    { text: "Holiday", value: "Holiday" },   

                    { text: "Maintenance", value: "Maintenance" },   

                    { text: "Commercial Event", value: "Commercial Event" },   

                    { text: "Family Event", value: "Family Event" }   

                ],   

                showPopupButton: true,   

                height: 30,   

                width: 300,   

                popupHeight: 200,   

                popupWidth: 300,   

            });   

        }   

        if (!ej.isNullOrUndefined(args.appointment) && !ej.isNullOrUndefined(args.appointment.EventType)) {   

            this._appointmentAddWindow.find("#EventType").ejAutocomplete("option", "value", args.appointment.EventType);   //to populate event value from an appointment   

        }   

        else {   

            this._appointmentAddWindow.find("#EventType").ejAutocomplete("option", "value", "");    

        }   

    }   

</script>   

  

Q: unable to add my custom design during onScheduleCreate - is there a reason for that? 

An appointment window dialog will not render initially while Create event fires which is the cause for your issue. Use below code, to add your custom design within create event function.   

function onScheduleCreate(args) {   

        if (ej.isNullOrUndefined(this._appointmentAddWindow))  this._renderAppointmentWindow();//to render appointment window   

        if (this._appointmentAddWindow.find("#EventType").length == 0) {   

            $("<tr><td class='e-leftfields e-textlabel'>Event Type:</td><td class='e-rightfields' colspan='3'><input type='text' id='EventType'/></td></tr>").insertAfter(this._appointmentAddWindow.find("." + this._id + "parrow"));   

            this._appointmentAddWindow.find("#EventType").ejAutocomplete({   

                dataSource: [   

                    { text: "Public Event", value: "Public Event" },   

                    { text: "Holiday", value: "Holiday" },   

                    { text: "Maintenance", value: "Maintenance" },   

                    { text: "Commercial Event", value: "Commercial Event" },   

                    { text: "Family Event", value: "Family Event" }   

                ],   

                showPopupButton: true,   

                height: 30,   

                width: 300,   

                popupHeight: 200,   

                popupWidth: 300,   

            });   

        }   

    }   

  

Also, please refer the below UG link.   

https://help.syncfusion.com/aspnetmvc/schedule/how-to#customize-the-default-appointment-window   

  

Regards,   

Nevitha 

[Stefan]

Dear Nevitha

thank you very much for taking the time to respond. From your reply I realised that I accidently posted into the wrong forum, I was looking to post to the Core Forum. However, the tip to use this._renderAppointmentWindow() did help me in Core as well. Now the field is added before the Script helper section tries to "energise" the field, thank you.

Kind regards

Stefan

[Karthigeyan Krishnamurthi]

Hi Stefan,  

 

We are happy to hear from you. 

 

Regards, 

Karthigeyan