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

Angular - Use group

Thread ID:

Created:

Updated:

Platform:

Replies:

119220 May 24,2015 07:13 PM UTC Jun 12,2015 01:14 PM UTC JavaScript 7
loading
Tags: ejSchedule
sergeant
Asked On May 24, 2015 07:13 PM UTC

Hello,
I would like to use group with angular for ejshedule component.
I don't find the right syntax.
e-group="{
                    resources: ['Owners']
                }"

Can anyone help me?

Thanks in advance.

François


Velmurugan S [Syncfusion]
Replied On May 25, 2015 11:19 AM UTC

Hi Sergeant,
Thanks for using Syncfusion products.

You can use the group and resources with angular for schedule component by using the following code snippets.

<code>

<ej-Schedule style="float: left" id="Schedule1" e-appointmentSettings-datasource="appointments" e-appointmentSettings-id="Id" e-appointmentSettings-subject="Subject" e-appointmentSettings-startTime="StartTime" e-appointmentSettings-endTime="EndTime" e-appointmentSettings-description="Description" e-appointmentSettings-allDay="AllDay" e-appointmentSettings-recurrence="Recurrence" e-appointmentSettings-recurrenceRule="RecurrenceRule" e-appointmentSettings-resourceFields ="roomId,ownerId"

e-width="100%" e-height="525px" e-currentview="drpvalue" e-currentdate="setDate" e-group="group" e-resources="resData">

</ej-Schedule>


<script>



var resourceData = [

{

field: "roomId",

title: "Room",

name: "Rooms", allowMultiple: false,

resourceSettings: { dataSource: [

{ text: "ROOM1", id: 1, groupId: 1, color: "#cb6bb2" },

{ text: "ROOM2", id: 2, groupId: 1, color: "#56ca85" }],

text: "text", id: "id", groupId: "groupId",color:"color"

}

},

{

field: "ownerId",

title: "Owner",

name: "Owners", allowMultiple: true,

resourceSettings: { dataSource: [

{ text: "Nancy", id: 1, groupId: 1, color: "#ffaa00" },

{ text: "Steven", id: 3, groupId: 2, color: "#f8a398" },

{ text: "Michael", id: 5, groupId: 1, color: "#7499e1" }

],

text: "text", id: "id", groupId: "groupId", color: "color"

}

}];


angular.module('syncApp', ['ejangular'])

.controller('ScheduleCtrl', function ($scope) {

$scope.appointments = appList;

$scope.group = { resources: ["Rooms", "Owners"] };

$scope.resData = resourceData;

$scope.setDate = new Date(2014, 4, 5);

$scope.drpvalue = "week"

});
</script>


</code>

We have prepared the sample with the above code snippets, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/119220/Angular_Multiple_Resource199717385.zip

Please let us know if it helps and if you need any further assistance on this.
Regards,
Velmurugan


sergeant
Replied On May 25, 2015 06:28 PM UTC

Thanks you !
Your example was perfect.
I solved the problem in 10 secondes.

Another question and the last one, I hope!
Is it possible to use CRUD with url binding with Angular?
In the web documentation, i read it's possible with jquery but I can't find any example with Angular.
I just would like some information about this question.

Thanks in advance for your help.



Velmurugan S [Syncfusion]
Replied On May 26, 2015 05:04 PM UTC

Hi Sergeant,
Thanks for your update.
We have prepared the sample that tries to meet your requirement “CRUD with url binding with Angular”, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/119220/ScheduleAngular-1636944454.zip

Please let us know if it helps and if you need any further assistance on this.

Note: We request you to run the above sample from the “Angular_MultipleResource.html” page to take the effect of the CRUD operation.

Regards,
Velmurugan

sergeant
Replied On June 5, 2015 11:04 AM UTC

Thanks, the problem has been solved with your help.

I've another question: how can I display "Owner" field in my customized appointment window?

I can't find any information in documentation, forum or knowledge base...
I try to search directly in ej.schedule.js, but it's very tricky (for me!).

Thanks in advance.


Velmurugan S [Syncfusion]
Replied On June 8, 2015 12:14 PM UTC

Hi Sergeant,
Thanks for your update.

You can display the Owner field in the customized appointment window. Please find the following steps to include and display the Owner field in the appointment window.


Step 1: Create the custom appointment window sample. Refer the following link to create the sample:

Online Sample link:


http://js.syncfusion.com/demos/web/#!/azure/schedule/CustomWindow

Document Link: [ under the section Using Customized Appointment window]

http://help.syncfusion.com/ug/js/index.html#!Documents/databinding17.htm

Step 2: Add the two dropdown (one for the owner field and another one for the Room field) in the CustomAppointmentWindow design. Please refer the following code snippet to add the Owner and Room filed in the custom window:

<code>

<div id="customWindow" style="display: none">

        <form id="custom">

            <table width="100%" cellpadding="5">

                <tbody>

                    ---------------------------------------

                    ---------------------------------------


                    <tr>

                        <td>

                            EndTime:

                        </td>

                        <td>

                            <input id="EndTime" type="text" value="" name="EndTime" />

                        </td>

                    </tr>


                    <tr>

                        <td>

                            Room:

                        </td>

                        <td>                          

                            <input type="text" id="Room" />

                        </td>

                       

                    </tr>


                    <tr>

                        <td>

                            Owner:

                        </td>

                        <td colspan="2">

                            <input type="text" id="Owner" />                           

                        </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>


</code>


Step 3: Add the following code snippets changes in the “Script section”:

<code>
                   // DataSource values for the "Room and Owner field"

var Rooms=[{ text: "ROOM1", id: 1, groupId: 1, color: "#cb6bb2" },

                   { text: "ROOM2", id: 2, groupId: 1, color: "#56ca85" }];

       

        var Owners = [{ text: "Nancy", id: 1, groupId: 1, color: "#ffaa00" },

                      { text: "Steven", id: 3, groupId: 2, color: "#f8a398" },

                      { text: "Michael", id: 5, groupId: 1, color: "#7499e1" }];


        $(function () {

            $("#customWindow").ejDialog({

                width: 600,

                height: "auto",

                position: { X: 400, Y: 200 },

                showOnInit: false,

                enableModal: true,

                title: "Create Appointment",

                enableResize: false,

                allowKeyboardNavigation: false,

                close: "clearFields"

            });

            $("#btncancel").ejButton({ width: '85px' });

            $("#btnsubmit").ejButton({ width: '85px' });

            $("#Room").ejDropDownList({

                dataSource: Rooms,

                fields:{text: "text", id: "id", value: "text"}

            });

            $("#Owner").ejDropDownList({

                dataSource: Owners,

                fields: { text: "text", id: "id", value: "text" }

            });


        });


        function onAppointmentWindowOpen(args) {

            args.cancel = true;

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

            quickobj.close();

            $("#subject").removeClass("validation");

            $("#customdescription").removeClass("validation");

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

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

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

                if ($(args.target.currentTarget).hasClass("e-alldaycells"))

                    $("#allday").prop("checked", true);

            }

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

                var userValue;

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

                $("#subject").val(args.appointment.Subject);

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

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

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

                var roomObject = $("#Room").data("ejDropDownList");

                var roomValue = ej.DataManager(roomObject.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.RoomId))[0]["text"];

                var ownerObject = $("#Owner").data("ejDropDownList");

                var ownerValue = ej.DataManager(ownerObject.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.OwnerId))[0]["text"];             

                $("#Room").ejDropDownList("clearText");

                $("#Owner").ejDropDownList("clearText");

                $("#Room").ejDropDownList({ text:roomValue, value: roomValue });

                $("#Owner").ejDropDownList({ text:ownerValue, value: ownerValue });

                $("#allday").prop("checked", args.appointment.AllDay);

                $("#recurrence").prop("checked", args.appointment.Recurrence);

                if (args.appointment.Recurrence) {

                    $("#rType").val(args.appointment.RecurrenceRule.split(";")[0].split("=")[1].toLowerCase());

                    $("tr.recurrence").css("display", "table-row");

                }

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

            }

            else

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

        }


        function save() {

            if ($("#subject").val().trim() == "") {

                $("#subject").addClass("error");

                return false;

            }           

            ------------------------------------

            ------------------------------------

           else

                obj["RecurrenceRule"] = null;


            var roomobj = $("#Room").data("ejDropDownList");

            var ownerobj = $("#Owner").data("ejDropDownList");

            obj["RoomId"] = roomobj.getSelectedItemsID()[0];

            obj["OwnerId"] = ownerobj.getSelectedItemsID()[0];

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

            var object = $("#Schedule1").data("ejSchedule");

            object.saveAppointment(obj);

            clearFields();

        }


        function clearFields() {

            $("#customId").val("");

            $("#subject").val("");

            $("#customdescription").val("");

            $("#Room").val("");

            $("#Owner").val("");

            $("#allday").prop("checked", false);

            $("#recurrence").prop("checked", false);

            document.getElementById("rType").selectedIndex = "0";

            $("tr.recurrence").css("display", "none");

        }


        -----------------------

        -----------------------

               
</code>

Step 4: Initialize the client side event to open the custom appointment window. Please refer the following code snippet to initialize the client side events in the Angular JS Schedule support.

<code>

                <ej-schedule style="float: left" id="Schedule1" e-appointmentsettings-datasource="appointments" e-appointmentsettings-id="Id" e-appointmentsettings-subject="Subject" e-appointmentsettings-starttime="StartTime"

                             e-appointmentsettings-endtime="EndTime" e-appointmentsettings-description="Description" e-appointmentsettings-allday="AllDay" e-appointmentsettings-recurrence="Recurrence" e-appointmentsettings-recurrencerule="RecurrenceRule" e-appointmentsettings-resourcefields="RoomId,OwnerId"

                             e-width="100%" e-height="525px" e-currentview="drpvalue" e-currentdate="setDate" e-group="group" e-resources="resData" e-appointmentwindowopen="onAppointmentWindowOpen">

                   
                </ej-schedule>
</code>

Step 5: Then run the sample and you can view the “Owner field and Room field” in the customized appointment window. Refer the following screenshot of the above code implementation.


Figure 1: Room field values in the dropdownlist


Figure 2: Owner field values in the dropdownlist



Figure 3: Edit/View the appointment details

Also we have modified the sample with the above code snippet changes, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/119220/ze/ScheduleAngularWithCustomWindow-1575541816

Please let us know if it helps and if you need any further assistance on this.

Regards,
Velmurugan


sergeant
Replied On June 11, 2015 07:24 AM UTC

Thanks for your help.

Another question, where i could find the owner field  (in args variable) on create appointment event (to initialize dropdown Owner)?


Sarath Kumar P K [Syncfusion]
Replied On June 12, 2015 01:14 PM UTC

Hi Sergeant,

Thanks for your update.

We were able to reproduce the problem and have logged defect report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

We have prepared the workaround sample to meet your requirement which can be downloaded from the below location.
http://www.syncfusion.com/downloads/support/forum/119220/ze/ScheduleMultipleResource1755086316

<code>

$(function () {

            $("#Schedule1").ejSchedule({

                width: "100%",

                height: "525px",

               .....

                   recurrenceRule: "RecurrenceRule",

                    resourceFields: "ownerId"


                },

                appointmentWindowOpen:"onAppointmentWindowOpen"

            });
        });

function onAppointmentWindowOpen(args) {

            if (args.originalEventType == "cellDoubleClick") {

                var dateCount = this.model.currentView == "month" ? 7 : this.model.currentView == "day" ? 1 : this._dateRender.length;

                var index = this._cellIndex;

                var resIndex = index / dateCount;

                var resource = this.model.currentView == "month" ? this.res1[parseInt(this._currentColIndex / 7)] : this.res1[parseInt(resIndex)];    //resource variable returns the Owner data

                alert("Current Resource value is=" + resource.text);

            }
        }
</code>

Please let me know if you have any questions.

Regards,
Sarath Kumar P K


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

;