or
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
link
href
=
"styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/layout.css"
rel
=
"stylesheet"
/>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"secHeader1"
>
header 1
<
div
style
=
"width: 120px; float:right;"
>
<
ul
id
=
"menu"
>
<
li
>
Products
<
ul
>
<
li
>Furniture</
li
>
<
li
>Decor</
li
>
<
li
>Storage</
li
>
<
li
>Lights</
li
>
</
ul
>
</
li
>
</
ul
>
<
script
>
$(document).ready(function() {
$("#menu").kendoMenu();
});
</
script
>
</
div
>
</
div
>
<
div
id
=
"secHeader2"
>
header 2
</
div
>
<
div
id
=
"secContent"
>
content body
</
div
>
<
div
id
=
"secFooter"
>
footer
</
div
>
</
body
>
</
html
>
* {
margin
:
0
;
padding
:
0
;}
html, body, form {
margin
:
0
;
padding
:
0
;
height
:
100%
;
color
:
#ffffff
;}
html>body>form {
position
:
absolute
;
width
:
100%
;}
#secHeader
1
{
position
:
absolute
;
overflow
:
hidden
;
width
:
100%
;
height
:
75px
;
left
:
0
;
top
:
0px
;
background-color
:
#8a0000
;}
#secHeader
2
{
position
:
absolute
;
overflow
:
hidden
;
width
:
100%
;
height
:
75px
;
left
:
0
;
top
:
75px
;
background-color
:
#666666
;}
#secContent {
position
:
absolute
;
overflow
:
hidden
;
width
:
100%
;
left
:
0
;
top
:
150px
;
bottom
:
31px
;
background-color
:
#0c0c0c
;}
#secFooter {
position
:
absolute
;
overflow
:
hidden
;
width
:
100%
;
height
:
30px
;
left
:
0
;
bottom
:
0
;
background-color
:
#606060
;
border-top
:
1px
solid
#a0a0a0
;}
<
a
id
=
"btb1"
data-role
=
"button"
style
=
"background-color: green; width:90%;"
data-click
=
"action"
data-name
=
"Stuff & Stuff"
data-id
=
"1"
data-unit
=
"Unit"
data-unitid
=
"1"
class
=
"km-button"
>
<
span
class
=
"km-text"
>DONT CLICK ME</
span
>
</
a
>
<table id="jobs"
data-role="grid"
data-bind="source: jobsList, events: { change: gridChange, cancel: gridCancel, remove: gridRemove, save: gridSave}"
data-columns="[{ field: 'Id', width: 50, title: 'Id', filterable: true}, { field: 'Name', width: 80, title: 'Name', filterable: true}, { field: 'Description', width: 150, title: 'Description', filterable: true},{ command: ['edit','destroy'], title: '' }]"
data-toolbar="[{ name: 'create', text: 'Add new job'}]"
data-pageable="true"
data-editable="{mode: 'inline', confirmation: 'Are you sure you want to delete this job? It will not be recoverable'}"
data-sortable="true"
data-column-menu="false"
data-resizable="true"
data-selectable="true"
data-filterable="{ extra: false, operators: { string: { startswith: 'Starts with', eq: 'same as', neq: 'different' }, number: {eq: '==', neq: '!=' , gt: '>', lt: '<'}}}"
>
</table>
gridChange: function (eventArgs) {
//do something
},
gridRemove: function(eventArgs) {
//do something
},
gridCancel: function(eventArgs) {
//do something
},
gridSave: function(eventArgs) {
//do something
}
@(Html.Kendo().Grid<
PosAdmin.Areas.Config.Models.ConfigProject
>()
.Name("grid")
.Columns(c =>
{
c.Bound(m => m.Description);
c.Bound(m => m.Id);
c.Bound(m => m.Team.Name);
c.Bound(m => m.Name);
c.Bound(m => m.Team.Description);
c.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("CreateProject", "ConfigEditor",new {Area="Config"}))
.Read(read => read.Action("ProjectsRead","ConfigEditor",new {Area="Config"}))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
"handling": [8616.2759999999998, 7095.1799999999994, 6916.5359999999991],]
"name": "XXX",
"weight": [13.388057013625801, 27.4987252294945, 3.9746104136942266],
"color": "#265A6A",
"data": [2872.0920000000001, 2365.0599999999999, 2305.5120000000002],
},
{ ..}
series: data.rows
and the chart is created with "data" values from each object from "rows" array. How can I change the data source from objects "data" array to some other (e.g. "weight")?
<
script
id
=
"popupEditorTemplate"
type
=
"text/x-kendo-template"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"Username"
class
=
"required"
>Username</
label
>
</
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"Username"
data-bind
=
"value:Username"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"FirstName"
class
=
"required"
>First Name</
label
>
</
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"FirstName"
data-bind
=
"value:FirstName"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"LastName"
class
=
"required"
>Last Name</
label
>
</
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"LastName"
data-bind
=
"value:LastName"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"Email"
class
=
"required"
>Email</
label
>
</
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"Email"
data-bind
=
"value:Email"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"HomePhone"
>Home Phone</
label
>
</
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"HomePhone"
data-bind
=
"value:HomePhone"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"WorkPhone"
>Work Phone</
label
>
</
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"WorkPhone"
data-bind
=
"value:WorkPhone"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"MobilePhone"
>Mobile Phone</
label
>
</
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"MobilePhone"
data-bind
=
"value:MobilePhone"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"Line1"
class
=
"required"
>Address Line 1</
label
>
</
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"Line1"
data-bind
=
"value:Line1"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"Line2"
>Address Line 2</
label
>
</
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"Line2"
data-bind
=
"value:Line2"
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"ReceiveEmailMontlyFlyer"
>Receive Flyer</
label
>
</
div
>
<
select
name
=
"ReceiveEmailMontlyFlyer"
id
=
"ReceiveEmailMontlyFlyer"
data-bind
=
"value:ReceiveEmailMontlyFlyer"
>
<
option
value
=
"1"
>Yes</
option
>
<
option
value
=
"0"
>No</
option
>
</
select
>
<
div
class
=
"k-edit-label"
>
<
label
for
=
"ReceiveEmailMessages"
>Receive other</
label
>
</
div
>
<
select
id
=
"ReceiveEmailMessages"
name
=
"ReceiveEmailMessages"
data-bind
=
"value:ReceiveEmailMessages"
data-role
=
"dropdownlist"
>
<
option
value
=
"1"
>Yes</
option
>
<
option
value
=
"0"
>No</
option
>
</
select
>
<
br
/>
</
script
>