Datagrid reorder

[cornboy88]

I have some javascript that will work with 2 buttons on the side of the datagrid. then when the user selects the row they can move the row up or down. I need some help changing the script. I need 2 buttons at the end of each row. When a button is pressed it moves the record either up or down in the datagrid. The buttons at row end can only move that record row.

Thanks

<asp:DataGrid ID="dgSalesGroupItems" runat="server" AutoGenerateColumns="False" BorderColor="Black">
                        <AlternatingItemStyle CssClass="alternatingItemStyle"></AlternatingItemStyle>
                        <ItemStyle CssClass="ItemStyle"></ItemStyle>
                        <Columns>
                            <asp:BoundColumn DataField="LongDescr" HeaderText="Course Name" ReadOnly="True">
                                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Bottom" Width="170px"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Width="170px" VerticalAlign="Middle"></ItemStyle>
                            </asp:BoundColumn>
                            <asp:BoundColumn HeaderText="Crs. #" DataField="CourseType" ReadOnly="True">
                                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Bottom" Width="75px"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Width="75px" VerticalAlign="Middle"></ItemStyle>
                            </asp:BoundColumn>
                            <asp:TemplateColumn HeaderText="Sales Group Name">
                                <HeaderStyle HorizontalAlign="Center" Width="170px" VerticalAlign="Bottom" />
                                <ItemStyle HorizontalAlign="Left" Width="170px" VerticalAlign="Middle" />
                                <ItemTemplate>
                                    <afwui:afwTextBox ID="txtSalesGroupName" runat="server" MaxLength="20" Width="135px"
                                        CssClass="regularTextBox" Text='<%#DataBinder.Eval(Container, &amp;quot;DataItem.SalesGroupName&amp;quot;)%>'
                                        ToolTip='<%#DataBinder.Eval(Container, &amp;quot;DataItem.SeqNo&amp;quot;)%>'> </afwui:afwTextBox><asp:RequiredFieldValidator
                                            ID="rfvTxtSalesGroup" runat="server" Display="Dynamic" ErrorMessage="<img src='../Images/Icons/error.gif' title='Sales Group Name is required.'>"
                                            ControlToValidate="txtSalesGroupName"></asp:RequiredFieldValidator>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderStyle-Width="0px">
                                <ItemTemplate>
                                    <input id="btnUp" onclick="MoveUp()" type="button" value="    Up    " />
                                    <input id="btnDown" onclick="MoveDown()" type="button" value="  Down  " />
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderStyle-Width="0px">
                                <HeaderStyle HorizontalAlign="Center" Width="0px" VerticalAlign="Bottom" />
                                <ItemStyle HorizontalAlign="Left" Width="170px" VerticalAlign="Middle" CssClass="myColumn" />
                                <ItemTemplate>
                                    <afwui:afwTextBox ID="txtSeqNum" runat="server" MaxLength="20" Width="135px" CssClass="regularTextBox"
                                        ToolTip='<%#DataBinder.Eval(Container, &amp;quot;DataItem.SalesGroupName&amp;quot;)%>' Text='<%#DataBinder.Eval(Container, &amp;quot;DataItem.SeqNo&amp;quot;)%>'> </afwui:afwTextBox>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:BoundColumn DataField="SeqNo" Visible="False"></asp:BoundColumn>
                            <asp:BoundColumn DataField="SalesGroupName" Visible="False"></asp:BoundColumn>
                        </Columns>
                    </asp:DataGrid>



<script language="javascript" type="text/javascript">
        
        var selectColor = "#ffffa6";  

        function ChangeRowNum() {
            var tblName = document.getElementById("dgSalesGroupItems");
            var rows = tblName.getElementsByTagName("tr");
           for (i = 1; i < rows.length; i++) {
                rows[i - 1].cells[3].children[0].children[0].value = i;
                                rows[i].id = i

            }
        }

        
        function SelectRow(tblTable) {
            var SelectedRow = tblTable.srcElement.parentNode;

            if (SelectedRow.style.backgroundColor == selectColor)  //is selected ?
            {
                SelectedRow.style.backgroundColor = "white";    //deselect
            }
            else {
                SelectedRow.style.backgroundColor = selectColor;  //select
            }
            var i = 0;
            var RightTable = document.getElementById("dgSalesGroupItems");

            //this loop prevents from selecting multiple rows
            for (i = 1; i < RightTable.rows.length; i++) {
                if (RightTable.rows[i - 1].id == SelectedRow.id) {
                }
                else {
                    if (i % 2 == 0) {
                        RightTable.rows[i - 1].style.backgroundColor = "#ccffcc";
                    } else { RightTable.rows[i - 1].style.backgroundColor = "white"; }

                }
            }

        }

   
        function MoveUp() {
            var RightTable = document.getElementById("dgSalesGroupItems");
            var i = 0;

            for (i = 0; i < RightTable.rows.length; i++) {
                if (RightTable.rows[i].style.backgroundColor == selectColor)   //is selected ?
                {
                    SendUp(RightTable.rows[i], RightTable.rows[i - 1]);
                }
            }
        }

        
        function SendUp(CurrentRow, PreviousRow) {

            PreviousRow.parentNode.insertBefore(CurrentRow, PreviousRow);
            ChangeRowNum();


        }

 
        function MoveDown() {
            var RightTable = document.getElementById("dgSalesGroupItems");
            var i = 0;
            var RowToMove = 0;
            var PreviousRow;
            var CurrentRow;

            for (i = 0; i < RightTable.rows.length - 1; i++) {
                if (RightTable.rows[i].style.backgroundColor == selectColor) {
                    RightTable.rows[i];

                    RowToMove = i;

                  
                    RightTable.rows[i].parentNode.appendChild(RightTable.rows[i]);

                    //this code moves the appended row up till it reaches 
                    //to one position less than its original position
                    for (i = RightTable.rows.length - 1; i > RowToMove + 1; i--) {
                        CurrentRow = RightTable.rows[i];
                        PreviousRow = RightTable.rows[i - 1];

                        SendUp(CurrentRow, PreviousRow);
                    }
                }
            }
        }    
    
    </script>

 

[BillyRayPreachersSon]

You have posted server-side code to a client-side forum. If you want help with this client-side, perhaps posting the real client-side code might be a better option. If you want to do this with .net, then you would be better off asking in the most appropriate .net forum.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign