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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

customization of create appointment popup window

Thread ID:

Created:

Updated:

Platform:

Replies:

120565 Sep 25,2015 04:14 PM UTC Sep 28,2015 11:34 AM UTC ASP.NET MVC 1
loading
Tags: Schedule
saravanan
Asked On September 25, 2015 04:14 PM UTC

Hi,

       I am using schedule control with resource view.  I have populated the resource value with table values (sample values Room1, Room2 etc...)
 
      And I customized the appointment popup window(Added new control : Resource type Text Box). on click of cell, I want to populate this Resource Text Box with the resource value( Resource: Room1).
     
      My .cshtm is given below.

    @(Html.EJ().Schedule("Schedule1")
        .Width("100%")
        .Height("525px")
        .TimeZone("UTC -05:00") 
        .ShowCurrentTimeIndicator()
        .ShowQuickWindow(true)
     .Resources(res =>
     {
                    
                    res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(true)
                     .ResourceSettings(flds => flds.Datasource(ViewBag.Owners).Text("text").Id("id").Color("color")).Add();
     })
        .Group(gr =>
          {
             gr.Resources(ViewBag.Resources);

          })  
         .AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Schedule/GetData").CrudURL("/Schedule/CRUD").Adaptor("UrlAdaptor"))
            .Id("Id")
            .Subject("Subject")
            .StartTime("StartTime")
            .StartTimeZone("StartTimeZone")
            .EndTimeZone("EndTimeZone")
            .EndTime("EndTime")
            .Description("Description")
           .ResourceFields("OwnerId")
           
           )
           .ScheduleClientSideEvents(evt => evt.AppointmentWindowOpen("onAppointmentWindowOpen")) 
        )

     and the html is

   <div id="customWindow" style="display: none">
        <form id="custom">
            <table width="100%" cellpadding="5">
                <tbody>
                    <tr style="display: none">
                        <td>Id:
                        </td>
                        <td colspan="2">
                            <input id="customId" type="text" name="Id" />
                        </td>
                    </tr>
                     <tr>
                        <td>Resource:
                        </td>
                        <td colspan="2">
                           <input id="Resource" type="text" name="OwnerId" value =""  style="width: 100%" />
                        </td>
                    </tr>

                    <tr>
                        <td>StartTime:
                        </td>
                        <td>
                            @Html.EJ().DateTimePicker("StartTime").Width("150px")
                        </td>
                    </tr>
                    <tr>
                        <td>EndTime:
                        </td>
                        <td>
                            @Html.EJ().DateTimePicker("EndTime").Width("150px")
                        </td>
                    </tr>

                    <tr>
                        <td>No of user:
                        </td>
                        <td colspan="2">
                            <input id="user" type="text" value="" name="NoOfUser"  style="width: 100%" />
                        </td>
                    </tr>

                    <tr>
                        <td>Contact No:
                        </td>
                        <td colspan="2">
                            <input id="ContactNo" type="text" value="" name="ContactNo"  style="width: 100%" />
                        </td>
                    </tr>

                    <tr>
                        <td>Course Code:
                        </td>
                        <td colspan="2">
                            <input id="CourseCode" type="text" value="" name="CourseCode"  style="width: 100%" />
                        </td>
                    </tr>

                   
                    <tr>
                        <td>Purpose of use:
                        </td>
                        <td colspan="2">
                            <textarea id="customdescription" name="Description" rows="3" cols="50" style="width: 100%; resize: vertical"></textarea>
                        </td>
                    </tr>
 </tbody>
            </table>
        </form>
        <div>
<button type="submit" onclick="cancel()" id="btncancel" style="float:right;margin-right:20px;">Cancel</button>
       <button type="submit" onclick="save()" id="btnsubmit"style="float:right;margin-right:20px;">Submit</button>
        </div>
    </div>

I want this Resource value on opening of the create popup window and i need to save the value to the table as well.

please let me know the solution for this.  i have attached the screen shot.

     

Attachment: customise_appointment_b3a15b2f.rar

Karthigeyan Krishnamurthi [Syncfusion]
Replied On September 28, 2015 11:34 AM UTC

Hi Saravanan,

Thanks for contacting Syncfusion Support.
We have prepared the sample in-order to meet your requirement with “populating the resource value on the create popup window on cell click”. The sample can be downloaded from the following location:
http://www.syncfusion.com/downloads/support/forum/120565/ze/Resource_grouping1787235130

Please find the following code example that we have used in the above sample to meet your requirement.

<code>

function onAppointmentWindowOpen(args) {

            args.cancel = true;

            var quickobj = $("#Schedule1AppointmentQuickWindow").data("ejDialog");

            quickobj.close();

            $("#StartTime").ejDateTimePicker({ value: args.startTime });

            $("#EndTime").ejDateTimePicker({ value: args.endTime });

            if (ej.isNullOrUndefined(args.appointment))

            $("#resource").val(args.resources.text); // Here the resource value are displayed while double clicking the cell

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

                $("#customId").val(args.appointment.Id);

                var roomValue = ej.DataManager(this.res1).executeLocal(new ej.Query().where("id", "equal", args.appointment.OwnerId))[0]["text"]; // This query is used to take the resource name based on the resource id in the appointment

                $("#resource").val(roomValue); // Here the resource value are displayed while double clicking the appointment

                $("#customdescription").val(args.appointment.Description);

                $("#StartTime").ejDateTimePicker({ value: new Date(args.appointment.StartTime) });

                $("#EndTime").ejDateTimePicker({ value: new Date(args.appointment.EndTime) });

                $("#customWindow").ejDialog("open");

            }

            else

                $("#customWindow").ejDialog("open");
        }

<code>


Regards,
Karthigeyan.


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.

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

;