Passing a rowindex to javascript function from Hyperlink

7 posts, 1 answers
  1. Patrick
    Patrick avatar
    24 posts
    Member since:
    Jun 2013

    Posted 20 Jun Link to this post

    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?  

  2. Vessy
    Admin
    Vessy avatar
    2040 posts

    Posted 25 Jun Link to this post

    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.
  3. Patrick
    Patrick avatar
    24 posts
    Member since:
    Jun 2013

    Posted 26 Jun in reply to Vessy Link to this post

    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>

  4. Answer
    Vessy
    Admin
    Vessy avatar
    2040 posts

    Posted 01 Jul Link to this post

    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.
  5. Patrick
    Patrick avatar
    24 posts
    Member since:
    Jun 2013

    Posted 01 Jul in reply to Vessy Link to this post

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

  6. Patrick
    Patrick avatar
    24 posts
    Member since:
    Jun 2013

    Posted 01 Jul in reply to Patrick Link to this post

    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!

  7. Vessy
    Admin
    Vessy avatar
    2040 posts

    Posted 01 Jul Link to this post

    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.
Back to Top