jQuery addClass example

Change class name on click in jQuery

by xawixawxaw

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css">
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
   <div id="grid"></div>

CSS

body{
    font-family: "Nimbus Sans";
    font-size: 14px;
    background: #F1F1F1;
  }
  .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }

JavaScript

$(document).ready(function () {
            var logs = [{
                  Name: "Madel Relado",
                  ScheduleDate: "08/01/2018 - 08/31/2018",
                  DateCreated: "07/31/18",
                  Shift: "6 AM - 3 PM",
                  Lunch: "11 AM - 12 PM",
                  RestDays: "Saturday, Sunday",
                  HolidayShift: "08/21/2018"
                },{
                  Name: "Keiga Ebora",
                  ScheduleDate: "08/16/2018",
                  DateCreated: "07/31/18",
                  Shift: "12 NN - 9 PM",
                  Lunch: "3 PM - 4 PM",
                  RestDays: "",
                  HolidayShift: ""
                },{
                  Name: "Keiga Ebora",
                  ScheduleDate: "08/01/2018 - 08/31/2018",
                  DateCreated: "07/31/18",
                  Shift: "10 AM - 7 PM",
                  Lunch: "2 PM - 3 PM",
                  RestDays: "Saturday, Sunday",
                  HolidayShift: "08/21/2018, 08/22/2018"
                },
                ];
                
                
            $("#grid").kendoGrid({
                dataSource: {
                  data: logs,
                  schema: {
                    model: {
                      fields: {
                        Name: { type: "string" },
                        ScheduleDate: { type: "string" },
                        DateCreated: { type: "string" },
                        Shift: { type: "string" },
                        Lunch: { type: "string" },
                        RestDays: { type: "string" },
                        HolidayShift: { type: "string" },
                      }
                    }
                  },
                  pageSize: 20
                },
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount:...