Cacher is the code snippet organizer for pro developers

==============================
==============================
BUTTONS
==============================
==============================

  ------------------------------
  Enable / Disable
  ------------------------------
  var submitButton = $('#submitButton').kendoButton({
    enable: false
  }).data('kendoButton');

  submitButton.enable(true);


==============================
==============================
STRING FORMATTING
==============================
==============================

  kendo.toString(RunDateTime, 'MM/dd/yyyy');


==============================
==============================
CUSTOM TEMPLATING
==============================
==============================

  <script type="text/x-kendo-template" id="detail-template">
    <div class="tabstrip">
      <ul>
        <li class="k-state-active">
          Users
        </li>
        <li>
          Test Details
        </li>
      </ul>
      <div>
        <div class="users"></div>
      </div>
      <div>
        <div class='test-details'>
          <ul>
            <li><label>Date:</label>#= kendo.toString(RunDateTime, 'MM/dd/yyyy') #</li>
            <li><label>Name:</label>#= Name #</li>
            <li><label>Description:</label>#= Description #</li>
            <li><label>Hours:</label>#= Hours #</li>
            <li><label>Minutes:</label>#= Minutes #</li>
            <li><label>Seconds:</label>#= Seconds #</li>
          </ul>
        </div>
      </div>
    </div>
  </script>


==============================
==============================
GRID
==============================
==============================

	==============================
	GRID - General
	==============================

		------------------------------
		refer to grid
		------------------------------
		var grid = $('#grid').data('kendoGrid'); // refer from anywhere

		function xxx(e) {
			var grid = $(e.sender.wrapper).data('kendoGrid'); // refer when called from the grid like "detailInit: xxx"
			// --- or ---
			var grid = e.sender; // refer when called from the grid like "detailInit: xxx"
		}

		------------------------------
		reload/refresh the grid
		------------------------------
		//*** used on a successful callback from a create or an update function.
		grid = $('#grid').data('kendoGrid');
		grid.dataSource.read();
		grid.refresh();


	==============================
	GRID - Selecting Rows
	==============================

		------------------------------
		get value from a single row
		------------------------------
		var grid = $('#grid').kendoGrid({
			selectable: 'row',
			change: function () {
        		var selectedRow = this.select();
	        	var dataItem = this.dataItem(selectedRow);
	        	console.log(dataItem);
	        	console.log(dataItem.Email);
      		}
		});

	==============================
	GRID - DetailRow / MasterRow
	==============================

		------------------------------
		collapse master row
		------------------------------
		// collapse sample
		var EXPANDED_ROW;
		function masterGridInit() {
			var grid = $('#grid').kendoGrid({
				detailInit: xxx
			});
		}
		function xxx(e) {
			//*** Show only one detail row at a time
			var grid = e.sender;
			// --- or --- var grid = $(e.sender.wrapper).data('kendoGrid');
			if (EXPANDED_ROW != null && EXPANDED_ROW.index() != e.masterRow.index()) {
	        	grid.collapseRow(EXPANDED_ROW);
		    }
	    	EXPANDED_ROW = e.masterRow;
		}

		------------------------------
		expand detail row
		------------------------------
		var grid = $('#grid').kendoGrid({
			dataBound: function () {
        		//*** expand the first detail row on databound.
    			this.expandRow(this.tbody.find("tr.k-master-row").first());
	    	}
		});

	==============================
	GRID - Columns
	==============================

		------------------------------
		custom columns
		------------------------------
		columns: [
		    { field: "Value", width: 20, title: "Value", template: '<div style="text-align:right;">#= kendo.toString(Value, "n2") #</div>'}
		]
		columns: [
		    { field: "Value", width: 20, title: "Value", format:"n2", attributes:{style:"text-align:right;"}}
		]
		columns: [
		    { 
		        field: "Value", 
		        width: 20, 
		        title: "Value", 
		        format: "n2", 
		        attributes: { class:"numbers" },
		        editor: function(container, options) {
		          $('<input type="text" ' +
		            'name="' + options.field + '" ' +
		            'data-type="number" ' +
		            'data-bind="value:' + options.field + '" ' +
		            'data-role="numerictextbox" ' +
		            'class="k-input numbers"/>').appendTo(container);
		        }
	      	}
		]
		//*** css
		.numbers {
			text-align: right;
		}