Multiple Scheduler on same page on button click

2 posts, 0 answers
  1. Siddhartha
    Siddhartha avatar
    11 posts
    Member since:
    Oct 2016

    Posted 03 Jan Link to this post

    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) (
              }
            });
        });
      });
    });

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    348 posts

    Posted 04 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top