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

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

9 Answers 82 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DRG
Top achievements
Rank 1
DRG asked on 08 Feb 2014, 10:15 PM
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.

9 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 12 Feb 2014, 01:59 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
DRG
Top achievements
Rank 1
answered on 13 Feb 2014, 01:58 AM
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.
0
Konstantin Dikov
Telerik team
answered on 17 Feb 2014, 04:03 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
DRG
Top achievements
Rank 1
answered on 18 Feb 2014, 03:30 PM
 var changes = gridElement.getElementsByClassName("rgBatchChanged");

Using the latest telerik version. Error: Object doesn't support this property or method. 
0
Konstantin Dikov
Telerik team
answered on 20 Feb 2014, 03:44 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
ACubukcu
Top achievements
Rank 1
answered on 24 Jul 2014, 02:51 AM
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.
0
Princy
Top achievements
Rank 1
answered on 24 Jul 2014, 06:32 AM
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
0
ACubukcu
Top achievements
Rank 1
answered on 24 Jul 2014, 01:22 PM
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
 
0
Konstantin Dikov
Telerik team
answered on 28 Jul 2014, 10:36 AM
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:
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.

 
Tags
Grid
Asked by
DRG
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
DRG
Top achievements
Rank 1
ACubukcu
Top achievements
Rank 1
Princy
Top achievements
Rank 1
Share this question
or