Multiplication Factor when editing a GridNumericColumn of a RadGrid in Batch Editing mode

Description

Check out how to manipulate editor's value in Batch editing Grid by applying a multiplication factor for a value bound to a GridNumericColumn just while editing its cells. A sample use case for this customization is editing currency values. For instance if the values are stored in dollars in Grid's DataSource and they should be edited in cents.

Solution

When set in edit mode, the GridNumericColumn in RadGrid renders a RadNumericTextBox control as editor of the column's cells. By using the client-side events of the RadGrid exposed specifically for the BatchEditing the editor value can be manipulated in a custom manner right after a cell is opened for editing and just before it is being saved.

The approach in steps:

• In the OnBatchEditSetEditorValue event:

  • Cancel the default event

  • Get a reference to the editor control of the Grid numeric cell

  • Set the manipulated value (the one in cents) as the value of the editor control

• In the OnBatchEditGetEditorValue event:

  • Cancel the default event

  • Get a reference to the editor control and get its value (it should be the value in cents)

  • Set the manipulated value (the one in dollars) as the value in the event arguments

Example

Sample RadGrid declaration bound to a SqlDataSource and the Northwind database:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px"
    AutoGenerateDeleteColumn="true"
    DataSourceID="SqlDataSource1"
    AllowAutomaticInserts="true"
    AllowAutomaticUpdates="true"
    AllowAutomaticDeletes="true">
    <MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" CommandItemDisplay="Top" EditMode="Batch"
        DataKeyNames="OrderID">
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                SortExpression="OrderDate" UniqueName="OrderDate">
            </telerik:GridDateTimeColumn>
            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                SortExpression="Freight" UniqueName="Freight">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="ShipName"
                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                SortExpression="ShipName" UniqueName="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry"
                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                SortExpression="ShipCountry" UniqueName="ShipCountry">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents
            OnBatchEditGetEditorValue="batchEditGetEditorValue"
            OnBatchEditSetEditorValue="batchEditSetEditorValue" />
    </ClientSettings>
</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    InsertCommand="INSERT INTO [Orders] ([OrderDate], [Freight], [ShipName], [ShipCountry]) VALUES (@OrderDate, @Freight, @ShipName, @ShipCountry)"
    SelectCommand="SELECT [OrderID], [OrderDate], [Freight], [ShipName], [ShipCountry] FROM [Orders]"
    UpdateCommand="UPDATE [Orders] SET [OrderDate] = @OrderDate, [Freight] = @Freight, [ShipName] = @ShipName, [ShipCountry] = @ShipCountry WHERE [OrderID] = @OrderID"
    DeleteCommand="DELETE FROM [Orders] WHERE [OrderID] = @OrderID"></asp:SqlDataSource>

Handling the BatchEditGetEditorValue and BatchEditSetEditorValue client events

var editFactor = 100;
function batchEditGetEditorValue(sender, args) {
    var uniqueName = args.get_column().get_uniqueName();
    if (uniqueName == "Freight") {
        args.set_cancel(true);
        var editor = $telerik.findControl(args.get_container(), "RNTB_" + uniqueName);
        var newValue = editor.get_value() / editFactor;
        args.set_value(newValue);
    }
}
function batchEditSetEditorValue(sender, args) {
    var uniqueName = args.get_column().get_uniqueName();
    if (uniqueName == "Freight") {
        args.set_cancel(true);
        var newVal = parseFloat(args.get_value()) * editFactor;
        var editor = $telerik.findControl(args.get_container(), "RNTB_" + uniqueName);
        editor.set_value(newVal)
    }
}