select row client side on hyperlink click

[msingh]

I've a radgrid for ajax (Q1 2008) with client setting AllowRowSelect="True" and client event OnRowClick="RowClick".

the grid has a template column containing a link which opens a radwindow. when this link is clicked, rowclick event is not fired. however, explicitly clicking on the other part of same cell does fires the event.
what am i doing wrong here??

this works just fine in my other project which is using radgrid for asp.net.

what i'm trying to accomplish is when a link is clicked, that row should be selected at client side.
any help is appreciated...

[Princy]

Hi,

Try the following approach to select a row on clicking the HyperLink in a GridTemplateColumn.

ASPX:

<telerik:GridTemplateColumn UniqueName="Tempcol" >
        <ItemTemplate>
          <asp:HyperLink ID="HyperLink1" runat="server" Text="Grid" NavigateUrl="~/minegrid.aspx" ></asp:HyperLink>
        </ItemTemplate>
        </telerik:GridTemplateColumn>

CS:

 protected void RadGrid2_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item1 = (GridDataItem)e.Item;
            HyperLink hyplnk = (HyperLink)item1["Tempcol"].FindControl("HyperLink1");
            hyplnk.Attributes.Add("OnClick", "return Click('"+ item1.ItemIndex +"');");
        }
    }

JS:

 <script type="text/javascript" language="javascript" >
     function Click(indx)
     {
      var RadGrid2 = $find("<%= RadGrid2.ClientID %>");
      RadGrid2.get_masterTableView().get_dataItems()[indx].set_selected("true");
     }
  </script>

Thanks
Princy.

[msingh]

This could probably work. However, in Classic version RadGrid, I didn't had to do all this. following code alone took care of selecting a row when any of the link in that row is clicked.

Javascript: 

<script type="text/javascript">
function RowClick(index)
{
  var grid = window["<%= radgrid1.ClientID %>"];
  va rowControl = grid.MasterTableView.Rows[index].Control;
  grid.MasterTableView.SelectRow(rowControl,true);
  return false;
}
</script>

      

aspx: <ClientEvents OnRowClick="RowClick" />
EnableAjax="True" in this grid.

Why is this not working RadGrid Ajax version. I also used the RowClick(sender, eventargs) format... but either of the function doesn't fire when a link in that row is clicked.
Is there something that I'm missing in ajax version? or this functionality is not available in this version??

I've too many links to work with in the grid, and I don't want to play w/ workarounds to get this simple functionality to work.

[Sebastian]

Hi msingh,

In order to migrate your client logic to the ASP.NET AJAX version of RadGrid, review the topic from the online documentation dedicated to facilitate this very process:

http://www.telerik.com/help/aspnet-ajax/grdmigrationtoprometheus.html

and this online demo which illustrates the same approach with the ASP.NET AJAX counterpart of the control:

http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridAndMenu/DefaultCS.aspx?product=grid

In a nutshell, your code should be similar to this one:

<script type="text/javascript">
function RowClick(sender, eventArgs)
{
  var grid = $find("<%= radgrid1.ClientID %>");
  va rowControl = grid.get_masterTableView().get_dataItems()[index].get_element();
  grid.get_masterTableView().selectItem(rowControl,true);
  return false;
}
</script>

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[msingh]

I tried the code from the link. The function does get called when i click the row. but not when a html hyperlink in the row is clicked. below is my code:

script

<telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">

</telerik:RadScriptManager>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server" >

<script type="text/javascript">

function RowClick(sender, args)

{

alert(

"row click called");

var grid = $find("<%= gvInward.ClientID %>");

var rowControl = grid.get_masterTableView().get_dataItems()[args.get_itemIndexHierarchical()].get_element();

grid.get_masterTableView().selectItem(rowControl,

true);

return false;

}

</script>

</telerik:RadScriptBlock>


RADGRID: 

<

telerik:RadGrid ID="gvInward" runat="server" AllowPaging="True" AllowSorting="True"

AutoGenerateColumns="False" DataSourceID="ObjectDS_Inward"

GridLines="Vertical" Width="800px"

Skin="Web20" AllowAutomaticDeletes="True" AllowAutomaticUpdates="True" AllowAutomaticInserts="True"

OnItemDataBound="gvInward_ItemDataBound"

ondeletecommand="gvInward_DeleteCommand">

<ClientSettings>

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowClick="RowClick" />

</ClientSettings>

<MasterTableView DataKeyNames="InwardID" DataSourceID="ObjectDS_Inward"

GridLines="None">

<RowIndicatorColumn>

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn UniqueName="Actions">

<ItemTemplate>

<asp:LinkButton ID="btnDelete" runat="server" CommandName="Delete" Text="Delete" />

&nbsp;

<asp:LinkButton ID="btnEdit" runat="server" CommandName="Edit" Text="Edit" />

&nbsp;

<a id="lnkCreateOutward" href="javascript:OpenWindow('CreateOutward.aspx?InwardID=<%# Eval("InwardID") %>', 650,450)">Outward</a>

</ItemTemplate>

<ItemStyle Width="120px" />

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="InwardID" DataType="System.Int64" HeaderText="Inward#"

ReadOnly="True" SortExpression="InwardID" UniqueName="InwardID" Visible="True"

ItemStyle-Width="40px">

<ItemStyle Width="40px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="InwardDateTime" DataType="System.DateTime" HeaderText="Date/Time"

ReadOnly="True" SortExpression="InwardDateTime" UniqueName="InwardDateTime">

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Remarks" HeaderText="Remarks" SortExpression="Remarks"

UniqueName="Remarks">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

[Sebastian]

Hi msingh,

Indeed you are right and I believe this is the expected behavior since you are not clicking a table cell itself but rather a control inside this row.

If you would like to select the row when pressing a link in the grid item, consider intercepting the OnClientClick event of the link button and passing the index of the clicked record inside the OnClientClick handler. Thus you will be able to select the grid row in the same manner.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[msingh]

how can i achieve the same thing when using GridHyperLinkColumn? there is no client side click event.  

[Vlad]

Hi msingh,

You can handle ItemCreated event, find the HyperLink control and attach desired event:

if(e.Item is GridDataItem)
{
    ((HyperLink)((GridDataItem)e.Item)["YourColumnUniqueName"].Controls[0]).Attributes["onclick"] = "your click function"; // you can pass here e.Item.ItemIndexHierarchical for client-side selectItem() method.
}

Sincerely yours,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Manoj]

I have similar issue,

I have a radgrid MasterTableView which is having DetailTables like Master Child grid.

If i click on Master row the details related to my Master data will be displayed below. but here is what the problem is
when i click on Master row row click event is firing, also in my master row i have a column order_id which is a hyperlink

my requirement is when i click on that i want to navigate to other page with the order_ID.

How can i acheive this functionality?

[Sebastian]

Hello Manoj,

To cancel the hierarchy expansion when clicking the hyperlinks in the grid and navigate to a different page only (fetching the order_ID value), consider the solution presented in this code library thread:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/detecting-edit-insert-click-client-side-and-cancelling-row-selection-on-edit.aspx

(see the second part concerning how to prevent selection on edit action)

Kind regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Manoj]

Thank you.
It worked..

[Ren]

<script type="text/javascript" language="javascript" >

function Click(indx)

{

var RadGrid2 = $find("<%= RadGrid2.ClientID %>");

RadGrid2.get_masterTableView().get_dataItems()[indx].set_selected("true");

}

</script>  This works for Master table. How do I select rows in Child Table?

[Tsvetina]

Hello Ren,

You can access the child table views of a hierarchy using the get_nestedViews() collection of each GridDataItem. Then, you can get their dataitems and select the needed one.

If you want to traverse all child items to perform the selection, you can use a modification of the following script:

<script type="text/javascript">
    function Click() {
        var grid = $find('<%=RadGrid1.ClientID %>');
        var masterTable = grid.get_masterTableView();
        traverseChildTables(masterTable);
    }

    function traverseChildTables(gridTableView) {
        var dataItems = gridTableView.get_dataItems();
        for (var i = 0; i < dataItems.length; i++) {
            if (dataItems[i].get_nestedViews().length > 0) {
                var nestedView = dataItems[i].get_nestedViews()[0];
                //here you can access the nested table's data items using nestedView.get_dataItems()...
                traverseChildTables(nestedView);
            }
        }
    }
</script>

Best wishes,
Tsvetina
the Telerik team