RADGRid Rows Sorting Move Up and Move Down button

12 posts, 1 answers
  1. Platinum
    Platinum avatar
    31 posts
    Member since:
    Jan 2008

    Posted 11 Jun 2014 Link to this post

    Hi,
     
    I am using RAD GRID for display 10 -15 rows.

    There is a requirement to change the row sort order for the rows in the Rad Grid using Move Up and Move Down button.

    Clicking on Move Up will change the sort order i.e if a row is in posiiton 7, it will be brought to 6

    Clicking on Move Down will change the sort order i.e if a row is in posiiton 7, it will be brought to 8

    Is there a sample or api available to achieve this ?
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Jun 2014 in reply to Platinum Link to this post

    Hi Platinum,

    Please take a look at the sample code snippet to move rows up and down.

    ASPX:
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource" >
        <MasterTableView DataKeyNames="OrderID">
            <Columns>
                <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" />
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <asp:ImageButton ID="Upbtn" runat="server" ImageUrl="~/RadGrid/up.jpg" ToolTip="Up" OnClick="Upbtn_Click" />
                        <asp:ImageButton ID="Downbtn" runat="server" ImageUrl="~/RadGrid/down.jpg" ToolTip="Down" OnClick="Downbtn_Click" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

    C#:
    public static string connection = WebConfigurationManager.ConnectionStrings["Northwind_newConnectionString3"].ConnectionString;
    SqlConnection conn = new SqlConnection(connection);
    public SqlCommand SqlCommand = new SqlCommand();
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = this.DataSource;
    }
    public DataTable DataSource
    {
        get
        {
            object res = this.Session["_ds"];
            if (res == null)
            {
                string selectQuery1 = "select OrderID,ShipCity from Orders";
                SqlDataAdapter adapter1 = new SqlDataAdapter(selectQuery1, conn);
                DataTable dt1 = new DataTable();
                conn.Open();
                adapter1.Fill(dt1);
                conn.Close();
                RadGrid1.DataSource = dt1;
                this.Session["_ds"] = dt1;
            }
            return (DataTable)this.Session["_ds"];
        }
    }
    protected void Upbtn_Click(object sender, EventArgs e)
    {
        ImageButton upbtn = (ImageButton)sender;
        GridDataItem item = (GridDataItem)upbtn.NamingContainer;
        int index = item.ItemIndex;
        GridItem movedItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index] as GridItem);
        GridItem beforeItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index-1] as GridItem);
        object key1 = RadGrid1.MasterTableView.DataKeyValues[index]["OrderID"];
        object key2 = RadGrid1.MasterTableView.DataKeyValues[index - 1]["OrderID"];
        DataRow row1 = this.DataSource.Select(String.Format("OrderID = '{0}'", key1.ToString()))[0];
        DataRow row2 = this.DataSource.Select(String.Format("OrderID = '{0}'", key2.ToString()))[0];
        row1.BeginEdit();
        row2.BeginEdit();
        row2["OrderID"] = key1;
        row1["OrderID"] = key2;
        row1.EndEdit();
        row2.EndEdit();
        row1.AcceptChanges();
        row2.AcceptChanges();
        RadGrid1.Rebind();
    }
    protected void Downbtn_Click(object sender, EventArgs e)
    {
        ImageButton downbtn = (ImageButton)sender;
        GridDataItem item = (GridDataItem)downbtn.NamingContainer;
        int index = item.ItemIndex;
        GridItem movedItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index] as GridItem);
        GridItem afterItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index + 1] as GridItem);
        object key1 = RadGrid1.MasterTableView.DataKeyValues[index]["OrderID"];
        object key2 = RadGrid1.MasterTableView.DataKeyValues[index + 1]["OrderID"];
        DataRow row1 = this.DataSource.Select(String.Format("OrderID = '{0}'", key1.ToString()))[0];
        DataRow row2 = this.DataSource.Select(String.Format("OrderID = '{0}'", key2.ToString()))[0];
        row1.BeginEdit();
        row2.BeginEdit();
        row2["OrderID"] = key1;
        row1["OrderID"] = key2;
        row1.EndEdit();
        row2.EndEdit();
        row1.AcceptChanges();
        row2.AcceptChanges();
        RadGrid1.Rebind();
    }

    Thanks,
    Shinu
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Platinum
    Platinum avatar
    31 posts
    Member since:
    Jan 2008

    Posted 16 Jun 2014 in reply to Shinu Link to this post

    Hi,

    Thanks for the post. I would like to know how to hide the Up button when it reaches the first position as it cannot be moved up further.

    Similarly to hide the down button when it reaches the last position as it cannot be moved down further.
  5. Platinum
    Platinum avatar
    31 posts
    Member since:
    Jan 2008

    Posted 18 Jun 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Any updates to the query posted earlier ?
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Jun 2014 in reply to Platinum Link to this post

    Hi Platinum,

    Please try the below C# code snippet to achieve your scenario.

    C#:
    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        foreach (GridDataItem item in RadGrid1.Items)
        {
            if (item.ItemIndex == 0)
            {
                //first row hiding up button
                ImageButton upButton = item.FindControl("Upbtn") as ImageButton;
                upButton.Visible = false;
            }
            else if (item.ItemIndex == RadGrid1.Items.Count-1)
            {
                //last row hiding the down button
                ImageButton downButton = item.FindControl("Downbtn") as ImageButton;
                downButton.Visible = false;
            }
        }
    }

    Thanks,
    Shinu.
  7. Jitendra
    Jitendra avatar
    2 posts
    Member since:
    Dec 2011

    Posted 17 Feb 2015 Link to this post

    But this is moving only one column, and other problem is if OrderId is primary key it throws unique constraints issue, any help would be appreciable.
  8. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 20 Feb 2015 Link to this post

    Hi Jitendra,

    Could you please share with us the markup and code-behind of the page so we could examine the setup? Without having a better understanding of the implementation it would be difficult to provide a precise answer on why are you experiencing such behavior.

    Regards,
    Angel Petrov
    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.

     
  9. Jitendra
    Jitendra avatar
    2 posts
    Member since:
    Dec 2011

    Posted 20 Feb 2015 in reply to Angel Petrov Link to this post

    This is my Grid.

        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource" OnPreRender="RadGrid1_PreRender">
            <MasterTableView DataKeyNames="OrderID">
                <Columns>
                    
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:ImageButton ID="Upbtn" runat="server" Width="30" Height="20" ImageUrl="~/Images/uparrow.png" ToolTip="Up" OnClick="Upbtn_Click" />
                            <asp:ImageButton ID="Downbtn" runat="server" Width="30" Height="20"  ImageUrl="~/Images/downarrow.png" ToolTip="Down" OnClick="Downbtn_Click" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" />
                    <telerik:GridBoundColumn UniqueName="Column2" DataField="Column2" HeaderText="Column2" />
                    <telerik:GridBoundColumn UniqueName="Column3" DataField="Column3" HeaderText="Column3" />
                    <telerik:GridBoundColumn UniqueName="Column4" DataField="Column4" HeaderText="Column4" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

    This is code behind..

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
            {
                RadGrid1.DataSource = this.DataSource;
            }
            public DataTable DataSource
            {
                get
                {
                    object res = this.Session["_ds"];
                    if (res == null)
                    {
                        DataTable table = new DataTable();
                        table.Columns.Add("OrderID", typeof(string));
                        table.Columns.Add("Column2", typeof(string));
                        table.Columns.Add("Column3", typeof(string));
                        table.Columns.Add("Column4", typeof(string));
                        for (int i = 0; i < 5; i++)
                        {
                            table.Rows.Add("value1" + i, "value2" + i, "value3" + i, "value4" + i);
                        }

                        
                        RadGrid1.DataSource = table;
                        this.Session["_ds"] = table;
                    }
                    return (DataTable)this.Session["_ds"];
                }
            }
            protected void Upbtn_Click(object sender, EventArgs e)
            {
                ImageButton upbtn = (ImageButton)sender;
                GridDataItem item = (GridDataItem)upbtn.NamingContainer;
                int index = item.ItemIndex;
                GridItem movedItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index] as GridItem);
                GridItem beforeItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index - 1] as GridItem);
                object key1 = RadGrid1.MasterTableView.DataKeyValues[index]["OrderID"];
                object key2 = RadGrid1.MasterTableView.DataKeyValues[index - 1]["OrderID"];
                DataRow row1 = this.DataSource.Select(String.Format("OrderID = '{0}'", key1.ToString()))[0];
                DataRow row2 = this.DataSource.Select(String.Format("OrderID = '{0}'", key2.ToString()))[0];
                row1.BeginEdit();
                row2.BeginEdit();
                row2["OrderID"] = key1;
                row1["OrderID"] = key2;
                row1.EndEdit();
                row2.EndEdit();
                row1.AcceptChanges();
                row2.AcceptChanges();
                RadGrid1.Rebind();
            }
            protected void Downbtn_Click(object sender, EventArgs e)
            {
                ImageButton downbtn = (ImageButton)sender;
                GridDataItem item = (GridDataItem)downbtn.NamingContainer;
                int index = item.ItemIndex;
                GridItem movedItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index] as GridItem);
                GridItem afterItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index + 1] as GridItem);
                object key1 = RadGrid1.MasterTableView.DataKeyValues[index]["OrderID"];
                object key2 = RadGrid1.MasterTableView.DataKeyValues[index + 1]["OrderID"];
                DataRow row1 = this.DataSource.Select(String.Format("OrderID = '{0}'", key1.ToString()))[0];
                DataRow row2 = this.DataSource.Select(String.Format("OrderID = '{0}'", key2.ToString()))[0];
                row1.BeginEdit();
                row2.BeginEdit();
                row2["OrderID"] = key1;
                row1["OrderID"] = key2;
                row1.EndEdit();
                row2.EndEdit();
                row1.AcceptChanges();
                row2.AcceptChanges();
                RadGrid1.Rebind();
            }

  10. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 24 Feb 2015 Link to this post

    Hello,

    After examining the provided code I have to say that the described behavior is expected and is caused by the fact that the row is not moved correctly. Please try modifying the code as demonstrated below and test the page again.

    ASPX:
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView DataKeyNames="OrderID">
            <Columns>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <asp:ImageButton ID="Upbtn" runat="server" Width="30" Height="20" ImageUrl="~/Images/uparrow.png" ToolTip="Up" OnClick="Upbtn_Click" />
                        <asp:ImageButton ID="Downbtn" runat="server" Width="30" Height="20" ImageUrl="~/Images/downarrow.png" ToolTip="Down" OnClick="Downbtn_Click" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" />
                <telerik:GridBoundColumn UniqueName="Column2" DataField="Column2" HeaderText="Column2" />
                <telerik:GridBoundColumn UniqueName="Column3" DataField="Column3" HeaderText="Column3" />
                <telerik:GridBoundColumn UniqueName="Column4" DataField="Column4" HeaderText="Column4" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

    C#:
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            RadGrid1.DataSource = this.DataSource;
        }
     
        public DataTable DataSource
        {
            get
            {
                object res = this.Session["_ds"];
                if (res == null)
                {
                    DataTable table = new DataTable();
                    table.Columns.Add("OrderID", typeof(string));
                    table.Columns.Add("Column2", typeof(string));
                    table.Columns.Add("Column3", typeof(string));
                    table.Columns.Add("Column4", typeof(string));
                    for (int i = 0; i < 5; i++)
                    {
                        table.Rows.Add("value1" + i, "value2" + i, "value3" + i, "value4" + i);
                    }
     
     
                    RadGrid1.DataSource = table;
                    this.Session["_ds"] = table;
                }
                return (DataTable)this.Session["_ds"];
            }
        }
     
        protected void Upbtn_Click(object sender, EventArgs e)
        {
            ImageButton upbtn = (ImageButton)sender;
            GridDataItem item = (GridDataItem)upbtn.NamingContainer;
            int index = item.ItemIndex;
            if(index==0) return;
            GridItem movedItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index] as GridItem);
            GridItem beforeItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index - 1] as GridItem);
            object key1 = RadGrid1.MasterTableView.DataKeyValues[index]["OrderID"];
            DataRow row1 = this.DataSource.Select(String.Format("OrderID = '{0}'", key1.ToString()))[0];
            MoveDataRowUp(row1);
            RadGrid1.Rebind();
        }
     
        protected void Downbtn_Click(object sender, EventArgs e)
        {
            ImageButton downbtn = (ImageButton)sender;
            GridDataItem item = (GridDataItem)downbtn.NamingContainer;
            int index = item.ItemIndex;
            if (index == RadGrid1.Items.Count - 1) return;
            GridItem movedItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index] as GridItem);
            GridItem afterItem = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[index + 1] as GridItem);
            object key1 = RadGrid1.MasterTableView.DataKeyValues[index]["OrderID"];
            object key2 = RadGrid1.MasterTableView.DataKeyValues[index + 1]["OrderID"];
            DataRow row1 = this.DataSource.Select(String.Format("OrderID = '{0}'", key1.ToString()))[0];
            MoveDataRowDown(row1);
            RadGrid1.Rebind();
        }
     
        public static void MoveDataRowUp(DataRow dataRow)
        {
            DataTable parentTable = dataRow.Table;
            int rowIndex = parentTable.Rows.IndexOf(dataRow);
            if (rowIndex > 0)
            {
                DataRow newDataRow = parentTable.NewRow();
     
                for (int index = 0; index < dataRow.ItemArray.Length; index++)
                {
                    newDataRow[index] = dataRow[index];
                }
                parentTable.Rows.Remove(dataRow);
                parentTable.Rows.InsertAt(newDataRow, rowIndex - 1);
                dataRow = newDataRow;
            }
        }
     
        public static void MoveDataRowDown(DataRow dataRow)
        {
            DataTable parentTable = dataRow.Table;
            int rowIndex = parentTable.Rows.IndexOf(dataRow);
            if (rowIndex < parentTable.Rows.Count - 1)
            {
                DataRow newDataRow = parentTable.NewRow();
                for (int index = 0; index < dataRow.ItemArray.Length; index++)
                {
                    newDataRow[index] = dataRow[index];
                }
                parentTable.Rows.Remove(dataRow);
                parentTable.Rows.InsertAt(newDataRow, rowIndex + 1);
                dataRow = newDataRow;
            }
        }


    Regards,
    Angel Petrov
    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.

     
  11. Maurice Stokes
    Maurice Stokes avatar
    2 posts
    Member since:
    Jul 2010

    Posted 22 Feb in reply to Angel Petrov Link to this post

    I had the same requirement and implemented a similar version of this code and it works fine, except the Rebind() method causes the page to refresh.  When this happens, the browser jumps back to the top of the radgrid list and the user loses their place.  Does anyone know if there is a way to implement this functionality without the page posting back and refreshing? I would like the record to move up or down, with no page refresh.  Thanks.
  12. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 25 Feb Link to this post

    Hello,

    In order to prevent the entire page refresh you can wrap the RadGrid inside a RadAjaxPanel or ASP UpdatePanel. Additionally you can set the MaintainScrollPositionOnPostback property of the page to true. That way when the page refreshes it will scroll automatically to the previous position.

    Regards,
    Angel Petrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Maurice Stokes
    Maurice Stokes avatar
    2 posts
    Member since:
    Jul 2010

    Posted 26 Feb in reply to Angel Petrov Link to this post

    Thanks Angel.  MaintainScrollPositionOnPostback worked!  Much appreciated.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017