customization of create appointment popup window

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

1 Reply

KK Karthigeyan Krishnamurthi Syncfusion Team 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.


Loader.
Up arrow icon