How To: ItemTemplate show formatted data and EditItemTemplate show unformatted data

[Keith]

<telerik:GridTemplateColumn  HeaderStyle-Width="10%" ItemStyle-Width="10%" AllowFiltering="false" UniqueName="editPercentComplete" HeaderText="% Work Complete" DataField="PercentComplete" ReadOnly="false" ItemStyle-HorizontalAlign="Right">
                                    <ItemTemplate>
                                        <asp:Label ClientIDMode="Static" ID="PercentCompleteLabel" runat="server" Text='<%# Eval("PercentComplete","{0:#,#;(#,#);0}%") %>'></asp:Label>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <asp:TextBox ID="PercentCompleteTextBox" runat="server" AutoPostBack="true" Width="90%" CommandName="PercentWorkComplete" OnTextChanged="PercentCompleteTextBox_TextChanged" ClientIDMode="Static" Text='<%# Bind("PercentComplete") %>'></asp:TextBox>
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>

We are working on a solution and one of the columns on one of the pages is a percentage complete column.

When in view mode the ItemTemplate should show the value with the % symbol like

53%

When user click into the cell and the EditItemTemplate shows it should show the data without the % like as follows:

53

This just wont work. The EditItemTemplate is just an asp.net TextBox. No matter how I bind it when the TextBox gets loaded it just seems to get the text in the label.

I thought behind the scenes the grid would create the HTML for the label and bind it with the formatted text and the TextBox would be created with the unformatted text, but that doesnt seem to be the case.

[Zach]

Any reason not to use the gridNumericColumn which has a built in/canned editor?

<telerik:GridNumericColumn DataField="PercentComplete" HeaderText="% Work Complete" NumericType="Percent" DbValueFactor="100" DecimalDigits="2" />

More info on this column type here: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/columns/column-types#gridnumericcolumn

[Keith]

The GridNumericColumn wont post back when it gets changed.  With the asp.net TextBox as soon as user makes a change we grab it and update the datasource.

[Zach]

RadGrid allows for automatic datasource operations if you wish to configure them. There are a few options available to you, though some of it depends on the rest of your grid's markup and how you're handling datasource binding, entering/exiting edit mode, etc.

An alternative, but similar, solution to what you're doing currently would be to use a telerik:radnumericTextbox in place of your asp textbox and set autopostback="true". Assuming that the % doesn't blow it up, it should filter it out and let you work with just the numbers.

[Zach]

The trouble is that the bind statement in the edit item template is invalid. That textbox is not rendered with the rest of the page and so is not available to be bound during data binding. Thus, it just pulls data directly from the label as the grid renders it into edit mode. So either you'll need to use controls that the grid can more easily interpret and then consume the client side events available to you or you'll need to do some fancy javascript to hook into the edit start events to populate the text box yourself.

The final alternative would be to handle the % symbol on the back end and santize it before persisting the data.

[Keith]

Tried the RadNumericTextBox and its behavior is slightly different. As soon as it enters edit mode it fires back the textchanged event and the server side processes the data (strips the %) and update the datasource with what it already contains and then the cell exits edit mode before user can make a change. Honestly I think just not having the % present in the text is the best solution. The users know that the column is % completed and 10, 50, 75 represents a % with our without the % present in the text.

[Doncho]

Hi Keith,

Could you please clarify which is the currently used EditMode in the RadGrid. Sharing the complete markup declaration of the Control would give us additional information about the specific scenario and we will be able to assist more accurately.

I am attaching a sample page with a sample usage of a Template column with NumericTextBox as editor Control. You can use the sample as a reference and let us know how the desired behavior differs from the one in the sample.