GridHyperlinkColumn client-side onclick

[Tim R]

I would be grateful for an example of how to wire-up some client-side javascript to the click event on a GridHyperlinkColumn. I have this markup:

 

 

 

 <MasterTableView>
 
<Columns>
 
<telerik:GridBoundColumn DataField="id" Visible="false" DataType="System.Int32"></telerik:GridBoundColumn>
 
<telerik:GridHyperlinkColumn DataTextField="companyname" DataNavigateUrlFields="companyURL" datatype="System.String">
 
</telerik:GridHyperlinkColumn>
 
</Columns>
 
</MasterTableView>

 

 

 

 

 

 

and I want to send the value of the DataNavigateUrlFields to a client-side javascript function when the hyperlink is clicked:

someClientSideFunction(  value of the DataNavigateUrlFields of the clicked item );

Thanks

[Lenny_shp]

I searched for the same need and it seems we have to use the GridTemplateColumn and use HyperLink control within it.

[Mira]

Hello,

Another way to achieve the desired functionality is to find the HyperLink in the GridHyperLink column and set its "onclick" attribute.

You can see how it is done in the sample project attached to this post.

Best wishes,
Mira
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gabe Silvarajoo]

The example is good but I have a grid that is created programatically in code behind and wish to implement an "onclick" function to open a RadWindow in the GridHyperLinkColumn. I have the latest definition of Telerik's Web UI (2011_2_719). Below is my RadGrid code in Code Behind

private RadGrid GridJobs(string groupTypeID)
    {
        RadGrid grid = new RadGrid();
        grid.MasterTableView.DataKeyNames = new string[] { "Requisition_Number" };
        grid.MasterTableView.NoMasterRecordsText = "No position posted at the moment. Please check back later.";
        grid.ClientSettings.EnableRowHoverStyle = true;
        grid.AllowSorting = true;
        grid.AllowPaging = false;
        grid.AutoGenerateColumns = false;

        //Add columns
        string headerText = string.Empty;

        DataTable dtJobs = GetJobs(groupTypeID);
        foreach (DataColumn dc in dtJobs.Columns)
        {
            headerText = dc.ColumnName.ToLower().Replace('_', ' ');
            headerText = string.Format("<strong>{0}</strong>", CultureInfo.CurrentCulture.TextInfo.ToTitleCase(headerText));

            if (dc.ColumnName.ToLower() == "title")
            {
                GridHyperLinkColumn linkColumn = new GridHyperLinkColumn();
                linkColumn.HeaderText = headerText;
                linkColumn.DataTextField = dc.ColumnName;
                linkColumn.DataNavigateUrlFields = new string[] { "Requisition_Number" };
                //Need to implement an 'onClick' to open a RadWindow here
                linkColumn.DataNavigateUrlFormatString = "popupdetails.aspx?id={0}";
                grid.MasterTableView.Columns.Add(linkColumn);
            }
            else
            {
                GridBoundColumn boundColumn = new GridBoundColumn();
                boundColumn.DataField = dc.ColumnName;
                boundColumn.HeaderText = headerText;
                grid.MasterTableView.Columns.Add(boundColumn);
            }
        }

        //Populate Grid
        grid.DataSource = dtJobs;
        grid.DataBind();

        return grid;
    }

Based on the code above, is there a way to implement an onClick function in GridColumn to open a RadWindow? Please advise. Thanks

Gabe

[Shinu]

Hello Gabe,

You can try the following approach to open a window from HyperLinkColumn by attaching ItemdataBound event handler.
C#:

void grid_ItemDataBound(object sender, GridItemEventArgs e)
 {
   if (e.Item is GridDataItem)
     {
        GridDataItem item = (GridDataItem)e.Item;
        HyperLink link = (HyperLink)item["ColumnUniqueName"].Controls[0];
        int index = item.ItemIndex;
        link.Attributes.Add("onclick", "window.radopen(\"Window2.aspx?userId=" + index + "\",\"NewWindow\"); return false;");
     }
 }

Thanks,
Shinu.

[vvvv]

I am working on a page which uses RadGrid to display details. I want a particular column of the radgrid to be hyperlinked. On click of that particular column, I need to pick additional fields from the same row and display it in another page. How can I achieve this? I would really appreciate some help.

Thanks 

[Gabe Silvarajoo]

I have a sample project but Telerik dont allow me to send .zip files here. So I there next best thing is an example from the Grid Demo Grid Demo

Hope this helps.

Gabe

[vvvv]

Thanks Gabe. This is how I tried the hyperlink.

aspx page
-----------
<telerik:GridHyperLinkColumn HeaderText="fieldName" DataTextField="fieldName" UniqueName="fieldName" 
                         Target="_blank"></telerik:GridHyperLinkColumn>

code behind
---------------
protected void RadGrid2_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem dataItem = (GridDataItem)e.Item;


            HyperLink link = (HyperLink)dataItem["fieldName"].Controls[0];
            int index = dataItem.ItemIndex;
            //link.Attributes.Add("onclick", "window.radopen(\"ProjectDisplay.aspx?fieldName=" + index + "\",\"NewWindow\"); return false;");
            link.NavigateUrl = "ProjectDisplay.aspx?projectName=" + dataItem[fieldName"].Text + 
             "&fieldType=" + dataItem["fieldType"].Text + "&riskStatement=" + dataItem["riskStatement"].Text + "&riskStatus=" + dataItem["riskStatus"].Text;
        }
    }

Also I have separate page with few label where I try to catch these variables through request.query string. But it doesn't work. The column is not even hyperlinked in the radgrid display page. Any suggestions on where am I going wrong?

Thanks

[Gabe Silvarajoo]

Easier to create the main grid in code behind.
For Default.aspx page

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
        <Windows>
            <telerik:RadWindow
                id="RadWindow1"
                runat="server"
                showcontentduringload="true"
                title="Job Details"
                KeepInScreenBounds="true"
                AutoSize="true"
                behaviors="Default">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <script type="text/javascript">
    //<![CDATA[
        function openRadWin(productid) {
            radopen("default2.aspx?id=" + productid, "RadWindow1");
        }
    //]]>
    </script>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

Default.aspx.cs

protected void Page_Init(object sender, EventArgs e)
    {
        RadGrid grid = GridProducts();
        PlaceHolder1.Controls.Add(grid);
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    private DataTable GetProducts()
    {
        using (dal d = new dal("dB"))
        {
            return d.GetRecords("select productid, productname from products order by productname");
        }
    }

    private RadGrid GridProducts()
    {
        RadGrid grid = new RadGrid();
        grid.MasterTableView.DataKeyNames = new string[] { "productid" };
        grid.MasterTableView.NoMasterRecordsText = "No position posted at the moment. Please check back later.";
        grid.ClientSettings.EnableRowHoverStyle = true;
        grid.AllowSorting = true;
        grid.AllowPaging = false;
        grid.AutoGenerateColumns = false;
        grid.ItemDataBound += new GridItemEventHandler(RadGrid_ItemDataBound);

        //Add columns
        string headerText = string.Empty;

        DataTable dtProducts = GetProducts();
        foreach (DataColumn dc in dtProducts.Columns)
        {
            headerText = dc.ColumnName.ToLower().Replace('_', ' ');
            headerText = string.Format("<strong>{0}</strong>", CultureInfo.CurrentCulture.TextInfo.ToTitleCase(headerText));

            if (dc.ColumnName.ToLower() == "productname")
            {
                GridHyperLinkColumn linkColumn = new GridHyperLinkColumn();
                linkColumn.HeaderText = headerText;
                linkColumn.DataTextField = dc.ColumnName;
                linkColumn.DataNavigateUrlFields = new string[] { "productid" };
                linkColumn.DataNavigateUrlFormatString = "Default2.aspx?id={0}";
                grid.MasterTableView.Columns.Add(linkColumn);
            }
            else
            {
                GridBoundColumn boundColumn = new GridBoundColumn();
                boundColumn.DataField = dc.ColumnName;
                boundColumn.HeaderText = headerText;
                grid.MasterTableView.Columns.Add(boundColumn);
            }
        }

        //Populate Grid
        grid.DataSource = dtProducts;
        grid.DataBind();

        return grid;
    }

    protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            ((e.Item as GridDataItem)["productname"].Controls[0] as HyperLink).Attributes["onclick"] = string.Format("openRadWin('{0}'); return false;",
                (e.Item as GridDataItem).OwnerTableView.DataKeyValues[e.Item.ItemIndex]["productid"].ToString());
        }
    }

Default2.aspx (Rad window popup)

<Telerik:RadGrid ID="RadGrid1" runat="server">
       </Telerik:RadGrid>

Default2.aspx.cs

private string productId
   {
       get
       {
           return !String.IsNullOrEmpty(Convert.ToString(Request.QueryString["id"])) ? Convert.ToString(Request.QueryString["id"]) : string.Empty;
       }
   }
   protected void Page_Load(object sender, EventArgs e)
   {
       using (dal d = new dal("dB"))
       {
           if (!String.IsNullOrEmpty(productId))
           {
               RadGrid1.DataSource = d.GetRecords("select * from products where productid = @pid", new SqlParameter("pid", productId));
               RadGrid1.DataBind();
           }

       }
   }

Note: You will need to replace the "dal" code to whatever database connection code you have right now that returns a datatable of the query.

Lastly, you'll need to declare this on both pages

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

Hope this helps.

Gabe

[vvvv]

Thanks Gabe. I will give it a try.