Solved

Hyperlink Column - Datagrid Control - call using JS script?

Posted on 2008-10-07
7
724 Views
Last Modified: 2013-11-05
Hi all,

I have a datagrid on an ASPX sheet which I've got working how I wanted it (Initially I had it on a gridview but couldn't get custom paging the way I wanted it, hence the change).

Before changing from a gridview, I was able to call the thickbox to display a popup form to display more details on the highlighted row.  However, while I've got the datagrid working perfectly, instead of finding and using the CSS (thickbox) as I instruct it to, it opens the popup form in place of the original - ie it doesn't utilise thickbox when I need it to.

I'm about out of ideas to be honest.  I've searched on Google, and while there's a few things that almost look relevant they've not had the desired effect...  surely it must be doable though, considering I could do it when using a GridView?

I've attached the code snippet that's displaying the GridView.  I'll be honest, I'm a bit of a newbie at this so please try to keep it simple! lol! :)

Thanks in advance,

Ad


<ASP:DataGrid id="GridView1" runat="server" 
              AllowPaging="True"
              autogeneratecolumns="false"
              PagerStyle-Visible = "False"
              HeaderStyle-BackColor="#FFF95E" 
              HeaderStyle-ForeColor="#009F62"
              Alternatingitemstyle-BackColor="#EFEFEF"
              Font-Size="10pt">
        <HeaderStyle BackColor="#FFF95E" BorderStyle="None" Font-Underline="False" ForeColor="#009F62"  />
        <EdititemStyle BorderColor="#02A552" BorderStyle="Dotted" BorderWidth="1px" />
        <itemStyle BorderColor="#02A552" BorderStyle="Dotted" />
          <columns>
                <asp:hyperlinkcolumn headertext="Job No"
                     ItemStyle-CssClass="thickbox"
                     ItemStyle-Width="75px"
                     datatextfield="Job No"
                     DataNavigateUrlFormatString="jobdetails.aspx?jobno={0}&KeepThis=true&TB_iframe=true&height=400&width=500"
                     DataNavigateUrlField="Job No"
                     SortExpression="Job No">
                </asp:hyperlinkcolumn>
                
                <asp:boundcolumn DataField="Requested By" HeaderText="Requested By" ItemStyle-Width="100px" />
                <asp:boundcolumn DataField="Location" HeaderText="Location" SortExpression="Location" ItemStyle-Width="75px"/>
                <asp:boundcolumn DataField="Title" HeaderText="Title" />
                <asp:boundcolumn DataField="Date Received" DataFormatString="{0:dd-MMM-yyyy}" HeaderText="Date Received" />
                <asp:boundcolumn DataField="Date Started" DataFormatString="{0:dd-MMM-yyyy}" HeaderText="Date Started" />
                <asp:boundcolumn DataField="Job Status" HeaderText="Job Status" SortExpression="Job Status" />
                
          </columns>          
    </ASP:DataGrid>

Open in new window

0
Comment
Question by:adaytay
  • 3
  • 3
7 Comments
 
LVL 22

Expert Comment

by:prairiedog
ID: 22659900
>>>Before changing from a gridview, I was able to call the thickbox to display a popup form to display more details on the highlighted row.
How did you do that? Any code snippet?
0
 
LVL 13

Expert Comment

by:crazyman
ID: 22659939
Whats this 'thickbox' you refer to, css should have no reall bearing on the target of your popup.

Have you tried the Target property on the HyperLink Column....
0
 
LVL 2

Author Comment

by:adaytay
ID: 22660138
The thickbox is available from here: http://jquery.com/demo/thickbox/

I have to style the item  as a thickbox so that (in theory) the details appear as a popup superimposed over the top of the current page (but the rest of the page is greyed out).   As I mentioned earlier, this code worked perfectly when using a gridview.  It's only since I've changed to a datagrid that the problem is occuring.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 2

Author Comment

by:adaytay
ID: 22660154
This is how I used to do it:
                    <asp:hyperlinkfield headertext="Job No"
                            datatextfield="Job No"
                            datanavigateurlformatstring="jobdetails.aspx?jobno={0}&amp;KeepThis=true&amp;TB_iframe=true&amp;height=400&amp;width=500"
                            datanavigateurlfields="Job No" SortExpression="Job No">
                         <ItemStyle Width="75px" />
                        <ControlStyle CssClass="thickbox" />
                        
                        </asp:hyperlinkfield>

Open in new window

0
 
LVL 22

Accepted Solution

by:
prairiedog earned 110 total points
ID: 22660471
Two ways to try:
1. Remove ItemStyle-CssClass="thickbox", then try setting the column style in DataGrid's ItemDataBoudn event handle (VB.NET)r:
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
    e.Item.Cells(x).CssClass = "thickbox"      'x is the index of the hyperlink column
End If
2. Convert the HyperLinkColumn into a TemplateColumn, then assign an ID for the HyperLink control, and then assign CssClass="thickbox" to the control in the ItemTemplate.
 

<Columns>
<asp:TemplateColumn HeaderText="HyperLink"> 
<ItemTemplate> 
<asp:HyperLink id="HyperLink1" runat="server" NavigateUrl='<%# DataBinder.Eval(Container, "DataItem.Job No", "jobdetails.aspx?jobno={0}&KeepThis=true&TB_iframe=true&height=400&width=500") %>' 
Text='<%# DataBinder.Eval(Container, "DataItem.Job No") %>' CssClass="thickbox"></asp:HyperLink> 
</ItemTemplate> 
</asp:TemplateColumn>
</Columns>

Open in new window

0
 
LVL 2

Author Closing Comment

by:adaytay
ID: 31503842
Awesome.  #2 worked perfectly - thanks for the quick response, sorry I haven't got more points!!
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 22660748
I am glad I can help.
No worry about the points. I started here as a limited member, so I understand your situation.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
imap mails 1 25
Reading the web config for a running service on Windows 10 16 49
ASP.NET (VB) return a record 2 37
asp.net mvc , views, hidden values ? 2 16
Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question