• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1526
  • Last Modified:

Dynamically add ASC / DESC Sort Image Arrow to Link Button


I have a asp:Table  with Header Columns as LinkButton

On click event of each and every linkbutton, Ascending / Descending sort takes place.

asp:Table is exactly looks like asp:GridView

Link Button performs exactly the functionality of asp:GridvIew Header Column Asc / Desc functionality.

Now, i need to add .png images Down Arrow and Up Arrow for Asc and Desc to this link button.

How can i perform this operation dynamically.  

As code is working perfectly fine, I really dont want to change from LinkButton to ImageButton.
0
chokka
Asked:
chokka
  • 6
  • 6
1 Solution
 
Rajar AhmedConsultantCommented:
Can u Post ur Code..??
0
 
CB_ThirumalaiCommented:
In the RowDataBound event, check if the current RowType is DataControlRowType.Header.  In the column you wish to add the image, refer that as below and add a literal control.  Assign the image to the literals text property.

Literal literal = new Literal();
literal.Text = "<img alt=\"\" src=\"./Something.gif\" />";
e.Row.Cells[ColumnIndex].Controls.Add(literal);
0
 
CB_ThirumalaiCommented:
This is just an example.  You may need to manipulate it further to suit your needs.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
chokkaAuthor Commented:
I just posted code for Table Header
<div visible="true" id="dvHeader" runat="server" style ="background-repeat:repeat-x; height:30px;width:600px; margin:0;padding:0"> 
 
<table cellspacing="0" cellpadding = "0"  rules="all" border="1" id="tblHeader" runat="server"
 
 style="font-family:Arial;font-size:10pt;width:900px;border-collapse:collapse;height:100%;"> 
 
     <tr class="cp0Header"> 
 
       <td style ="width:150px;text-align:center" >Rep</td> 
 
       <td style ="width:150px;text-align:center">
       <asp:LinkButton  ID="lnkDateEntrySorting" 
                        Text="Date Entry" 
                        ForeColor="White" 
                        Font-Underline="true" 
                        CommandArgument="DateEntered|ascending" 
                        runat="server" 
                        onclick="lnkDateEntrySorting_Click">
       </asp:LinkButton>
       </td> 
 
       <td style ="width:150px;text-align:center">
       <asp:LinkButton  ID="lnkCMSorting" 
                        Text="CM" 
                        ForeColor="White" 
                        Font-Underline="true" 
                        CommandArgument="CMName|ascending" 
                        runat="server" 
                        onclick="lnkCMSorting_Click">
       </asp:LinkButton>
       </td> 
 
       <td style ="width:150px;text-align:center">
       <asp:LinkButton     ID="lnkOrgSorting" 
                            Text="Org" 
                           ForeColor="White" 
                           Font-Underline="true" 
                           CommandArgument="OrgName|ascending" 
                           runat="server" 
                           onclick="lnkOrgSorting_Click">
       </asp:LinkButton></td> 
       
       <td style ="width:150px;text-align:center">
          <asp:LinkButton  ID="lnkFollowUpSorting" 
                           Text="Follow-Up" 
                           ForeColor="White" 
                           Font-Underline="true" 
                           CommandArgument="TickleDate|ascending" 
                           runat="server" 
                           onclick="lnkFollowUpSorting_Click">
       </asp:LinkButton>
      </td> 
        
       <td style ="width:600px;text-align:center">Comments</td>
    </tr> 
 
</table> 
 
</div>

Open in new window

0
 
chokkaAuthor Commented:
I need image Down / Up in this code

<td style ="width:150px;text-align:center">
          <asp:LinkButton  ID="lnkFollowUpSorting"  
                           Text="Follow-Up"  
                           ForeColor="White"  
                           Font-Underline="true"  
                           CommandArgument="TickleDate|ascending"  
                           runat="server"  
                           onclick="lnkFollowUpSorting_Click">
       </asp:LinkButton>
      </td>  
0
 
CB_ThirumalaiCommented:
I thought it is a GridView control.  Sorry to have overlooked it.  In the lnkFollowUpSorting_Click, for the lnkFollowUpSorting ID, append the text property with the HTML tag of an image as, <img alt="" src="something.gif" /> as,

lnkFollowUpSorting.Text = "Follow-Up " + "<img alt=\"\" src=\"something.gif\" />";

based on it is ascending or descending
0
 
chokkaAuthor Commented:

Ok, I realized that i need to write it from Code behind.

i have two questions

1) By default its ascending - so i need to Follow-Up [Down Arrow Image]

2) when you sort or click - Text will change to Follow-Up [Up Arrow Image]

Where this operation is handled.

Below, i have written, Followup Click Event
protected void lnkFollowUpSorting_Click(object sender, EventArgs e)
    {
        if (string.IsNullOrEmpty(Convert.ToString(Session["LoginUserId"])))
        {
            Response.Redirect("login.aspx");
        }
        else if (!string.IsNullOrEmpty(Convert.ToString(Session["LoginUserId"])))
        {
            if (gvTaskActivity.Rows.Count > 0)
            {
                LinkButton lb = sender as LinkButton;
                char[] splitter = { '|' };
                string[] sortArgs = lb.CommandArgument.Split(splitter);
                String expression = sortArgs[0];
                SortDirection direction;
                if (sortArgs[1] == "ascending")
                {
                    direction = SortDirection.Ascending;
                    lb.CommandArgument = lb.CommandArgument.Replace("ascending", "descending"); //this will toggle the sort direction next time you click it 
                }
                else
                {
                    direction = SortDirection.Descending;
                    lb.CommandArgument = lb.CommandArgument.Replace("descending", "ascending"); //this will toggle the sort direction next time you click it 
                }
                gvTaskActivity.Sort(expression, direction);
            }
        }
    }

Open in new window

0
 
CB_ThirumalaiCommented:
here is the modified code.  In the sAscendingImg and sDescendingImg strings, put the location of the Up and Down arrow respectively.
protected void lnkFollowUpSorting_Click(object sender, EventArgs e)
{
        if (string.IsNullOrEmpty(Convert.ToString(Session["LoginUserId"])))
        {
            Response.Redirect("login.aspx");
        }
        else if (!string.IsNullOrEmpty(Convert.ToString(Session["LoginUserId"])))
        {
            if (gvTaskActivity.Rows.Count > 0)
            {
                LinkButton lb = sender as LinkButton;
                string sAscendingImg = "<img alt=\"\" src=\"\" />";
                string sDescendingImg ="<img alt=\"\" src=\"\" />"; 
                char[] splitter = { '|' };
                string[] sortArgs = lb.CommandArgument.Split(splitter);
                String expression = sortArgs[0];
                SortDirection direction;
                if (sortArgs[1] == "ascending")
                {
                    direction = SortDirection.Ascending;
                    lb.CommandArgument = lb.CommandArgument.Replace("ascending", "descending"); //this will toggle the sort direction next time you click it 
                    lb.Text = lb.Text.Replace(sDescendingImg, "") + sAscendingImg;
                }
                else
                {
                    direction = SortDirection.Descending;
                    lb.CommandArgument = lb.CommandArgument.Replace("descending", "ascending"); //this will toggle the sort direction next time you click it 
                    lb.Text = lb.Text.Replace(sAscendingImg, "") + sDescendingImg;
                }
                gvTaskActivity.Sort(expression, direction);
            }
        }
}

Open in new window

0
 
chokkaAuthor Commented:
I have two questions

1) This was actual  src="~/Images/arrow-asc.png"
But when i tried to add over here .. string sAscendingImg = "<img alt=\"\" src=\"\" />";
I face Syntax Error. I  need to know the exact the String format.

2) This code change occurs only during Click Event of the Button. We need to have by default of ASC Image during Page_Load Event itself.
So do i need to re write the code for ASC in page_load event or do i need to mention some where in .aspx page ?
0
 
CB_ThirumalaiCommented:
1. Use this.
string sAscendingImg = "<img alt=\"\" src=\"Images/arrow-asc.png\" />"

The ~ symbol won't work on client side and you have to use the relative path for that.  When the page loads, it should be relative to the page path.

2. In the aspx page you may have to do this.  You can do this in the Page_Load also, if you can reference the header linkbutton there by changing the Text property.
0
 
chokkaAuthor Commented:
Can you please provide me a piece of syntax to be written on  Page_Load

Since i am doing sorting for 4 link buttons

for all the four, do i need to write like as follows
If that was the scenario, where i can find my LinkButton as Follow-Up or Org

    LinkButton lb = sender as LinkButton;
     string sAscendingImg = "<img alt=\"\" src=\"Images/arrow-asc.png\" />";
     string sDescendingImg = "<img alt=\"\" src=\"Images/arrow-desc.png\" />";
lb.Text = lb.Text.Replace(sDescendingImg, "") + sAscendingImg;
0
 
CB_ThirumalaiCommented:
if (!Page.IsPostback)
{
  // this will never be executed on Postback.  So all the link will have ascending symbol.
   lnkDateEntrySorting.Text = "Date Entry " + "<img alt=\"\" src=\"Images/arrow-asc.png\" />";
   lnkCMSorting.Text = "CM " + "<img alt=\"\" src=\"Images/arrow-asc.png\" />";
   // like wise for others.
}
0
 
chokkaAuthor Commented:
excellent
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now