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

2 posts, 0 answers
  1. Gridi
    Gridi avatar
    2 posts
    Member since:
    Jun 2014

    Posted 16 Jul 2014 Link to this post

    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>
  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 17 Jul 2014 Link to this post

    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!
     
Back to Top