RADGRid Rows Sorting Move Up and Move Down button

[Platinum]

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 ?

[Shinu]

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

[Platinum]

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.

[Platinum]

Hi Shinu,

Any updates to the query posted earlier ?

[Shinu]

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.

[Jitendra]

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.

[Angel Petrov]

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

 

 

[Jitendra]

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();
        }

[Angel Petrov]

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

 

 

[Maurice Stokes]

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.

[Angel Petrov]

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

[Maurice Stokes]

Thanks Angel.  MaintainScrollPositionOnPostback worked!  Much appreciated.

[Anjali]

DataRow row1 = this.DataSource.Select(String.Format("OrderID = '{0}'", key1.ToString()))[0]; is giving a nullable exception. Please suggest