Events not firing in a Simple Batch Editing Enabled Grid

8 posts, 0 answers
  1. Jawwad
    Jawwad avatar
    10 posts
    Member since:
    Dec 2014

    Posted 23 Dec 2014 Link to this post

    Hello,
         I have inserted a simple grid with batch editing option enabled. When I edit any cell, it gets a red mark at top left (which is of course telling that the cell got edited). But the grid is not firing any event like BatchEditCommand, Insert, Update or Delete after editing the cell. Please let me know what m I missing.
    What I want is:
    1. Get the data after cell got edited to make changes on my page accordingly.
    2. Get the complete datasource of grid after editing for example as dataset or datatable.

    Thanks.

    Full page :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     
    <telerik:RadAjaxManager runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
     
     
         <telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True" OnNeedDataSource="RadGrid1_NeedDataSource"
                AllowAutomaticInserts="True" PageSize="10" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted"
                OnItemUpdated="RadGrid1_ItemUpdated" OnPreRender="RadGrid1_PreRender" AllowPaging="True"
                AutoGenerateColumns="False" OnBatchEditCommand="RadGrid1_BatchEditCommand" >
                <MasterTableView CommandItemDisplay="TopAndBottom" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">
                    <BatchEditingSettings EditType="Cell" />
                    <SortExpressions>
                        <telerik:GridSortExpression FieldName="ID" SortOrder="Ascending" />
                    </SortExpressions>
                    <Columns>
                        <telerik:GridBoundColumn DataField="Code" HeaderStyle-Width="210px" HeaderText="ProductName" SortExpression="ProductName"
                            UniqueName="ProductName">
                            <ColumnValidationSettings EnableRequiredFieldValidation="true">
                                <RequiredFieldValidator ForeColor="Red" Text="*This field is required" Display="Dynamic">
                                </RequiredFieldValidator>
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>                                       
                    </Columns>
                </MasterTableView>
                <ClientSettings AllowKeyboardNavigation="true"></ClientSettings>
            </telerik:RadGrid>
        </div>
        </form>
    </body>
    </html>

    And C# Code :

    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
            {
                RadGrid1.DataSource = (A function returning datatable).
            }
     
            protected void RadGrid1_BatchEditCommand(object sender, Telerik.Web.UI.GridBatchEditingEventArgs e)
            {
                 
            }
     
            protected void RadGrid1_ItemUpdated(object source, Telerik.Web.UI.GridUpdatedEventArgs e)
            {
                 
            }
     
            protected void RadGrid1_ItemInserted(object source, GridInsertedEventArgs e)
            {
                 
            }
     
            protected void RadGrid1_ItemDeleted(object source, GridDeletedEventArgs e)
            {
                 
            }
     
            protected void RadGrid1_PreRender(object sender, EventArgs e)
            {
                 
            }
  2. Jawwad
    Jawwad avatar
    10 posts
    Member since:
    Dec 2014

    Posted 23 Dec 2014 Link to this post

    Well,
        I did not expected that!!!!
    but found out after looking for answer for last 4 hours that these events trigger only when save / cancel changes button are pressed and all the events triggered one by one.
    So what I did was
    1. displayed the buttons but now my own save / cancel buttons on the form wont be of any use because there are other fields too besides the grid.
    2. without grid buttons, editing is of no use which is not good at all because my other form values are dependant on grid cell values. For example total cost will be calculated only when save changes will be clicked.

    Still its not the solution because I need the event to be triggered upon changing the cell values. So if anybody has the solution for this, it would be appreciated.
  3. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2407 posts

    Posted 24 Dec 2014 Link to this post

    Hello Jawwad,

    The only available way for passing the changes to the server with Batch Editing is by clicking on the "Save Changes" button or by manually calling of the method of the BatchEditingManger on client-side that will invoke saving. In any other scenario, the changes will not be passed to the server and they will be lost after a postback.

    The only possible workaround that I could suggest is that you handle the button click on client-side and conditionally execute different logic for initiating a postback - if there are changes in the grid, use the grid as an initiator and if there are no changes, use the RadAjaxPanel for example.

    For your convenience, following is a simple example demonstrating such approach:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function saveAll() {
                var grid1 = $find("<%=RadGrid1.ClientID%>");
                var batchManager1 = grid1.get_batchEditingManager();
                var hasChanges = batchManager1.hasChanges(grid1.get_masterTableView());                
                if (hasChanges) {
                    batchManager1.saveTableChanges([grid1.get_masterTableView()]);
                } else {
                    var ajaxPanel = $find("<%=RadAjaxPanel1.ClientID%>");
                    ajaxPanel.ajaxRequest();
                }
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" OnAjaxRequest="RadAjaxPanel1_AjaxRequest">
        <telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" Text="Save all"
            OnClientClicked="saveAll"></telerik:RadButton>
        <telerik:RadTextBox runat="server" ID="RadTextBox1"></telerik:RadTextBox>
     
        <telerik:RadGrid runat="server" ID="RadGrid1" Width="200px" OnNeedDataSource="RadGrid1_NeedDataSource"
            OnBatchEditCommand="RadGrid1_BatchEditCommand">
            <MasterTableView EditMode="Batch">
            </MasterTableView>
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>

    And the code-behind:
    protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        for (int i = 0; i < 3; i++)
        {
            table.Rows.Add(i);
        }
     
        (sender as RadGrid).DataSource = table;
    }
     
    protected void RadAjaxPanel1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        saveChanges = true;
    }
     
    protected void RadGrid1_BatchEditCommand(object sender, GridBatchEditingEventArgs e)
    {
        saveChanges = true;
        //Handle the grid updates
    }
     
    protected void Page_PreRender(object sender, EventArgs e)
    {
        if (saveChanges)
        {
            //Save the values from the other controls
        }
    }

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  4. Siri
    Siri avatar
    11 posts
    Member since:
    Jul 2018

    Posted 08 Aug 2018 Link to this post

    Hi Konstantin,

    I am not using ajax panel for the radgrid and trying to manually call the SaveChanges from a Ribbon button, but this is not firing BatchEditCommand event and all the changes in the grid are lost. Can you please let me know what I am missing here? Thanks!

    function SaveAllChanges(sender, args) {
        var grid = window.$find(window.gridID);
        var batchManager1 = grid.get_batchEditingManager();
        batchManager1.saveChanges(grid.get_masterTableView());
    }
  5. Vessy
    Admin
    Vessy avatar
    1887 posts

    Posted 10 Aug 2018 Link to this post

    Hi Siri,

    If you are not using an AjaxPanel you have to make sure that the RibbonBar is no performing a Postback is when when the SaveAllChanges handler is called. For example, you can attach the SaveAllChanges() function as a handler to the OnClientButtonClicking event of the control and cancel the click Postback in it:
    <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" OnClientButtonClicking="SaveAllChanges">
        ...
    </telerik:RadRibbonBar>
     
    <script type="text/javascript">
        function SaveAllChanges(sender, args) {
            var grid = window.$find(window.gridID);
            var batchManager1 = grid.get_batchEditingManager();
            batchManager1.saveChanges(grid.get_masterTableView());
     
            args.set_cancel(true);
        }
    </script>


    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

  6. Siri
    Siri avatar
    11 posts
    Member since:
    Jul 2018

    Posted 10 Aug 2018 in reply to Vessy Link to this post

    Thanks so much for your response Vessy. I tried to cancel the postback but still it does not fire the server side handler for batch edit command. I am binding the radgrid at the client side with Select method, if this makes any difference.

    Alternatively, I tried accessing the edited items from radgrid which is in batch edit mode and then call a Page method to update the edited items to the database explicitly. However, in this case I am unable to get the selected value of the RadCombobox which is inside the EditTemplate to save the new selected value. Looks like after the edit is made on the radgrid, Radcombobox is disappearing. Here is my .js code and GridTemplateColumn. Can you please verify and suggest ASAP? 

    function RibbonToolBar_ButtonClicking(sender, args) {
        SaveAllChanges();
    }
    function SaveAllChanges(sender, args) {
        var grid = window.$find(window.rgSearch);
        var batchManager = grid.get_batchEditingManager();
        var hasChanges = batchManager.hasChanges(grid.get_masterTableView());
        if (!hasChanges) {
            NotifyError("No edits made.");
        }
        else {
            var tableView = grid.get_masterTableView();
            var items = tableView.get_dataItems();
            var edits = [];
            for (var i = 0; i < items.length; i++) {
             var rowDataItem  = grid.get_masterTableView().get_dataItems()[i];
             var comboCell = grid.get_masterTableView().getCellByColumnUniqueName(rowDataItem, "Category");
             var priorValue = rowDataItem.getDataKeyValue("Category");
             var comboValue = batchManager.getCellValue(comboCell);
             if (comboValue !==priorValue ) {
                    var comboId = grid.get_masterTableView().get_dataItems()[i].findControl("Combo").get_value();
                    var idValue = rowDataItem.getDataKeyValue("ID");
                    var savedItem = {
                        ID: idValue,
                        EdittedId: comboId ,
                    };
                    edits.push(savedItem);
                }
            }
            window.PageMethods.Update(edits);
        }
    }
    <telerik:GridTemplateColumn HeaderText="Notes" HeaderStyle-Width="200" UniqueName="Category">
               <ClientItemTemplate>
               <span>#=CategoryName #</span>
               </ClientItemTemplate>
               <EditItemTemplate>
                <telerik:RadComboBox RenderMode="Native" runat="server" ID="Combo" DataValueField="ID"
                          DataTextField="Text" DataSourceID="dsCategories" Width="190">
                          </telerik:RadComboBox>
                 </EditItemTemplate>
    </telerik:GridTemplateColumn>
  7. Siri
    Siri avatar
    11 posts
    Member since:
    Jul 2018

    Posted 13 Aug 2018 Link to this post

    Hi Vessy,

    I tried to get the edited radcombobox value from the BatchEditCellValueChanged as suggested in this link as shown below and stored all the edited values into an array, which I then used in the above mentioned SaveAllChanges method to save the edited values. And it works!

    https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/onbatcheditcellvaluechanged

    var selectedValue = cell.getElementsByTagName("select")[0].options[cell.getElementsByTagName("select")[0].selectedIndex].value;

     

    Posting this approach in case anyone is looking for the same issue!

     

  8. Vessy
    Admin
    Vessy avatar
    1887 posts

    Posted 14 Aug 2018 Link to this post

    Hi,

    Thank you for sharing your solution with the community, Siri - I am glad you managed to implement the target functionality.

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top