change cell value on client

[Daniel]

I have a grid in batch edit mode. The user has to click on a few cells and increase the existing values by 1. I need to simplify this edit so the cell value is automatically increased by 1 whenever the cell is clicked while in edit mode. If the user clicks on the wrong cell or the cell value needs to be change by other than 1 then the user will have to enter the proper value. Once all the changes are made the user will click "Save Changes" and the updates will be stored on the server using the server side BatchEditCommand. I can change the values in the cells  client side by using innerHTML but they are not saved once Save Changes button is clicked. How can I do this?

 

[Konstantin Dikov]

Hi Daniel,

Such behavior is not supported out of the box, but you can use the Batch Editing Manager client-side API to change the value through its changeCellValue(cell, value) method:

• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/client-side-api

Furthermore, you need to prevent the propagation of the click event that will open the cell for editing. For your convenience, following is a simple example demonstrating such approach:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" LoadScriptsBeforeUI="false">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" AllowPaging="true">
    <MasterTableView EditMode="Batch">
        <Columns>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <div style="background: orange;" onclick="changeValue(this, event)"><%#Eval("Age") %></div>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox runat="server"></telerik:RadNumericTextBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

<script>
    function changeValue(div, ev) {
        preventEvent(ev);
        var parentCell = $(div).closest("TD")[0];
        var batchManager = $find("<%=RadGrid1.ClientID%>").get_batchEditingManager();
        var newValue = parseInt(div.innerHTML) + 1;
        batchManager.changeCellValue(parentCell, newValue);
    }

    function preventEvent(ev) {
        if (ev.preventDefault) {
            ev.preventDefault();
            ev.stopPropagation();
        }
        else {
            ev.cancelBubble = true;
            event.returnValue = false;
        }
    }
</script>

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress