Batch Edit Mode - Disable sorting when items edited are not saved

[DRG]

When items are being added/updated/deleted on a Telerik Radgrid (Batch editmode/ cell) and are not saved. Clicking on the headers for sorting is discarding the changes made to the grid. How to disable the grid column headers if an item is still in pending state (red).

No sorting functionality enabled in this example.
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

Thanks.

[Konstantin Dikov]

Hi Dinesh,

For achieving the desired functionality you could handle the client-side OnCommand event of the grid and if the command name is "Sort", retrieve the changes from the batchEditingManager to determine if there are any changes within the grid. If there is unsaved data present, you could cancel the command.

Following is a simple example of the above:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function GridCommand(sender, args) {
            if (args.get_commandName() == "Sort") {
                if (!IsGridDataSaved(sender)) {
                    args.set_cancel(true);
                }
            }
        }

        function IsGridDataSaved(grid) {

            var changes = grid.get_batchEditingManager()._changes;
            var haveChanges = false;

            for (var prop in changes) {
                haveChanges = true;
                break;
            }

            return !haveChanges;
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" AllowSorting="true">
    <MasterTableView EditMode="Batch"></MasterTableView>
    <ClientSettings>
        <ClientEvents OnCommand="GridCommand" />
    </ClientSettings>
</telerik:RadGrid>

Please have in mind that the sort icon will be changed in this scenario, regardless the fact that there was no actual sorting performed.


Regards,
Konstantin Dikov
Telerik

[DRG]

1.var changes = grid.get_batchEditingManager()._changes;

The solution above partially works (working only if none of the rows are clicked/selected). Even if there are no changes (i.e, Just click on a row with out making any changes), changes are reported. If would be better to report a change only if there is an actual change (Add/Delete/Update) on the grid records.

[Konstantin Dikov]

Hello,

I have tested the described scenario and I may confirm that for optimization purposes an empty object that will eventually hold the new values are added to the private _changes collection when a cell is opened for editing.

Since this a common requirement, I will forward this to our developers team, so they could provide an easy way for determining if there are any changes within the grid.

As for the time being, please try using the following approach, which should work as expected:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function GridCommand(sender, args) {
            if (args.get_commandName() == "Sort") {
                if (!IsGridDataSaved(sender)) {
                    args.set_cancel(true);
                }
            }
        }

        function IsGridDataSaved(grid) {
            var haveChanges = false;
            var gridElement = grid.get_element();
            var changes = gridElement.getElementsByClassName("rgBatchChanged");

            if (changes.length > 0) {
                haveChanges = true;
            }

            return !haveChanges;
        }
    </script>
</telerik:RadCodeBlock>

Regards,
Konstantin Dikov
Telerik

[DRG]

 var changes = gridElement.getElementsByClassName("rgBatchChanged");

Using the latest telerik version. Error: Object doesn't support this property or method. 

[Konstantin Dikov]

Hello,

Indeed, getElementsByClassName is supported in IE 9 and above, and is not available in previous versions.

For your convenience I am attaching a sample page that will work with older IE versions as well. As you will notice, you will have to include the jQuery in your page:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <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>

Hope that helps.


Regards,
Konstantin Dikov
Telerik

[ACubukcu]

Hi Konstantin,

The example code fails if you have an NextPrevNumericAndAdvanced pager set and you try to change the page size.  

Clicking the "Change" button displays the confirm message, but if you cancel out of it, the page size text box contents reverts to 1 and all the page links disappear.

[Princy]

Hi,

I guess you want to have a confirm while paging, please try the following code snippet.

ASPX:

<ClientSettings>
    <ClientEvents OnGridCreated="gridCreated" OnCommand="onCommand" />
</ClientSettings>

JS:

<script type="text/javascript">
    function onCommand(sender, args) {
    }
    function gridCreated(sender, args) {
        var pagerRow = sender.get_masterTableView().get_element().tFoot;
        var anchors = pagerRow.getElementsByTagName('a');
        for (var i = 0; i < anchors.length; i++) {
            if (anchors[i].className != "rgCurrentPage" && anchors[i].href.indexOf("javascript:__doPostBack") > -1) {
                var clickScript = anchors[i].attributes["onclick"].value;
                anchors[i].onclick = confirmPage;
            }
        }

        var submits = pagerRow.getElementsByTagName('input');
        for (var i = 0; i < submits.length; i++) {
            if (submits[i].type == "submit") {
                submits[i].onclick = confirmPage;
            }
        }
    }

    function confirmPage() {
        return confirm("Are you sure you want to page?");
    }
</script>

Thanks,
Princy

[ACubukcu]

Hi Princy,

Thanks for your update.  This handles the paging, but one other issue remains, the "Page size" text box with the Change button.
If you try to change the page size, the code fails.

"... NextPrevNumericAndAdvanced pager set and you try to change the page size."

Thanks,
AC
 

[Konstantin Dikov]

Hello,

With our latest version you could use the client-side OnUserAction event of the grid, which fires before any action is performed on the grid and it was implemented exactly for such requirements. Following is a very simple example demonstrating how this event could be used for achieving the requested behavior:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function userAction(sender, args) {
            if (args.get_actionName() != "BatchEdit") {
                if (!IsGridDataSaved(sender)) {
                    if (!confirm("Unsaved data! Continue?")) {
                        args.set_cancel(true);
                    }
                }
            }
        }

        function IsGridDataSaved(grid) {
            var haveChanges = false;
            var gridElement = grid.get_element();
            var changes = $telerik.$(gridElement).find(".rgBatchChanged");

            if (changes.length > 0) {
                haveChanges = true;
            }

            return !haveChanges;
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" AllowSorting="true" AllowPaging="true">
    <PagerStyle Mode="NextPrevNumericAndAdvanced" PageSizeControlType="RadComboBox" />
    <MasterTableView CommandItemDisplay="Top" EditMode="Batch"></MasterTableView>
    <ClientSettings>
        <ClientEvents OnUserAction="userAction" />
    </ClientSettings>
</telerik:RadGrid>

Additionally, you could take a look at the following Code Library, where you could examine another approach for preventing batch editing data:

• Prevent Losing Batch Editing Changes on Paging or any other PostBack

Hope this helps.


Regards,
Konstantin Dikov
Telerik