Passing a rowindex to javascript function from Hyperlink

[Patrick]

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?  

[Vessy]

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

[Patrick]

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>

[Vessy]

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

[Patrick]

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();

[Patrick]

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!

[Vessy]

Hi,

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

Regards,
Vessy
Progress Telerik