RadGrid with Batch Editting to have Move Up and Move Down button

[Uli]

I have a RadGrid with Batch Editting some like https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx .

I need Move Up and Move Down buttons in each row to change order numbers and reorder the rows.

Clicking on Move Up will change the sort order i.e if a row is in position 7, it will be brought to 6 and its cell value in column "order" will become 6.

Clicking on Move Down will change the sort order i.e if a row is in position 7, it will be brought to 8  and its cell value in column "order" will become 8.

How to implement it?

 

 

[Doncho]

Hi Uli,

I am afraid that the desired behavior goes beyond the built-in capabilities of RadGrid. 

If you think it could be a useful feature of the RadGrid you could log it as a feature request in our Feedback portal so it can gain interest and collect votes from other developers - Progress® Telerik® UI for ASP.NET AJAX Feedback Portal.

Just as an idea, you use such MoveUp and MoveDown buttons to execute custom logic on the server where to modify the DataSource bound to the RadGrid in the desired way and then Rebind the RadGrid.

Kind regards,
Doncho
Progress Telerik

[Uli]

My solution is

<telerik:GridBoundColumn DataField="itemText" UniqueName="ColName" HeaderText="Text"
                                                         AllowSorting="true" SortExpression="Name" >                                                       
                                                    </telerik:GridBoundColumn>

                                                    <telerik:GridBoundColumn DataField="SortOrder" UniqueName="ColOrder" HeaderText="Order"
                                                         AllowSorting="true" SortExpression="Order" >                                                
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridTemplateColumn HeaderText="Up/Down"  >
                                                        <ItemTemplate>
                                                            <telerik:RadImageButton ID="OrderUp"  runat="server" Height="30px" Image-Url="images/common/arrow_up.gif" AutoPostBack="false"  OnClientClicked="function(button,args){ItemUpDown(button, args);}" />
                                                            <telerik:RadImageButton ID="OrderDown"  runat="server"  Height="30px" Image-Url="images/common/arrow_down.gif" AutoPostBack="false"  OnClientClicked="function(button,args){ItemUpDown(button, args);}" />                                                        
                                                        </ItemTemplate>
                                                    </telerik:GridTemplateColumn> 

 function ItemUpDown(sender, args) {
                        var grid = $find("<%=radGrid1.ClientID%>");
                        var tableView = grid.get_masterTableView();
                        var batchManager = grid.get_batchEditingManager();
                        var id = sender.get_parent().get_id();
                        var nr = id.substr(id.lastIndexOf("_") + 1);
                        var neighbournr;
                        if (sender.get_id().endsWith('OrderUp')) {
                            neighbournr = parseInt(nr) - 1;
                        }
                        else {
                            neighbournr = parseInt(nr) + 1;
                        }
                        var myItem = tableView.get_dataItems()[nr];
                        var neighbourItem = tableView.get_dataItems()[neighbournr];
                        if (neighbourItem != null) {
                            swapCellValue(myItem, neighbourItem, batchManager, "ColName");                           
                        }
                    }

                    function swapCellValue(myItem, neighbourItem, batchManager, columnName) {
                        var myCell = myItem.get_cell(columnName);
                        var neighbourCell = neighbourItem.get_cell(columnName);
                        var temVal = batchManager.getCellValue(myCell);
                        batchManager.changeCellValue(myCell, batchManager.getCellValue(neighbourCell));
                        batchManager.changeCellValue(neighbourCell, temVal);
                    }

[Uli]

my solution:

[Doncho]

Hi Uli,

Thank you for sharing your solution with the community. It might help other developers facing a similar issue.

Kind regards,
Doncho
Progress Telerik