This is a migrated thread and some comments may be shown as answers.

Format Percentages in Editable Cell

6 Answers 621 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 03 Oct 2012, 09:30 PM
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;
                       }
             });

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 08 Oct 2012, 03:35 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jon
Top achievements
Rank 1
answered on 06 Feb 2014, 12:01 AM
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?
0
Atanas Korchev
Telerik team
answered on 10 Feb 2014, 03:28 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jon
Top achievements
Rank 1
answered on 10 Feb 2014, 03:35 PM
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%.
0
Atanas Korchev
Telerik team
answered on 11 Feb 2014, 09:05 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Satish
Top achievements
Rank 1
answered on 19 Sep 2015, 12:21 AM

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!

Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Jon
Top achievements
Rank 1
Atanas Korchev
Telerik team
Satish
Top achievements
Rank 1
Share this question
or