This is a migrated thread and some comments may be shown as answers.

SCHEDULER template When i want to create a new event and click on scheduler , the previous events make hidden or dropped

1 Answer 272 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Gridi
Top achievements
Rank 1
Gridi asked on 16 Jul 2014, 10:07 AM
Hi !  I am learning and  working with Kendo UI Scheduler. In above scheduler i am using template to show in every event (modal popup) an image, start date, end date, and title. When i want to create a new event and click on scheduler , the previous events make hidden or dropped.
How can i fix this error or bug /
p.s: when i remove the image element by template, i can create new events succesfully.
Thanks in advance!
Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title></title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"
    <script>
        
    </script>
  </head>
  <body>
    <div id="example" class="k-content">
      <div id="scheduler">
        <div id="people">
          <input checked type="checkbox" id="alex" value="1">
          <input checked type="checkbox" id="bob" value="2">
          <input type="checkbox" id="charlie" value="3">
        </div>
      </div>
    </div>

    <script id="event-template" type="text/x-kendo-template">
    <div class="movie-template">
<img src="#= image #" style="width:50px; height:50px">
        <p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
        <h3>#: title #</h3>

      </div>
    </script>

    <script>
      $(function() {
        $("#scheduler").kendoScheduler({
          date: new Date("2013/6/13"),
          startTime: new Date("2013/6/13 07:00 AM"),
          height: 600,
          allDaySlot: false,
          views: ["day","week","month","agenda"],
          eventTemplate: $("#event-template").html(),
          dataSource: {
            data: [
              {
                meetingID: 1,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
                title: "Call Charlie about the project",
                start: new Date("2013/6/13 10:30"),
                end: new Date("2013/6/13 11:30"),
                ownerId:2
              },
              {
                meetingID: 2,
image: "http://www.eccourts.org/wp-content/themes/ECCOURTS/template/Delete-icon.png",
                title: "Performance review",
                start: new Date("2013/6/13 9:00"),
                end: new Date("2013/6/13 12:30"),
                ownerId:1

              },
              {
                meetingID: 3,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
                title: "HR Lecture",
                start: new Date("2013/6/13 13:00"),
                end: new Date("2013/6/13 14:30"),
                ownerId:2
              }
            ],
            schema: {
              model: {
                id: "meetingID",
                fields: {
                  meetingID: { type: "number" },
                  title: { defaultValue: "No title", validation: { required: true } },
                  start: { type: "date" },
                  end: { type: "date" },
                  ownerId: { defaultValue: 1 },
                  isAllDay: { type: "boolean" }
                }
              }
            }
          },
          filter: {
            logic: "or",
            filters: [
              { field: "ownerId", operator: "eq", value: 1 },
              { field: "ownerId", operator: "eq", value: 2 }
            ]
          },
          resources: [
            {
              field: "ownerId",
              name: "Owner",
              dataSource: [
                { text: "Alex", value: 1, color: "#f8a398" },
                { text: "Bob", value: 2, color: "#51a0ed" },
                { text: "Charlie", value: 3, color: "#56ca85" }
              ]
            }
          ]
        });

        $("#people :checkbox").change(function(e) {
          var checked = $.map($("#people :checked"), function(checkbox) {
            return parseInt($(checkbox).val());
          });

          var scheduler = $("#scheduler").data("kendoScheduler");

          scheduler.dataSource.filter({
            operator: function(task) {
              return $.inArray(task.ownerId, checked) >= 0;
            }
          });
        });
      });

    </script>

    <style scoped>
      .invalid-slot {
        background: red !important;
        cursor: no-drop;
      }
      .movie-template img {
        float: left;
        margin: 0 8px;
      }
      .movie-template p {
        margin: 5px 0 0;
      }
      .movie-template h3 {
        padding: 0 8px 5px;
        font-size: 12px;
      }
      .movie-template a {
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
      }
      .k-state-hover .movie-template a,
      .movie-template a:hover {
        color: #000000;
      }
      .k-nav-current > .k-link span + span {
        max-width: 200px;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: top;
      }

      #team-schedule {
        background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
        height: 115px;
        position: relative;
      }

    </style>
  </body>
</html>

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 17 Jul 2014, 01:12 PM
Hi gridi,

Looking at the code you have provided, I suspect that the issue you have described is caused by a JavaScript error when executing the template for the new item. As there is no default value set for the image field of the event, such field is not created when constructing the new event instance. Therefore, accessing it within the template will yield an error. Defining the field in question in the model field definition should resolve the issue you are facing.

schema: {
  model: {
    id: "meetingID",
    fields: {
      /*the rest of the field definition*/
      image: { defaultValue: "" } // this could be a common default image instead
    }
  }
}


Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Gridi
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or