How do I set the date-format of a pie chart with mvvm?

I would like a result like this(attached file)

I have a pie chart. This is the code:

I wuold like set data with '%' using MVVM of kendo

I have an MVC grid where I have a Save event defined as follows:

.Events(events => events.Change("gridRowChange").Edit("onEdit").Save("onSave"))

In my JavaScript code I have an onSave(e) function defined that never gets called when a grid item is saved.

I should also point out that all grid rows in this page are saved manually via a JS function containing the following line.

    $("#grid").data("kendoGrid").saveRow();

I saw in another thread from several years ago that someone else was having the same issue doing what I'm doing but I never saw a resolution.

I am trying to get Font Awesome icons to display in my custom editor tool. The example I found here: http://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/appearance/add-icon-custom-tool no longer works. We are using version 2016.3.1118 and although the example is broken in both that version and the latest release, they do display different behavior so please provide an update to the example for version 2016.3.1118. Thanks!

I am trying to create a master/detail grid using this example Kendo Dojo. It seemed to work fine as both grids are receiving data. However, when I expand the detail grid the rows do not display. If you see the example below, TagID #1 has a record count of 1 detail row that should display but it doesnt'. It only shows like a white space, whereas TagID #22 which does not have any detail records shows a record count of 0 and a completely empty grid.

Here is my HTML:

<div kendo-grid="tagsGrid" options="tagsGridOptions">

    <div k-detail-template>

<kendo-tabstrip>

<ul>

<li class="k-state-active">Tagged Contractors</li></ul>

<div>

<div kendo-grid k-options="detailGridOptions(dataItem)"></div>

</div></kendo-tabstrip></div>

</div>

Here is my Angular Controller Code for the detail grid:

$scope.detailGridOptions = function (dataItem)

{return

{ dataSource:

{ type: 'aspnetmvc-ajax', transport:

{ read: "/Home/GetTaggedContractorsByMajor"},

serverPaging: true,

serverSorting: true,

serverFiltering: true,

pageSize: 5,

filter: { field: "TagID", operator: "eq", value: dataItem.TagID },

schema: { data: "Data", total: "Total"}},

scrollable: false,

sortable: true,

pageable: true,

columns: [{ field: "CompanyID", title: "CompanyID"},{ field: "vchCompanyName", title: "Company Name"}]};};

We have a grid configured with the "all" page size in the options: 

When we programmatically refresh the grids datasource (below), and that refresh pulls in an additional item to display in the grid, the pager in the grid is no longer what we'd expect. 

If the grid had 9 items before, the pager now shows 9, and the new item is now on page two. I understand that the "all" selection just sets the pageSize to the total number of items in the datasource, but what we want to happen is that after the refresh, the "all" setting is preserved and the additional grid item displays on the first page, not generate a second page of data. 

Do you know how this can be achieved? 

I'd like to be able to zoom in with Mousewheel (works fine) and pan sideways with Mousewheel + Ctl.

Is this possible?

Thanks, Bob Graham

Was noticing yesterday in a dojo example I believe it was, that the columns had a vertical "shine" on them, though the demo that I got there from didn't. I didn't see anything in the code that was adding that 3D look.

Not really sure I want to use it as it's getting to be a bit passé, but I'd like to have the option.

Normally I'd expect it to be done with a y-repeat background image, but I saw no sign of that in the example code.

Thanks, Bob Graham