jQuery UI Widgets Forums Scheduler Call 'render' method from Vue

This topic contains 4 replies, has 2 voices, and was last updated by  awatertrevi 3 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Call 'render' method from Vue #111718

    awatertrevi
    Participant

    I am developing a Vue.js application using the scheduler control.

    I dynamically update the localdata from my data adapter like this;

    this.source.localdata = this.appointments;
    this.dataAdapter.dataBind();

    It doesn’t refresh in the view until I change a property (it seriously can be any property; showLegend, view, etc).

    I found this example (which does exactly) what I want, but it’s in vanilla JavaScript: https://jseditor.io/?key=jqxscheduler-add-appointments-with-the-new-room

    I think I need a way to call the .render function but this.$refs.scheduler.render(); returns undefined.

    Call 'render' method from Vue #111735

    Hristo
    Participant

    Hello awatertrevi,

    You could try to set the source property again.
    Just generate the new DataAdapter and set it to the source property.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Call 'render' method from Vue #111741

    awatertrevi
    Participant

    Hi Hristo,

    Thank you for your reply.

    Unfortunately, not a single appointment is shown when I generate a new DataAdapter.
    Could you please check this?

    Yours faithfully,

    Trevi

    Call 'render' method from Vue #111744

    Hristo
    Participant

    Hello Trevi,

    One of the options that you could use is to destroy the jqxScheduler and create it again.
    Another one is to remove current appointments and add the new one with the methods.
    Also, you could update the jqxScheduler with the new DataAdapter with the setOptions method.
    Please, take a look at this example (“App.vue” file):

    <template>
      <div>
        <div style="margin: 20px;">
          <JqxButton @click="clickUpdate()" :width="80">Update</JqxButton>
        </div>
        <div>
          <JqxScheduler ref="myScheduler"
              :width="width" :height="500" :source="dataAdapter" :date="date" :showLegend="true" :view="'monthView'"
              :appointmentDataFields="appointmentDataFields" :resources="resources" :views="views"
          />
        </div>
      </div>
    </template>
    
    <script>
        import JqxScheduler from "jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue";
        import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
    
        export default {
            components: {
                JqxScheduler,
                JqxButton
            },
            data: function () {
                return {
                    width: "600",
                    date: new jqx.date(2016, 11, 23),
                    appointmentDataFields: 
                    {
                        from: "start",
                        to: "end",
                        id: "id",
                        description: "description",
                        location: "location",
                        subject: "subject",
                        resourceId: "calendar"
                    },
                    resources:
                    {
                        colorScheme: "scheme05",
                        dataField: "calendar",
                        source: new jqx.dataAdapter({
                             dataType: "array",
                             dataFields: [
                               { name: "id", type: "string" },
                               { name: "description", type: "string" },
                               { name: "location", type: "string" },
                               { name: "subject", type: "string" },
                               { name: "calendar", type: "string" },
                               { name: "start", type: "date" },
                               { name: "end", type: "date" }
                             ],
                             id: "id",
                             localData: [
                                 { calendar: "Room 1" },
                                 { calendar: "Room 2" },
                                 { calendar: "Room 3" },
                                 { calendar: "Room 4" }
                             ]
                         })
                    },
                    views:
                    [
                        "dayView",
                        "weekView",
                        "monthView"
                    ],
                    isUpdated: false
                }
            },
            beforeCreate: function () {
                const generateAppointments =  function () {
                    const appointments = new Array();
                    const appointment1 = {
                        id: "id1",
                        description: "George brings projector for presentations.",
                        location: "",
                        subject: "Quarterly Project Review Meeting",
                        calendar: "Room 1",
                        start: new Date(2016, 10, 23, 9, 0, 0),
                        end: new Date(2016, 10, 23, 16, 0, 0)
                    };
                    const appointment2 = {
                        id: "id2",
                        description: "",
                        location: "",
                        subject: "IT Group Mtg.",
                        calendar: "Room 2",
                        start: new Date(2016, 10, 24, 10, 0, 0),
                        end: new Date(2016, 10, 24, 15, 0, 0)
                    };
    
                    appointments.push(appointment1);
                    appointments.push(appointment2);
    
                    return appointments;
                }
    
                this.source =
                    {
                        dataType: "array",
                        dataFields: [
                            { name: "id", type: "string" },
                            { name: "description", type: "string" },
                            { name: "location", type: "string" },
                            { name: "subject", type: "string" },
                            { name: "calendar", type: "string" },
                            { name: "start", type: "date" },
                            { name: "end", type: "date" }
                        ],
                        id: "id",
                        localData: generateAppointments()
                    };
    
                this.dataAdapter = new jqx.dataAdapter(this.source);
            },
            mounted: function () {
                this.$refs.myScheduler.ensureAppointmentVisible("id1");
            },
            methods: {
                clickUpdate: function () {
                  // Get All Data - previous two appointments and the new two
                  const appointment3 = {
                      id: "id3",
                      description: "",
                      location: "",
                      subject: "Course Social Media",
                      calendar: "Room 3",
                      start: new Date(2016, 10, 27, 11, 0, 0),
                      end: new Date(2016, 10, 27, 13, 0, 0)
                  };
                  const appointment4 = {
                      id: "id4",
                      description: "",
                      location: "",
                      subject: "New Projects Planning",
                      calendar: "Room 4",
                      start: new Date(2016, 10, 23, 16, 0, 0),
                      end: new Date(2016, 10, 23, 18, 0, 0)
                  };
    
                  var newAppointments = this.dataAdapter.records;
                  newAppointments.push(appointment3);
                  newAppointments.push(appointment4);              
                  var newSource =
                    {
                        dataType: "array",
                        dataFields: [
                            { name: "id", type: "string" },
                            { name: "description", type: "string" },
                            { name: "location", type: "string" },
                            { name: "subject", type: "string" },
                            { name: "calendar", type: "string" },
                            { name: "start", type: "date" },
                            { name: "end", type: "date" }
                        ],
                        id: "id",
                        localdata: newAppointments
                    };
                  var newDataAdapter = new jqx.dataAdapter(newSource);
    
                  this.$refs.myScheduler.setOptions({ source: newDataAdapter });              
                }
            }
        }
    </script>
    
    <style src='./assets/styles/jqwidgets/jqx.base.css'></style>

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Call 'render' method from Vue #111766

    awatertrevi
    Participant

    Hi Hristo,

    Many thanks for your reply, this works :)!

    Yours faithfully,

    Trevi Awater

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.