Call 'render' method from Vue

[awatertreviParticipant]

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.

[HristoParticipant]

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

[awatertreviParticipant]

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

[HristoParticipant]

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

[awatertreviParticipant]

Hi Hristo,

Many thanks for your reply, this works :)!

Yours faithfully,

Trevi Awater

[Author]

Posts