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

RADGRid Rows Sorting Move Up and Move Down button

12 Answers 651 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Platinum
Top achievements
Rank 1
Platinum asked on 12 Jun 2014, 04:03 AM
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 ?

12 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 12 Jun 2014, 05:17 AM
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
0
Platinum
Top achievements
Rank 1
answered on 16 Jun 2014, 07:40 AM
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.
0
Platinum
Top achievements
Rank 1
answered on 18 Jun 2014, 09:09 AM
Hi Shinu,

Any updates to the query posted earlier ?
0
Shinu
Top achievements
Rank 2
answered on 18 Jun 2014, 10:18 AM
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.
0
Jitendra
Top achievements
Rank 1
answered on 18 Feb 2015, 04:32 AM
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.
0
Angel Petrov
Telerik team
answered on 20 Feb 2015, 03:32 PM
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.

 
0
Jitendra
Top achievements
Rank 1
answered on 21 Feb 2015, 04:07 AM
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();
        }

0
Angel Petrov
Telerik team
answered on 24 Feb 2015, 02:21 PM
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.

 
0
Maurice Stokes
Top achievements
Rank 1
answered on 22 Feb 2016, 05:47 PM
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.
0
Angel Petrov
Telerik team
answered on 25 Feb 2016, 11:21 AM
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
0
Maurice Stokes
Top achievements
Rank 1
answered on 26 Feb 2016, 06:53 PM
Thanks Angel.  MaintainScrollPositionOnPostback worked!  Much appreciated.
0
Anjali
Top achievements
Rank 1
answered on 09 May 2017, 06:53 AM
DataRow row1 = this.DataSource.Select(String.Format("OrderID = '{0}'", key1.ToString()))[0]; is giving a nullable exception. Please suggest
Tags
Grid
Asked by
Platinum
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Platinum
Top achievements
Rank 1
Jitendra
Top achievements
Rank 1
Angel Petrov
Telerik team
Maurice Stokes
Top achievements
Rank 1
Anjali
Top achievements
Rank 1
Share this question
or