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
>