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

change cell value on client

1 Answer 182 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 05 Oct 2016, 05:00 PM

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?

 

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 10 Oct 2016, 10:50 AM
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:
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or