or
<div id="layerTable" class="Part" data-role="grid" data-column-menu="true" data-filterable="true" data-sortable="true" data-scrollable="false" data-resizable="true" data-reorderable="true" data-groupable="true" data-editable="{confirmation: false}" data-bind="source: LayerTable" data-toolbar='["save","cancel"]' data-columns='[ "Class", "Type", "FileCount", {field: "Size", format: "{0:n3} MB", }, {field: "Date", format: "{0:F}" }, "Path", {command: "destroy"}, ]'></div><div data-role="modalview" id="MessageBeforeEnteringWebRes" style="padding:0.25em 1em 1em 1em;min-height:5em;max-height:20em;height:auto;"> <div data-role="header" style="border-bottom:1px solid #ccc" class="marginbottom1"><span>@Model.CurrentContext.Club.ClubName</span></div> <div style="overflow:scroll; -webkit-overflow-scrolling:touch; max-height:8em;" class="marginbottom1"> @MvcHtmlString.Create(Model.CurrentContext.Club.MessagesSettings.MessageBeforeEnteringWebRes) </div> @if (Model.CurrentContext.Club.MessagesSettings.AllowUserToDisableMessagesBeforeEnteringWebRes.ToString().ToLower() == "true") { <div id="UserEditDisableMessage" style="padding-left:0.5em;" class="marginbottom1"> <label for="DoNotDisplayMessage"><input type="checkbox" id="DoNotDisplayMessage" style="padding-right: 0.5em"/>Disable messages for future visits.</label> </div> } <div class="center marginbottom1"><input value="OK" id="btnDoNotDisplayMessage" onclick="onOKDoNotDisplayMessage()" class="button button1" type="button" style="width:5em"/></div> </div><div style="overflow:scroll; -webkit-overflow-scrolling:touch; max-height:8em;" class="marginbottom1"> @MvcHtmlString.Create(Model.CurrentContext.Club.MessagesSettings.MessageBeforeEnteringWebRes)</div><a id="jayeshgoyani" class="MyCLass" >Click Here For print</a><div class="chart-wrapper"> <div id="chart"></div> </div><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></svg> var blogComments = [ { "blog": "My blog", "day": "1", "value": 3, "userColor": "#ffd600" }, { "blog": "My blog", "day": "2", "value": 7, "userColor": "#ffd600" }, { "blog": "My blog", "day": "3", "value": 12, "userColor": "#ffd600" }, { "blog": "My blog", "day": "4", "value": 15, "userColor": "#ffd600" }, { "blog": "My blog", "day": "5", "value": 6, "userColor": "#ffd600" }, { "blog": "My blog", "day": "6", "value": 23, "userColor": "#ffd600" }, { "blog": "My blog", "day": "7", "value": 12, "userColor": "#ffd600" }, { "blog": "My blog", "day": "8", "value": 10, "userColor": "#ffd600" }, { "blog": "My blog", "day": "9", "value": 17, "userColor": "#ffd600" }, { "blog": "My blog", "day": "10", "value": 13, "userColor": "#ffd600" }, { "blog": "My blog", "day": "11", "value": 14, "userColor": "#ffd600" }, { "blog": "My blog", "day": "12", "value": 15, "userColor": "#ffd600" }, { "blog": "My blog", "day": "13", "value": 3, "userColor": "#ffd600" }, { "blog": "My blog", "day": "14", "value": 6, "userColor": "#ffd600" }, { "blog": "My blog", "day": "15", "value": 23, "userColor": "#565656" }, { "blog": "My blog", "day": "16", "value": 25, "userColor": "#565656" }, { "blog": "My blog", "day": "17", "value": 21, "userColor": "#565656" }, { "blog": "My blog", "day": "18", "value": 18, "userColor": "#565656" }, { "blog": "My blog", "day": "19", "value": 17, "userColor": "#565656" }, { "blog": "My blog", "day": "20", "value": 16, "userColor": "#565656" }, { "blog": "My blog", "day": "21", "value": 11, "userColor": "#ffd600" }, { "blog": "My blog", "day": "22", "value": 3, "userColor": "#ffd600" }, { "blog": "My blog", "day": "23", "value": 8, "userColor": "#ffd600" }, { "blog": "My blog", "day": "24", "value": 5, "userColor": "#ffd600" }, { "blog": "My blog", "day": "25", "value": 4, "userColor": "#ffd600" }, { "blog": "My blog", "day": "26", "value": 1, "userColor": "#ffd600" }, { "blog": "My blog", "day": "27", "value": 7, "userColor": "#ffd600" }, { "blog": "My blog", "day": "28", "value": 6, "userColor": "#ffd600" }, { "blog": "My blog", "day": "29", "value": 3, "userColor": "#ffd600" }, { "blog": "My blog", "day": "30", "value": 6, "userColor": "#ffd600" } ]; function createChart() { $("#chart").kendoChart({ dataSource: { data: blogComments }, title: { align: "left", text: "Comments per day" }, legend: { visible: false }, seriesDefaults: { type: "column", labels: { visible: true, background: "transparent" } }, series: [{ field: "value", colorField: "userColor" }], valueAxis: { max: 28, majorGridLines: { visible: false }, visible: false }, categoryAxis: { field: "day", majorGridLines: { visible: false }, line: { visible: false } } }); } $(document).ready(function() { setTimeout(function() { // Initialize the chart with a delay to make sure // the initial animation is visible createChart(); $("#example").bind("kendo:skinChange", function(e) { createChart(); }); $("#jayeshgoyani").bind("click", function(e) { PerviousDate(); }); }, 400); });function PerviousDate() { window.print();}.MyCLass { color:Red; }01.$("#test").click(function() {02. for (var i=0; i<DS.data().length; i++) {03. var row = DS.at(i);04. if(row.word1==row.word2) {05. console.log("Words are the same: "+row.word1+"=="+row.word2)06. row.set("ok", true);07. } else {08. console.log("Words are not the same: "+row.word1+"!="+row.word2)09. row.set("ok", false);10. }11. }12.});
if ($(e.target).parent().hasClass('hb-hasView') ){ hb.addTab({text:$(e.target).text(),content:'<br>'}); var view = 'views/'+$(e.target).parent().attr('hb-view')+".htm"; $.ajax({url: view}) .success(function(html){ $('#tabSet div:last-child').append(html); $('#tabSet div:last-child').children().each(function(){ var $this = $(this); if ( is('drop-list') ){ $this.kendoComboBox(); } if ( is('date-range') ){ $this.kendoDateTimePicker(); } if ( is('grid') ){ $this.kendoGrid(); } if ( is('chart') ){ $this.kendoChart(); } function is(DOMclass){ return $this.hasClass(DOMclass); } }); }); }<form> <div> Start Time<input class="start date-range" value="10/10/2011" hb-for="*"/> End Time<input class="end date-range" value="10/10/2011" hb-for="*"/> </div> <div class="search-button"><input type="submit" value="Search" hb-for="*"/></div> <div class="search-button"><input type="submit" value="Reset" hb-for="*"/></div> <details id="aopt-title"> <summary>Advanced Options</summary> <div id="advanced-options"> <label class="ddl1"> <div>Purchase Type:</div> <select id="test1234" class="drop-list" hb-for="*"> <option>************</option> <option>************</option> <option>************</option> </select> </label> <label class="ddl2 "> <div>Channel:</div> <select class="drop-list" hb-for=""> <option>************</option> <option>************</option> <option>************</option> </select> </label> <label class="ddl3"> <div>Order Conf:</div> <select class="drop-list" hb-for=""> <option>************</option> <option>************</option> <option>************</option> </select> </label> <label class="ddl1"> <div>Skills:</div> <select class="drop-list" hb-for=""> <option>************</option> <option>************</option> <option>************</option> </select> </label> <label class="ddl2"> <div>Contact Center:</div> <select class="drop-list" hb-for=""> <option>************</option> <option>************</option> <option>************</option> </select> </label> <label class="ddl3"> <div>Iconic/.com:</div> <select class="drop-list" hb-for=""> <option>************</option> <option>************</option> <option>************</option> </select> </label> <label class="ddl1"> <div>Operator:</div> <select class="drop-list" hb-for=""> <option>************</option> <option>************</option> <option>************</option> </select> </label> <label class="ddl2"> <div>Page Size:</div> <select class="drop-list" hb-for=""> <option>************</option> <option>************</option> <option>************</option> </select> </label> <label class="ddl4"> <div>Survey Question:</div> <select class="drop-list" hb-for=""> <option>************************************************</option> <option>************************************************</option> <option>************************************************</option> </select> </label> </div> </details></form><div class="data-portion"> <div id="grid" class="grid"></div> <div id="chart" class="chart"></div></div>