Toolbar onclick ken

by manoj

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="gridEmailAddress">
</div>


<p id="windowSMS">

<label style="margin-left: 20px">Phone Number:</label><input id="windowCellNumber" required placeholder="3135555555" style="float: right; margin-left: 20px; margin-right: 20px"/><br /><br />
<label style="margin-left: 20px">Carrier:</label><input id="windowDropdownCarriers" style="float: right; margin-right: 20px"/><br /><br /><br />

<button id="windowSMScancel" style="float: right; margin-right: 20px">Cancel</button>
<button id="windowSMSadd" style="float: right; margin-right: 5px">Add</button>


</p>

CSS

.tzCheckBox{
    border: 2px solid;
    color: Green;
}


.tzCheckBox.checked{
    color: Red;
}

JavaScript

var initStatusTypes = [{"StatusType":"Scheduled Downtime","Flag":false},{"StatusType":"Outage","Flag":false},{"StatusType":"Good to know","Flag":false},{"StatusType":"By the way","Flag":false}];
var EmailData = kendo.data.Model.define({
        id: "Id",
        fields: {
            Id: { editable: false, nullable: true },
            Address: { validation: { required: true }, type: "string" },
            Name: { validation: { required: true }, type: "string" },
            StatusTypes: { editable: false }
        }
    });

$(document).ready(function () {
    

    var mydatasource = new kendo.data.DataSource({
        data: [{"Id":11,"Address":"[email protected]","Name":"Fancy work","StatusTypes":[{"StatusType":"Scheduled Downtime","Flag":true},{"StatusType":"Outage","Flag":false},{"StatusType":"Good to know","Flag":false},{"StatusType":"By the way","Flag":false}]},{"Id":12,"Address":"[email protected]","Name":"Text","StatusTypes":[{"StatusType":"Scheduled Downtime","Flag":false},{"StatusType":"Outage","Flag":false},{"StatusType":"Good to know","Flag":true},{"StatusType":"By the way","Flag":false}]},{"Id":15,"Address":"[email protected]","Name":"Short work","StatusTypes":[{"StatusType":"Scheduled Downtime","Flag":true},{"StatusType":"Outage","Flag":false},{"StatusType":"Good to know","Flag":false},{"StatusType":"By the way","Flag":false}]}],
        schema: {
            model: EmailData
        }
    });

        var columnTemplate = kendo.template("#  for (var i = 0; i < StatusTypes.length; i++) { #<span  onclick=$('\\#gridEmailAddress').data('kendoGrid').dataSource.get('#=EmailData.id(data)#').set('StatusTypes[#=i#].Flag',!$('\\#gridEmailAddress').data('kendoGrid').dataSource.get('#=EmailData.id(data)#').get('StatusTypes')[#=i#].Flag);$(this).toggleClass('checked');  class='tzCheckBox checkbox_#=EmailData.id(data)#_#=i#  #=StatusTypes[i].Flag?'checked':''#'><span  class='tzCBContent'>#=StatusTypes[i].StatusType#</span><span  class='tzCBPart'></span></span> # } #");


   ...