change cell value on client

2 posts, 0 answers
  1. Daniel
    Daniel avatar
    11 posts
    Member since:
    Mar 2014

    Posted 05 Oct Link to this post

    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?

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 10 Oct Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top