Need to refresh the scheduler when multi-select is changed

[Naveen Davuluri]

Hi, i have a URL adaptor for the scheduler datasource and i can refresh it fine. I also have a multi-selector on the same page and would like to refresh the scheduler when i select/de-select mult-select component. I tried adding the parameters to the datamanager but doesn't seem it is working.

Attachment: refresh_34e7dfd6.zip

[Ravikumar Venkatesan]

Hi Naveen Davuluri,

Sample: https://stackblitz.com/edit/ej2-js-es5-schedule-with-eventsettings-query?file=index.js

To refresh the Schedule when the multi-select value is changed you have to use the query property of the eventSettings property as highlighted in the code snippet below.

var planItems = [{ Name: 'Drills', Code: 'drills' }, { Name: 'Work Orders', Code: 'wo' }, { Name: 'Permits', Code: 'permits' }, { Name: 'Daily Operations', Code: 'dop' }]

 

var multiSelectComp = new ej.dropdowns.MultiSelect({

    dataSource: planItems,

    fields: { text: 'Name', value: 'Code' },

    placeHolder: 'Search by activity',

    select: multiSelectPlan,

    removed: multiSelectRemovePlans,

    value: ["permits"]

});

 

multiSelectComp.appendTo("#plans");

 

function multiSelectPlan(e) {

    var ele = document.getElementById("plans").ej2_instances[0];

    scheduleObj.eventSettings.query = new ej.data.Query().addParams('transa', ele.value);

}

 

var dataManager = new ej.data.DataManager({

    url: 'https://localhost:7089/Home/LoadPTW',

    crudUrl: 'https://localhost:5021/Home/UpdateData',

    adaptor: new UrlAdaptor,

    crossDomain: true

});

 

var scheduleObj = new ej.schedule.Schedule({

    width: '100%',

    height: '100%',

    views: [

        { displayName: '72 hours', option: 'Day', interval: 3 },

        { displayName: 'Week', option: 'Week' },

        { displayName: 'Gantt', option: 'TimelineDay', interval: 3 }

    ],

    currentView: 'Day',

    eventSettings: {

        query: new ej.data.Query().addParams('test', document.getElementById("plans").ej2_instances[0].value),

        dataSource: dataManager,

        enableTooltip: true

    },

    actionBegin: function (args) {

        if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {

            var data = void 0;

            if (args.requestType === 'eventCreate') {

                data = args.data[0];

            }

            else if (args.requestType === 'eventChange') {

                data = args.data;

            }

            if (!scheduleObj.isSlotAvailable(data)) {

                args.cancel = true;

            }

        }

    },

    eventRendered: function (args) {

        window.applyCategoryColor(args, scheduleObj.currentView);

    }

});

For example, in our shared sample we changed the Schedule data source in the button click handler by changing the value of the eventSettings query property.

[index.js]

var dataManager = new ej.data.DataManager({

    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',

    adaptor: new ej.data.ODataV4Adaptor(),

    crossDomain: true

});

 

let isDefaultQuery = true;

document.getElementById('query-btn').onclick = (args) => {

    if (scheduleObj) {

        if (isDefaultQuery) {

            isDefaultQuery = false;

            scheduleObj.eventSettings.query = new ej.data.Query().take(2);

        } else {

            isDefaultQuery = true;

            scheduleObj.eventSettings.query = new ej.data.Query().take(1);

        }

    }

}

 

var scheduleObj = new ej.schedule.Schedule({

    height: '550px',

    selectedDate: new Date(1996, 6, 9),

    currentView: 'Month',

    eventSettings: {

        query: new ej.data.Query().take(1),

        includeFiltersInQuery: true, dataSource: dataManager, fields: {

            id: 'Id',

            subject: { name: 'ShipName' },

            location: { name: 'ShipCountry' },

            description: { name: 'ShipAddress' },

            startTime: { name: 'OrderDate' },

            endTime: { name: 'RequiredDate' },

            recurrenceRule: { name: 'ShipRegion' }

        }

    },

    readonly: true

});

scheduleObj.appendTo('#Schedule');

API:
https://ej2.syncfusion.com/javascript/documentation/api/schedule/#eventsettings
https://ej2.syncfusion.com/javascript/documentation/api/schedule/eventSettingsModel/#query

UG:
https://ej2.syncfusion.com/javascript/documentation/schedule/data-binding#passing-additional-parameters-to-the-server

Regards,
Ravikumar Venkatesan

[Naveen Davuluri]

Sorry for reopening this ticket. How do i update the value of the query parameter? In the example above, i have "test" as a parameter being passed to query in scheduleobj. In the multiplan select event, how do i update this "test" parameter to send the values to the server? If i do the following, i get an error about parameters being duplicate. If I update the parameter value in multiplan select event, the scheduler won't refresh.

var scheduleObj = new ej.schedule.Schedule({

  width: "100%",

  height: "100%",

  selectedDate: Date.now(),

  showHeaderBar: false,

  views: [

    { displayName: "72 hours", option: "Day", interval: 3 },

    { displayName: "Week", option: "Week", interval: 1 },

    { displayName: "Gantt", option: "TimelineDay", interval: 3 },

  ],

  currentView: "72 hours",

  eventSettings: {

    query: new ej.data.Query()

      .addParams(      "test",  document.getElementById("plans").ej2_instances[0].value),

    dataSource: dataManager,

    enableTooltip: true

  },

  actionBegin: function (args) {

  }

});

function multiSelectPlan(e) {

  var ele = document.getElementById("plans");

  scheduleObj.eventSettings.query = new ej.data.Query()

    .addParams("test", ele.value + "," + e.itemData.Code)

}

[Vijay Ravi]

Hi Naveen Davuluri,
 

To update the query parameter without causing duplicates or requiring a refresh, you can remove the existing parameter before adding the new one.This approach ensures that the "test" parameter is updated without causing duplicates and refreshes the scheduler data to reflect the changes.
 

function multiSelectPlan(e) {

  var ele = document.getElementById("plans").ej2_instances[0];

  var query = scheduleObj.eventSettings.query;

  query.params = query.params.filter(param => param.key !== "test");

  query.addParams("test", ele.value + "," + e.itemData.Code);

  scheduleObj.eventSettings.query = query;

  scheduleObj.refreshEvents();

}

Additionally, if you are still encountering issues in your project, could you please provide the following details? This information will help us better assist you in resolving the problem effectively.
 

• Could you share the issue replicating sample.
• Could you share what issue that you are a facing in your project,
• Could you share the issue video demo.
• Can you confirm issue comes from client side or server side code,

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay