Microsoft JScript runtime error: 'document.getElementById(...)' error in rowcontextmenu

Question

Hi,

I am using rowcontextmenu in radgrid. I did this using demos that provided by telerik. When i right click on radgrid row I am getting error like Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object. I dont what causing this error. can anyone help me to fix this error.

Thanks

               <script>
        function RowContextMenu(sender, eventArgs) {
            var menu = $find("<%=RadMenu1.ClientID %>");
            var evt = eventArgs.get_domEvent();

            if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                return;
            }

            var index = eventArgs.get_itemIndexHierarchical();
            document.getElementById("radGridClickedRowIndex").value = index;

            sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

            menu.show(evt);

            evt.cancelBubble = true;
            evt.returnValue = false;

            if (evt.stopPropagation) {
                evt.stopPropagation();
                evt.preventDefault();
            }
        }

    </script>

<table style="width: 98%">
        <tr>
            <td colspan="2">
                <asp:Label runat="server" Font-Bold="true" Font-Size="14pt" ID="lblTskName"></asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                </telerik:RadScriptManager>
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <ClientEvents OnRequestStart="onRequestStart" />
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="rg200">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="rg200" LoadingPanelID="RadAjaxLoadingPanel1" />
                                <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="RadMenu1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="rg200" LoadingPanelID="RadAjaxLoadingPanel1" />
                                <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
                </telerik:RadAjaxLoadingPanel>
                <telerik:RadGrid ID="rg200" runat="server" AutoGenerateColumns="False" PageSize="30"
                    Height="550px" OnNeedDataSource="rg200_NeedDataSource" Width="100%" AllowPaging="True"
                    AllowSorting="True" AllowMultiRowSelection="True" EnableHeaderContextMenu="True"
                    GridLines="None" EnableHeaderContextFilterMenu="True" AllowMultiRowEdit="True"
                    AllowFilteringByColumn="True" OnPreRender="rg200_PreRender" OnItemCreated="rg200_ItemCreated"
                    EnableViewState="False" OnUpdateCommand="rg200_UpdateCommand" AllowAutomaticDeletes="true"
                    AllowAutomaticInserts="true" AllowAutomaticUpdates="true">
                    <HeaderStyle Height="20px" BackColor="#004000" Font-Size="8pt" Font-Bold="True" ForeColor="White"
                        HorizontalAlign="Center" BorderColor="White" BorderWidth="1px" />
                    <ExportSettings IgnorePaging="true" ExportOnlyData="true">
                        <Pdf AllowModify="false" AllowPrinting="true" PageBottomMargin="" PageFooterMargin=""
                            PageHeaderMargin="" PageHeight="11in" PageLeftMargin="" PageRightMargin="" PageTopMargin=""
                            PageWidth="14in" />
                    </ExportSettings>
                    <MasterTableView GridLines="None" DataKeyNames="orderId" CommandItemDisplay="Top"
                        EditMode="InPlace">
                        <CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true"
                            ShowExportToCsvButton="true" ShowExportToPdfButton="true" ShowAddNewRecordButton="false" />
                        <Columns>
                            <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="3%"
                                ItemStyle-Width="3%">
                                <HeaderStyle Width="3%"></HeaderStyle>
                                <ItemStyle Width="3%"></ItemStyle>
                            </telerik:GridClientSelectColumn>
                            <telerik:GridBoundColumn UniqueName="sId" HeaderText="sId" DataField="sId" ReadOnly="true"
                                Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="orderId" HeaderText="orderId" ReadOnly="true"
                                Visible="false" DataField="orderId">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Customer Name" HeaderText="Customer Name" DataField="Customer Name"
                                ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Market Name" HeaderText="Market Name" DataField="Market Name"
                                ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="LOB" HeaderText="LOB" DataField="LOB" ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Headend Name" HeaderText="Headend Name" DataField="Headend Name"
                                ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Project Name" HeaderText="Project Name" DataField="Project Name"
                                ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Site Name" HeaderText="Site Name" DataField="Site Name"
                                ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Task Status" HeaderText="Task Status" DataField="Task Status"
                                ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <%--<telerik:GridTemplateColumn UniqueName="Clarify Account Nbr" HeaderText="Clarify Account Nbr"
                                DataField="Clarify Account Nbr">
                                <ItemTemplate>
                                    <asp:Label ID="lblClarifyAccountNbr" Text='<%# Eval("Clarify Account Nbr") %>' runat="server"></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtClarifyAccountNbr" Text='<%# Eval("Clarify Account Nbr") %>'
                                        runat="server"></asp:TextBox>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>--%>
                            <telerik:GridBoundColumn UniqueName="Clarify Account Nbr" HeaderText="Clarify Account Nbr"
                                DataField="Clarify Account Nbr">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Site ID" HeaderText="Site ID" DataField="Site ID">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Quote ID" HeaderText="Quote ID" DataField="Quote ID">
                            </telerik:GridBoundColumn>
                            <telerik:GridCheckBoxColumn UniqueName="EDP Created?" HeaderText="EDP Created?" DataField="EDP Created?">
                            </telerik:GridCheckBoxColumn>
                            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" Visible="false">
                            </telerik:GridEditCommandColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings EnableRowHoverStyle="true" ReorderColumnsOnClient="false" AllowDragToGroup="false"
                        AllowColumnsReorder="True">
                        <Scrolling AllowScroll="true" EnableVirtualScrollPaging="false" UseStaticHeaders="true" />
                        <Selecting AllowRowSelect="True"></Selecting>
                        <Resizing AllowRowResize="true" AllowColumnResize="True" EnableRealTimeResize="True"
                            ResizeGridOnColumnResize="False"></Resizing>
                        <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
                    </ClientSettings>
                    <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true"></PagerStyle>
                </telerik:RadGrid>
                <telerik:RadContextMenu ID="RadMenu1" runat="server" OnItemClick="RadMenu1_ItemClick"
                    EnableRoundedCorners="true" EnableShadows="true">
                    <Items>
                        <telerik:RadMenuItem Text="Edit Task" />
                        <telerik:RadMenuItem Text="Complete Task" />
                    </Items>
                </telerik:RadContextMenu>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
        </tr>
    </table>

codebehind

    protected void rg200_PreRender(object sender, EventArgs e)
{
    rg200.MasterTableView.GetColumnSafe("RowIndicator").Display = false;

    if (rg200.EditIndexes.Count > 0 || rg200.MasterTableView.IsItemInserted)
    {
        GridColumn col1 = rg200.MasterTableView.GetColumn("EditCommandColumn") as GridColumn;
        col1.Visible = true;
    }
    else
    {
        GridColumn col2 = rg200.MasterTableView.GetColumn("EditCommandColumn") as GridColumn;
        col2.Visible = false;
    } 

}

protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)
{
    int radGridClickedRowIndex;

    radGridClickedRowIndex = Convert.ToInt32(Request.Form["radGridClickedRowIndex"]);

    switch (e.Item.Text)
    {
        case "Edit Task":
            rg200.Items[radGridClickedRowIndex].Edit = true;
            break;
        case "Complete Task":
            rg200.MasterTableView.PerformDelete(rg200.Items[radGridClickedRowIndex]);
            break;
    }
}

Answer 1

Hi, I haven't tried the example, but I do not think that radGridClickedRowIndex is a DOM element.

You can use document.getElementById only on HTML elements.

Another thought... in the ASPX world, server side controls are often given different names than in the ID field when the page is compiled. If this is the case, you can try this: document.getElementByID('<%=radGridClickedRowIndex.ClientID >');

In your case, though, I'm pretty sure that the radGridClickedRowIndex is not a DOM element.