Multiple Scheduler on same page on button click

[Siddhartha]

Hi, 

i have created scheduler, which initialise and adding data source on button click.

so first time it is working properly, but second time when i click the same button it again create the new scheduler with same data source.

on page i can see the two scheduler with one with out data and other with data.

attaching the screenshot for the same.

here is button click code:

$.ajaxSetup({ cache: true});
$.getScript('js/jquery.min.js', function(data, textStatus, jqxhr) {
  $.getScript('js/kendo.all.min.js', function(data, textStatus, jqxhr) {
    $.getScript('js/kendo.timezones.min.js', function(data, textStatus, jqxhr) {
      $(document).ready(
        function () {
          $.ajax( {
            url: "http://"+host+"/MDMToolkit//api/MESLookup?ObjectName=MDM_Sched_Get_ScheduledJob&Command=GetByKey&filterParams="+
            JSON.stringify(ParamsArray),
            contentType: "application/jsonp; charset=utf-8",
            async:false,
            dataType: "json",
            success: function (records)
            {
              POdata = records;
            },
            error: function (err)
            {
              console.log('err:'+err.responseText);
            }
          });


          $('#schedulerS1').kendoScheduler({
            views: [
              "timeline"
            ],
            toolbar: ["pdf"],
            messages: {
              pdf: "PDF Export"
            },sync: function() {
              this.read();
            }, 
            resources: [
              {
                field: "oper_id",
                name: "Jobs",
                title: "Jobs",
                dataSource: []
              }
            ],
            majorTick: 120,
            minorTickCount: 1,
            columnWidth: 50,
            timezone:"Europe/London",
            group: {
              resources: ["Jobs"],
              orientation: "vertical"
            },
            save: appointment_save,

            editable: {

              create: false,
            },
            resizeEnd: function(e) {
              isResize = 1;
              startdate = new Date(e.event.start);
              enddate = new Date(e.event.end);
              console.log("startdate : "+startdate);
              console.log("enddate "+enddate);
            },

            footer: false,

            date: new Date(date),
            startTime: new Date(date)

          });

          var scheduler = $("#schedulerS1").data("kendoScheduler");
         
          var dataSource = new kendo.data.SchedulerDataSource({
            data: //Data Source
          });
          scheduler.setDataSource(dataSource);
 scheduler.resources[0].dataSource.add(//DATA)
      scheduler.view(scheduler.view().name);

          function dataSource_sync(e)
          {
            console.log("sync complete");

          }

          function appointment_save(e) (
          }
        });
    });
  });
});

 

[Veselin Tsvetanov]

Hello Siddhartha,

As far as I can understand the discussed scenario, on each button click you are initializing a new Scheduler from the same DOM element (​#schedulerS1). If this is the case, the reason for the observed issue is the fact, that you are actually initializing a second Scheduler on top of the already initialized one.

To avoid that, I would recommend you to first destroy the widget and then remove any elements, that have been generated and placed within the ​#schedulerS1 div. Then you will be able to safely initialize a new Scheduler from the same DOM element.

Regards,
Veselin Tsvetanov
Telerik by Progress