Multiple Scheduler on same page on button click

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

    Posted 03 Jan Link to this post


    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) {
            function () {
              $.ajax( {
                url: "http://"+host+"/MDMToolkit//api/MESLookup?ObjectName=MDM_Sched_Get_ScheduledJob&Command=GetByKey&filterParams="+
                contentType: "application/jsonp; charset=utf-8",
                dataType: "json",
                success: function (records)
                  POdata = records;
                error: function (err)

                views: [
                toolbar: ["pdf"],
                messages: {
                  pdf: "PDF Export"
                },sync: function() {
                resources: [
                    field: "oper_id",
                    name: "Jobs",
                    title: "Jobs",
                    dataSource: []
                majorTick: 120,
                minorTickCount: 1,
                columnWidth: 50,
                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{
                data: //Data Source

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


              function appointment_save(e) (


  2. Veselin Tsvetanov
    Veselin Tsvetanov avatar
    594 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.

    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