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 ?
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
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:
C#:
Thanks,
Shinu
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.
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 ?
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#:
Thanks,
Shinu.
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
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
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();
}
<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
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:
C#:
Regards,
Angel Petrov
Telerik
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
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
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