or
<
table
style
=
"height: 400px; width:900px;"
>
<
tr
>
<
td
class
=
"chart-wrapper"
>
@(Html.Kendo().Chart(Model)
.Name("LocationsChart")
.Title("Locations")
.Legend(legend => legend
.Visible(true)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
.Width(900)
.Height(400)
)
.Series(series =>
{
foreach (var item in Model)
{
series.Column(new decimal[] { item.FuelSales, item.FuelSalesLyr, item.FuelSalesLy2 }).Name(item.LocUsageDesc);
}
})
.CategoryAxis(axis => axis
.Categories(new string[] {"Sales Yr to Date", "Sales Last Yr", "Sales 2yr"} )
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("c"))
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:C}")
.Background("grey"))
)
</
td
>
</
tr
>
</
table
>
inspecting the element in the browser
jQuery(
function
(){jQuery(
"#LocationsChart"
).kendoChart({
"chartArea"
:{
"background"
:
"transparent"
,
"height"
:400,
"width"
:900},
"title"
:{
"text"
:
"Locations"
},
"legend"
:{
"visible"
:
true
},
"series"
:[{
"name"
:
"Home"
,
"type"
:
"column"
,
"data"
:[368.59,1532.70,622.57]},{
"name"
:
"Shop"
,
"type"
:
"column"
,
"data"
:[485.46,1824.32,856.80]},{
"name"
:
"Cdry"
,
"type"
:
"column"
,
"data"
:[287.98,100.00,0]},{
"name"
:
"Cndo"
,
"type"
:
"column"
,
"data"
:[363.69,872.09,0]},{
"name"
:
"Home"
,
"type"
:
"column"
,
"data"
:[199.59,389.70,0]}],
"categoryAxis"
:[{
"majorGridLines"
:{
"visible"
:
false
},
"categories"
:[
"Sales Yr to Date"
,
"Sales Last Yr"
,
"Sales 2yr"
]}],
"valueAxis"
:[{
"labels"
:{
"format"
:
"c"
},
"majorGridLines"
:{
"visible"
:
true
},
"line"
:{
"visible"
:
false
}}],
"tooltip"
:{
"background"
:
"grey"
,
"format"
:
"{0:C}"
,
"visible"
:
true
}});});
@(Html.Kendo().Grid<
Listing
>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("RefreshTable", "HomeController"))
)
.Columns(columns =>
{
columns.Bound(x => x.Number)
.Width(120)
.Template(@<
text
></
text
>)
.ClientTemplate(
"<
div
class
=
'btn-group'
>" +
"<
button
type
=
'button'
class
=
'btn btn-default btn-sm dropdown-toggle'
data-toggle
=
'dropdown'
><
span
id
=
'selectedTagType'
>#= Number#</
span
> <
span
class
=
'caret'
></
span
></
button
>" +
"<
ul
class
=
'dropdown-menu'
role
=
'menu'
>" +
"<
li
><
a
onclick
=
'editRecord();'
></
a
>Edit</
li
>" +
"<
li
><
a
onclick
=
'activateRecord();'
></
a
>Activate</
li
>" +
"<
li
><
a
onclick
=
'transferRecord();'
></
a
>Transfer</
li
>" +
"</
ul
>" +
"</
div
>"
);
columns.Bound(x => x.TypeDescription);
columns.Bound(x => x.PhoneNumber);
})
)