or
@(Html.Kendo().Chart<InfoSource.Requests.Models.Graph>() .Name("myallocation") .Title(title => title .Text("MY ALLOCATION") .Font("16px Oswald") ) .Theme("Silver") .Legend(legend => legend .Visible(false) ) .ChartArea(chartArea => chartArea .Background("transparent") ) .DataSource(ds => ds .Read(read => read.Action("dMyAllocation", "Dashboard", new { area = "InfoSource.Metrics" })) ) .Series(series => { series.Pie(model => model.Value, model => model.Label, null, model => model.Label == "Unassigned" ? true : false) .Labels(labels => labels .Template("${dataItem.Label}") .Visible(true).Position(ChartPieLabelsPosition.InsideEnd) ); }) .Events(events => events .SeriesClick("myallocationClick") ) .Tooltip(tooltip => tooltip .Visible(true) .Template("${dataItem.Label} - ${value}%") ) .HtmlAttributes(new { style = "max-height: 300px;" }) )<div id="CustomerListPage" style="min-width: 500px"> <div style="width: 600px; margin-left: auto; margin-right: auto; text-align: right">Include Inactive?<input id="IncludeInactiveCheckBox" type="checkbox" data-bind="checked: includeInactive, events: {click: includeInactiveChanged}" /></div> <div id="CustomerListGrid" style="width: 600px; height:300px; margin-left: auto; margin-right: auto; margin-top: 10px" data-role="grid" data-selectable="row" data-columns='[{"field":"id", "title":"ID", "width":50}, {"field":"FullName", "title":"Name"}, {"field":"MailingAddressCity", "title":"City", "width":150}, {"field":"MailingAddressState", "title":"ST", "width":50}]' data-bind="source: customers"></div></div>var CustomerListViewModel = kendo.observable({ // properties customers: [], includeInactive: false, includeInactiveChanged: function (val) { this.load(); }, load: function () { var self = this; var dto = new DTO(true, '', new Object({ includeInactive: this.get("includeInactive") })); $.ajax('SysUserWebService.asmx/GetCustomerList', { data: JSON.stringify({ dto: dto }), type: 'post', contentType: 'application/json', success: function (result) { if (result.d.success) { self.set('customers', result.d.payload); } else { alert(result.d.message); }; } }); } });// routes the application based on hash changesvar HashChange = function () { HideAllPages(); var query = location.hash.split("?"); var hash = query[0]; switch (hash) { case '': location.hash = '#MainMenu'; break; case '#MainMenu': $('#MainMenuPage').show(); break; case '#CustomerList': $('#CustomerListPage').show(); kendo.bind($('#CustomerListPage'), window.CustomerListViewModel); window.CustomerListViewModel.load(); break; case '#CrewList': $('#CrewListPage').show(); break; case '#History': $('#HistoryPage').show(); break; };};