
Uttam Dhakal
Top achievements
Rank 1
Uttam Dhakal
asked on 02 Nov 2012, 01:07 AM
Right now when i click on the header then it sorts the data automatically.
But is there a way i can change it and assign it to the background image of the header so that when the image is clicked it sorts the row. and also change the image behavior.
Right now i have images for sorting and they appear correctly.
But my client wants a image like an drop down arrow at the left of each header so that user don't need to hover over the header to see the click here to sort.
Is there a way we can make it done...
But is there a way i can change it and assign it to the background image of the header so that when the image is clicked it sorts the row. and also change the image behavior.
Right now i have images for sorting and they appear correctly.
But my client wants a image like an drop down arrow at the left of each header so that user don't need to hover over the header to see the click here to sort.
Is there a way we can make it done...
5 Answers, 1 is accepted
0
Accepted

Shinu
Top achievements
Rank 2
answered on 02 Nov 2012, 04:24 AM
Hi,
Please take a look into the following code snippet I tried to give an image next to the HeaderText of a column indicating the column can be sorted and removing it on sorting.
C#:
Thanks,
Shinu.
Please take a look into the following code snippet I tried to give an image next to the HeaderText of a column indicating the column can be sorted and removing it on sorting.
C#:
protected
void
RadGrid1_ItemCreated(
object
sender, Telerik.Web.UI.GridItemEventArgs e)
{
if
(e.Item
is
GridHeaderItem)
{
GridHeaderItem header = (GridHeaderItem)e.Item;
Image img = Image();
img.ID =
"Image1"
;
img.ImageUrl =
"~/Images/Sort.gif"
;
header[
"ColumnUniqueName"
].Controls.AddAt(1, img);
if
(RadGrid1.MasterTableView.SortExpressions.Count > 0 && RadGrid1.MasterTableView.SortExpressions[0].FieldName ==
"ColumnFieldName"
)
{
if
(RadGrid1.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Ascending || RadGrid1.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Descending)
{
header[
"ColumnUniqueName"
].Controls.Remove(img);
}
}
}
}
Thanks,
Shinu.
0

Uttam Dhakal
Top achievements
Rank 1
answered on 21 Nov 2012, 04:08 PM
this is not what i was asking.
i am not looking a way to add image to the header columns i know how to add the image.
my concerns is once i added the image i want the sort functionality to work when i click on the image not on the titlee.
right now it works as when i click on the title, then it sorts the data.
so when i add the image i want the image be click able for sorting not the Title.
i am not looking a way to add image to the header columns i know how to add the image.
my concerns is once i added the image i want the sort functionality to work when i click on the image not on the titlee.
right now it works as when i click on the title, then it sorts the data.
so when i add the image i want the image be click able for sorting not the Title.
0

Shinu
Top achievements
Rank 2
answered on 22 Nov 2012, 04:02 AM
Hi,
Please take a look into the following code snippet to make the column sort on clicking the Image(ImageButton) and not in the HeaderText.
C#:
Thanks,
Shinu.
Please take a look into the following code snippet to make the column sort on clicking the Image(ImageButton) and not in the HeaderText.
C#:
protected
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridHeaderItem)
{
GridHeaderItem header = (GridHeaderItem)e.Item;
LinkButton lnk = (LinkButton)header[
"UniqueName"
].Controls[0];
//access the HeaderText and make it disable to click
lnk.Enabled =
false
;
ImageButton img =
new
ImageButton();
//providing an ImageButton and giving CommandName and CommandArgument
img.ID =
"Image1"
;
img.CommandName =
"Sort"
;
img.CommandArgument =
"ColumnFieldName"
;
img.ImageUrl =
"~/Images/Sort.gif"
;
header[
"OrderID3"
].Controls.AddAt(1, img);
if
(RadGrid1.MasterTableView.SortExpressions.Count > 0 && RadGrid1.MasterTableView.SortExpressions[0].FieldName ==
"ColumnFieldName"
)
{
if
(RadGrid1.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Ascending || RadGrid1.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Descending)
{
//change the image url or remove the image
}
}
}
}
Thanks,
Shinu.
0

Uttam Dhakal
Top achievements
Rank 1
answered on 22 Nov 2012, 01:12 PM
Do i have to rewrite this code for al my coumn headers.
if i have 10 columns than i have to write this 10 times, is that feasibe to do.
it looks like the code provided is good for one column header only....
if i have 10 columns than i have to write this 10 times, is that feasibe to do.
it looks like the code provided is good for one column header only....
0

Shinu
Top achievements
Rank 2
answered on 23 Nov 2012, 04:07 AM
Hi,
You can add sort image for all the BoundColumns as follows.
C#:
Thanks,
Shinu.
You can add sort image for all the BoundColumns as follows.
C#:
protected
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridHeaderItem)
{
foreach
(GridBoundColumn col
in
RadGrid1.Columns)
{
GridHeaderItem header = (GridHeaderItem)e.Item;
ImageButton img =
new
ImageButton();
img.ID = col.UniqueName;
img.CommandName =
"Sort"
;
img.ImageUrl =
"~/Images/sort arrow.gif"
;
img.ID = col.UniqueName;
LinkButton lnk = (LinkButton)header[col.UniqueName].Controls[0];
lnk.Enabled =
false
;
header[col.UniqueName].Controls.AddAt(1, img);
img.CommandArgument = col.DataField;
if
(RadGrid1.MasterTableView.SortExpressions.Count != 0 && RadGrid1.MasterTableView.SortExpressions[0].FieldName == col.DataField)
{
if
(RadGrid1.MasterTableView.SortExpressions[0].SortOrder != GridSortOrder.None)
{
header[col.UniqueName].Controls.Remove(img);
}
}
}
}
}
Thanks,
Shinu.