Format Percentages in Editable Cell

[Chris]

I've got a grid bound to a result set.  Two of the columns need to be percentage values, though they come in as decimals.  I can get them to format as percentages (data: .97, displayed: 97%) when just viewing with two different methods, but when I tab into the cell/column, the value goes back to decimals and I need the percentage/whole number to stay visible.  Any ideas?

I've omitted some columns to save reading:

$("#calcParameters").kendoGrid({

                 //dataSource: data.marketSectors,

                 selectable: "single",

                 editable:true,

                 resizable: true,

                 pageable: false,

                 sortable: true,

                 scrollable: true,

                 navigatable: true,

                 serverFiltering: true,

                 toolbar: [{name: "addNew", text: "Add Record", click: function(){alert('hi');}}, "cancel"],

                 columns: [

                           {field: "recordId", hidden:true},                          

                           {field: "premiumRetentionFactor", title: "Retention Factor", template: "<div> #= kendo.toString(premiumRetentionFactor, 'p0') #</div>" },

                           {field: "dividendRetentionFactor", format: "{0:p0}", title: "Return Factor", editor:percentEditor},

                           { command: ["destroy"], title: " ", width: 125}

                           ],

                 save: function(e) {

                               e.model.updated = true;

                       }

             });

[Iliana Dyankova]

Hello Chris,

I have just answered to your support ticket with the same question, however I am pasting my reply here too so the other users who are interested in the same scenario can read it: 

I am afraid what you are trying to achieve is not supported in Kendo UI and there is no suitable workaround I can suggest. This is due to the design of the numeric textbox which has two different states - display which displays its value in one way and edit which displays it in another way. Format is used only to describe the way the data will be displayed to the user and does not affect on the actual value.
 

Regards,
Iliana Nikolova
the Telerik team

[Jon]

Is this still valid? I basically need to do the same thing with the numeric textbox. That is have a user enter say 4 and get 4%. 

Are there any other workarounds that would be available for a situation like this?

[Atanas Korchev]

Hi Jon,

Currently it is possible the user to edit the field as a fraction e.g. 0.4 and display 4% in the grid. Here is a live demo: http://jsbin.com/xakay/1/edit

Regards,
Atanas Korchev
Telerik

[Jon]

Yes, I understand that, but what Chris and I are asking is a bit different:

Is there any way to configure it so we enter 4, not .04, and get 4%.

[Atanas Korchev]

Hi Jon,

This can be done by multiplying and dividing the value. Here is how: http://jsbin.com/fideh/2/edit

Regards,
Atanas Korchev
Telerik

[Satish]

Hi,

 

In the above example it is assumed that when user tabs out of the editing cell, the data will be saved. But what about when one is using Batch editing? Data will be saved only when user clicks on "Save Changes" button in the toolbar. In this case, when user tabs out of the cell, I want to keep the dirty flag as it is. How can I achieve this? So, here is what I want:

1. User looks at the cell - it shows 8 %

2. User clicks on the cell and gets to the edit - it now shows 8 because of the multiplication done in the edit function

3. User enters 7 and tabs out of the cell.

4. Now the cell should show the dirty flag and should display 7 %

How can I accomplish this? Any trick?

 Thanks!