This is a migrated thread and some comments may be shown as answers.

Passing a rowindex to javascript function from Hyperlink

6 Answers 92 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 20 Jun 2019, 07:19 PM

I have a hyperlink within a Radgrid which opens up a RadWindow for the user. 

 

                                <telerik:GridTemplateColumn HeaderText="Id" ReadOnly="true" SortExpression="Lookup" UniqueName="Lookup">
                                    <ItemTemplate>
                                        <asp:HyperLink ID="hlWorkOrderId" Text='<%#Eval("Lookup")%>' NavigateUrl='<%#String.Format("javascript:openWindow({0});", Eval("WorkOrderId"))%>' Enabled='<%#String.IsNullOrEmpty(CurrentUser).Equals(False).ToString%>' runat="server" />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>

The user is requesting that when they click on the hyperlink, they want that row in the grid highlighted.   How can I pass the selected row index to the javascript function in the Hyperlink?  

6 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 25 Jun 2019, 01:43 PM
Hi Patrick,

You can enable the Row selection of the Grid and access the index of the current row through the Container object like follows:
<telerik:RadGrid ID="gvUBItems" runat="server" RenderMode="Lightweight" ...>
    <FilterMenu EnableTextHTMLEncoding="false"></FilterMenu>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView>
        <Columns>
            ...
            <telerik:GridTemplateColumn HeaderText="Id" ReadOnly="true" SortExpression="Lookup" UniqueName="Lookup">
                <ItemTemplate>
                    <asp:HyperLink ID="hlWorkOrderId" Text='<%#Eval("Lookup")%>' NavigateUrl='<%#String.Format("javascript:openWindow({0}, {1});", Eval("WorkOrderId"), Container.ItemIndex)%>' Enabled="true" runat="server" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
and then set the row with this index as selected:
function openWindow(WorkOrderId, rowIndex) {
    var tableView = $find("gvUBItems").get_masterTableView();
    tableView.selectItem(rowIndex);
    //...
}


Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Patrick
Top achievements
Rank 1
answered on 26 Jun 2019, 01:32 PM

The row is being passed to the javascript function but it now creates a new issue.  In the function I normally open a rad window which adding the code to selectItem before the opening of the radwindow keeps it from opening (and doesn't highlight/select the row)  If I put the selectItem after the RadWindow the row is never highlighted.  Am I expecting too much to highlight, then open the rad window? 

 

    <telerik:RadCodeBlock ID="rcb" runat="server">
        <script type="text/javascript" src="Scripts/jquery.js"></script>
        <script type="text/javascript" src="Scripts/BlockUI.js"></script>
        <script type="text/javascript">
var popUpWindow;
            function openWindow(workOrderId,rowIndex) {
                var tableView = $find("rgPMWorkOrders").get_masterTableView();
                tableView.selectItem(rowIndex);

                var url = new String("Detail.aspx?fullscreen=true&WorkOrderId=" + workOrderId);
popUpWindow = window.open(url, 'work_order_detail', 'toolbar=no,location=no,scrollbars=yes,width=920,height=700');
                popUpWindow.focus();
                setTimeout("checkWindow()", 100);
}
function checkWindow() {
if (popUpWindow.closed == false) {
setTimeout("checkWindow()", 100);
}
else {
                    //Refresh parent after child window is closed.
<%--<%=ClientScript.GetPostBackEventReference(btnSubmit, True)%>;--%>
<%=ClientScript.GetPostBackEventReference(btnSubmitFromClose, True)%>;
}
}

            function blockDataUI() {
                var dataDiv = $get("dataDiv");
                $(dataDiv).block({ message: 'Preparing documents for printing...', overlayCSS: { backgroundColor: '#000', opacity: 0.2 } });
            }

        </script>
    </telerik:RadCodeBlock>

0
Accepted
Vessy
Telerik team
answered on 01 Jul 2019, 09:09 AM
Hi Patrick,

I tested the provided setup and the row is highlighted successfully at my end when the window is opened. Can you verify that there are no any JavaScript errors thrown at your end when the problem occurs? 

For convenience, I am attaching my test page to this reply so you can examine it at your end.

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Patrick
Top achievements
Rank 1
answered on 01 Jul 2019, 01:06 PM

Uncaught TypeError: Cannot read property 'get_masterTableView' of null
    at openWindow (PMWorkOrders.aspx:22)
    at <anonymous>:1:1

I assume it doesn't like this line:

var tableView = $find("rgPMWorkOrders").get_masterTableView();

0
Patrick
Top achievements
Rank 1
answered on 01 Jul 2019, 01:17 PM

I found that issue.   I changed from this:

var tableView = $find("rgPMWorkOrders").get_masterTableView();

to this:

var tableView = $find("<%=rgPMWorkOrders.ClientID%>").get_masterTableView();

and now it is working!  Thank you for your help!

0
Vessy
Telerik team
answered on 01 Jul 2019, 02:00 PM
Hi,

You are welcome, Patrick - I am glad everything is working as desired now :)

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Patrick
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Patrick
Top achievements
Rank 1
Share this question
or