or
<div class="form-group" ng-class="{'has-error' : editForm.Source.$error.required}"> <label for="Source" class="control-label required">Source</label> <input type="text" id="Source" name="Source" ng-model="vm.data.record.source" class="form-control input" required /></div><div class="form-group"> <label for="Author" class="control-label">Author</label> <input type="text" id="Author" name="Author" ng-model="vm.data.record.author" class="form-control input" /></div><div class="form-group" ng-class="{'has-error' : editForm.PressCuttingDate.$error.required}"> <label for="PressCuttingDate" class="control-label required">Date</label> <input type="date" kendo-date-picker id="PressCuttingDate" name="PressCuttingDate" k-ng-model="vm.data.record.pressCuttingDate" k-format="'dd/MM/yyyy'" style="width: 100%" required /></div><div class="form-group" ng-class="{'has-error' : editForm.Source.$error.required}"> <label for="Source" class="control-label required">Source</label> <input type="text" id="Source" name="Source" ng-model="vm.data.record.source" class="form-control input" required /></div><div class="form-group"> <label for="Author" class="control-label">Author</label> <input type="text" id="Author" name="Author" ng-model="vm.data.record.author" class="form-control input" /></div><form name="editForm" novalidate kendo-validator="vm.formValidation"><div class="form-group" ng-class="{'has-error' : vm.formValidation.validateInput($('input[name=PressCuttingDate]')) }"> <label for="PressCuttingDate" class="control-label required">Date</label> <input type="date" kendo-date-picker id="PressCuttingDate" name="PressCuttingDate" k-ng-model="vm.data.record.pressCuttingDate" k-format="'dd/MM/yyyy'" style="width: 100%" required /></div><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %><!DOCTYPE html ><html><head runat="server"> <title></title> <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /> <style> .appboundary { padding: 10px; width: 100%-40px; height: 100%; background-color: #fff; margin: 20px; -moz-box-shadow: 0 0 0 4px #FFF, inset 1px 0px 10px #C3C4C7, 0px 1px 6px 6px rgba(10,0,0,.5); -webkit-box-shadow: 0 0 0 4px #FFF, inset 1px 0px 10px #C3C4C7, 0px 1px 6px 6px rgba(10,0,0,.5); box-shadow: 0 0 0 4px #FFF, inset 1px 0px 10px #C3C4C7, 0px 1px 6px 6px rgba(10,0,0,.5); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script> <script> function createChart() { $("#donutholder").kendoChart({ title: { visible: false }, legend: { visible: false }, chartArea: { background: "", height: 180, width: 180 }, seriesDefaults: { type: "donut", startAngle: 90, holeSize: 60, size: 20, overlay: { gradient: "sharpBevel" } }, series: [ { data: [ { category: "Promoted", value: 2, color: "#931d2f" }, { category: "Failed Attempts", value: 1, color: "#e4a612" } ], labels: { visible: false, background: "transparent", position: "outsideEnd", template: "#= category #: #= value#%" } } ], tooltip: { visible: true, template: "#= category #: #= value#" } }); } $(document).ready(function () { setTimeout(function () { createChart(); }, 400); }); </script> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <div> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" /> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"> <telerik:RadDockLayout runat="server" ID="RadDockLayout1"> <telerik:RadDockZone ID="RadDockZone1" runat="server" CssClass="appboundary" FitDocks="True" BorderStyle="None" Style="max-width: 1200px"> <telerik:RadDock runat="server" ID="RadDock1" DefaultCommands="ExpandCollapse" DockMode="Docked" EnableDrag="False" EnableAnimation="True"> <ContentTemplate> <div style="float: right" id="donutholder"> </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </telerik:RadAjaxPanel> </div> </form></body></html>filterable: {extra: false,cell: {template: function (input) {input.kendoDropDownList({...,filterMenuInit: function (e) { if (e.field === "DateRequested") { var beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList"); beginOperator.value("gte"); beginOperator.trigger("change"); var endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList"); endOperator.value("lte"); endOperator.trigger("change"); } },...{ text: "Highlight Error", value: ".hlError" }<p>Some text</p><p><span>Some text</span></p>
<p class="hlError">Some text</p>