[Solved] Following edit-on-double-click example - double click throws javascript error

[Tim Petlock]

I'm trying to do something similar to the edit on double click example with a radgrid whose columns are not defined on the aspx page.  In the codebehind I'm binding it to a datatable and hiding a couple of columns that are used as database keys.

I have the javascript codeblock on my page and it gets called when I try to doubleclick  -but that produces a javascript error.

When I look at the line in the page source where the error is being reported it's happening here -

function RowDblClick(sender, eventArgs) {
                editedRow = eventArgs.get_itemIndexHierarchical();
                $find("").editItem(editedRow);
            }

Specifically it fails at the last step.  The error is:  'null' is null or not an object.

For what it's worth this page has a master page and the RadScriptManager control is on that master page.  I'm thinking that's the cause.  I've no idea how to work around this.

[Tim Petlock]

Ok, it has nothing to do with the master page - but still throws the same error.  I got the demo code working inside my site with that same masterpage attached and it ran fine.  The only difference I can come up with is the example binds data to the grid at runtime.  It's inside a radajax panel but the placement of that has no effect on the javascript error.

The page is attached.

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPageTR.master" AutoEventWireup="false" CodeFile="SoldBundleEditor2.aspx.vb" Inherits="SoldBundleEditor2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<table width="800px">
<tr>
<td width="400px">
<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Hay" Width="390px" Height="500px"
            OnNodeExpand="RadTreeView1_NodeExpand" OnNodeClick="RadTreeView1_NodeClick"
            OnNodeCollapse="RadTreeView1_NodeCollapse" OnNodeDataBound="RadTreeView1_NodeDataBound"
            OnContextMenuItemClick="RadTreeView1_ContextMenuItemClick">
            <DataBindings>
            <telerik:RadTreeNodeBinding expanded="False" />
            </DataBindings>
            </telerik:RadTreeView>
</td>
<td width="400px">
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="400px">
        <asp:MultiView ID="MultiView1" runat="server">

            <asp:View ID="View1" runat="server">

                <table style="width: 100%">
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text="Label" CssClass="subhead"></asp:Label>
                        </td>
                        <td>
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;</td>
                        <td>
                            <asp:Button ID="Button1" runat="server" Text="Button" CssClass="subhead" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server" CssClass="subtext" Width="139px"></asp:TextBox>
                        </td>
                        <td>
                            <asp:Button ID="Button2" runat="server" CssClass="subhead" Text="Button" />
                        </td>
                    </tr>
                </table>
            </asp:View>
            <asp:View ID="View2" runat="server">



            <table style="width: 100%">
                <tr>
                <td colspan="3">
                    <asp:Label ID="Label6" runat="server" CssClass="subhead" Text="Label"></asp:Label>
                </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label2" runat="server" CssClass="subhead" Text="Manufacturer"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label3" runat="server" CssClass="subhead" Text="ProductCode"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label4" runat="server" CssClass="subhead" Text="Quantity"></asp:Label>
                    </td>
                </tr>
                <tr>
                <td>
                    <telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true" Skin="Hay"
                        EmptyMessage="Type a manufacturer name" EnableLoadOnDemand="true" ShowMoreResultsBox="true"
                        EnableVirtualScrolling="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">

                    </telerik:RadComboBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server" CssClass="subtext"></asp:TextBox>
                </td>
                    <td>
                        <telerik:RadComboBox ID="RadComboBox2" Runat="server" OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged"
                        autopostback="true" EmptyMessage ="Type Mfr. first" Skin="Hay">
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                </tr>

                <tr>
                    <td colspan="3">
<telerik:RadGrid ID="RadGrid2" runat="server" Skin="Hay" Visible="False" GridLines="None">
                        <ClientSettings AllowRowsDragDrop="true"><Selecting AllowRowSelect="true" /></ClientSettings>
                        <MasterTableView DataKeyNames="rowguid">

                            <NoRecordsTemplate><div style="height:30px; cursor: pointer;">No items to view.</div></NoRecordsTemplate>
                        </MasterTableView>
                        </telerik:RadGrid>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label5" runat="server" CssClass="subhead" Text="Label"></asp:Label>
                    </td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td colspan="3">

                        <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Hay" allowrowsdragdrop="true"
                            OnRowDrop="RadGrid1_RowDrop" GridLines="None" AllowAutomaticUpdates="true" ShowStatusBar="true" AllowPaging="true" PageSize="7">
                            <MasterTableView tablelayout="Fixed" DataKeyNames="SBN_rowguid" EditMode="InPlace">

                            <NoRecordsTemplate><div style="height:30px; cursor: pointer;">No items to view.</div></NoRecordsTemplate>
                            </MasterTableView>
                            <ClientSettings AllowRowsDragDrop="true"><Selecting AllowRowSelect="true" />
                            <ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick"
                                OnGridCreated="GridCreated" OnCommand="GridCommand" />
                            </ClientSettings>
                        </telerik:RadGrid>
                        <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="180px" />
                        <telerik:GridNumericColumnEditor ID="GridNumericColumnEditor1" runat="server" NumericTextBox-Width="50px" />

                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                </table>

            </asp:View>
        </asp:MultiView>
        </telerik:RadAjaxPanel>


</td>
</tr>
<tr>
<td colspan="2">
<asp:TextBox ID="txtHdnParentID" runat="server"></asp:TextBox>

<asp:TextBox ID="txtHdnUniqueID" runat="server"></asp:TextBox>
</td></tr>
</table>










            <telerik:RadAjaxManager runat="server">
                <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="TextBox1" />

                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    <telerik:AjaxUpdatedControl ControlID="TextBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid2">
                    <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
                    <telerik:AjaxUpdatedControl ControlID="TextBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadTreeView1" />
                            <telerik:AjaxUpdatedControl ControlID="txtHdnParentID" />
                            <telerik:AjaxUpdatedControl ControlID="txtHdnUniqueID" />
                            <telerik:AjaxUpdatedControl ControlID="MultiView1" />
                            <telerik:AjaxUpdatedControl ControlID="TextBox3" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
                                            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
        <!--
            var hasChanges, inputs, dropdowns, editedRow;

            function RowClick(sender, eventArgs) {
                if (editedRow && hasChanges) {
                    hasChanges = false;
                    if (confirm("Update changes?")) {

                        $find("<%= RadGrid1.MasterTableView.ClientID %>").updateItem(editedRow);
                    }
                }
            }

            function RowDblClick(sender, eventArgs) {
                confirm("RowDBLCLICK?");
                editedRow = eventArgs.get_itemIndexHierarchical();
                $find("<%= RadGrid1.MasterTableView.ClientID %>").editItem(editedRow);
            }

            function GridCommand(sender, args) {
                confirm("GridCommnad?");
                if (args.get_commandName() != "Edit") {
                    editedRow = null;
                }
            }

            function GridCreated(sender, eventArgs) {
                confirm("GridCreated?");
                var gridElement = sender.get_element();
                var elementsToUse = [];
                inputs = gridElement.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    var lowerType = inputs[i].type.toLowerCase();
                    if (lowerType == "hidden" || lowerType == "button") {
                        continue;
                    }

                    Array.add(elementsToUse, inputs[i]);
                    inputs[i].onchange = TrackChanges;
                }

                dropdowns = gridElement.getElementsByTagName("select");
                for (var i = 0; i < dropdowns.length; i++) {
                    dropdowns[i].onchange = TrackChanges;
                }

                setTimeout(function() { if (elementsToUse[0]) elementsToUse[0].focus(); }, 100);
            }

            function TrackChanges(e) {
                hasChanges = true;
            }
     -->
    </script>
    </telerik:RadCodeBlock>

</asp:Content>

[Tim Petlock]

It *is* related to the page having a masterpage. 

This works, but I don't want to hard-code it...

            function RowDblClick(sender, eventArgs) {
                editedRow = eventArgs.get_itemIndexHierarchical();
                $find("ctl00_ContentPlaceHolder1_RadGrid1_ctl00").editItem(editedRow);
            }

For whatever reason it's not able to resolve <%= RadGrid1.MasterTableView.ClientID %>

[Veli]

Hi Tim,

Try getting the client object of the MasterTableView using:

var master = $find('<%= RadGrid1.ClientID %>').get_masterTableView();

Kind regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.