ClientEvents OnCommand cause Unable to get property 'showInsertItem' of undefined or null reference

[Jack]

I was trying to have the validation happening at client side by adding the OnCommand ClientEvents to the grid.  If invalid, the OnCommand will be cancelled.

 

However, after adding it in, it caused the Grid control to throw error "Unable to get property 'showInsertItem' of undefined or null reference" (can be viewed thru debug within IE).  This has caused the "Add new Record" button of the Grid not working.  If I take out the ClientEvents lines out, the affected function will be resumed.  The funny thing was that it seemed it only got problem with "OnCommand".  I tried few other, such as OnItemCreated, OnDoubleClick, without issues at all.

Any ideas?  Attached please find my code.

@ Control Language="C#" AutoEventWireup="false" CodeBehind="Data018_WRN_RecallQryByVin.ascx.cs"
    Inherits="HMSA.HinoConnect.UI.Web.CustomPageElements.Data018_WRN_RecallQryByVin" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<style type="text/css">
    .Dta018WrnRecallQdsp{
        color:red;
        width:100%;
    }
</style>

<script type="text/javascript">
    var searchedTxt = "";
    var hdnapiUrl;
    var hdnWebApiToken;

    function DspRadAjaxLoadingPanle(sender, _show) {
        var loadingPanel = $find("<%= Dta018WrnRecallQ_RadAjaxLoadingPanel.ClientID %>");

        if (_show) {
            loadingPanel.show(sender.get_id());
        }
        else {
            loadingPanel.hide(sender.get_id());
        }
    }//DspRadAjaxLoadingPanle

    function Dta018WrnRecallQEditTmpltVinRadcombo_RequestData(sender, eventArgs) {
        var _txt = sender.get_text();
        var _cnt = sender.get_items().get_count();

        //serial number must have length of 6 and last 5 are all numbers
        if (_txt.length != 6 || (searchedTxt == _txt && _cnt>0) || (_txt.length == 6 && !_txt.substring(1).match(/^\d+$/))) {
            eventArgs.set_cancel(true);
            return;
        }

        hdnWebApiToken = document.getElementById("<%=Dta018WrnRecallQ_webAPItoken.ClientID %>");
        hdnapiUrl = document.getElementById("<%=Dta018WrnRecallQ_apiUrl.ClientID %>");

        DspRadAjaxLoadingPanle(sender, true);

        $.ajax({
            url: hdnapiUrl.value + '/api/v1/Ids_infp07/GetVinBySearchToken/?SearchToken=' + _txt + '&DlrCode= &hmsastaff=Y',
            dataType: 'json',
            headers: {
                "Authentication": hdnWebApiToken.value
            },
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            crossDomain: true,

            success: function (data, textStatus, xhr) {
                DspRadAjaxLoadingPanle(sender, false);

                sender.clearItems();
                var recCount = 0;
                searchedTxt = _txt;

                $.each(data, function (key, item) {
                    var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                    var _vin = item._VIN_I7.trim();

                    comboItem.set_text(_vin);
                    comboItem.set_value(_vin);
                    sender.get_items().add(comboItem);
                    recCount++;
                });

                if (recCount > 0) {
                    sender.showDropDown();
                }
                return;
            },
            error: function (error, status, xhr) {
                DspRadAjaxLoadingPanle(sender, false);

                searchedTxt = '';
                var _ermsg = "error: ";

                if (error) {
                    if (error.responseText) {
                        _ermsg = _ermsg + error.responseText;
                    }
                }

                _ermsg = _ermsg + "; status: ";

                if (status) {
                    _ermsg = _ermsg + status;
                }

                _ermsg = _ermsg + "; xhr: ";

                if (xhr) {
                    _ermsg = _ermsg + xhr;
                }

                alert(_ermsg);

                return;
            }
        });//ajax

        eventArgs.set_cancel(true);
    }//Dta018WrnRecallQEditTmpltVinRadcombo_RequestData
</script>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function RaiseCommand(sender, eventArgs) {
                
                alert("Hi");
            }
        </script>
</telerik:RadCodeBlock>

<asp:PlaceHolder ID="ViewPlaceHolder" runat="server" Visible="false">
    <p>
        View mode</p>
    <asp:Label ID="SampleOutput" runat="server"></asp:Label>

    <div class="row">
            <p id="Dta018WrnRecallQ_radgrd_divMsgs" runat="server">
                <asp:Label ID="Dta018WrnRecallQ_radgrd_divMsgs_lbl1" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#FF8080">
                </asp:Label>
                <asp:Label ID="Dta018WrnRecallQ_radgrd_divMsgs_lbl2" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#00C000">
                </asp:Label>
            </p>
    </div> 

    <telerik:RadAjaxLoadingPanel runat="server" ID="Dta018WrnRecallQ_RadAjaxLoadingPanel" />

    <telerik:RadAjaxManager runat="server" ID="Dta018WrnRecallQ_radajaxmgr" DefaultLoadingPanelID="Dta018WrnRecallQ_RadAjaxLoadingPanel" ClientEvents-OnRequestStart="mngRequestStarted">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Dta018WrnRecallQ_radgrd">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Dta018WrnRecallQ_radgrd" LoadingPanelID="Dta018WrnRecallQ_RadAjaxLoadingPanel"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Dta018WrnRecallQ_radgrd_divMsgs"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>           
    </telerik:RadAjaxManager>

    <telerik:RadFormDecorator RenderMode="Lightweight" ID="Dta018WrnRecallQ_RadFormDecorator" runat="server" DecorationZoneID="Dta018WrnRecallQ_demo" DecoratedControls="All" EnableRoundedCorners="false" />

    <div id="Dta018WrnRecallQ_demo" class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="Dta018WrnRecallQ_radgrd" AutoGenerateColumns="false" AllowPaging="true" Skin="Silk"
             Width="40%" style="margin-left: auto !important; margin-right: auto !important;" OnNeedDataSource="Grid_NeedDataSource" OnUpdateCommand="Grid_UpdateCommand" 
            OnInsertCommand="Grid_UpdateCommand">
                    
            <MasterTableView CommandItemDisplay="Top" DataKeyNames="Vin" ClientDataKeyNames="Vin" InsertItemPageIndexAction="ShowItemOnLastPage">
                <CommandItemSettings AddNewRecordText="Add New Vin#" ShowRefreshButton="false" />
                
                <Columns>                       
                    <telerik:GridBoundColumn DataField="Vin" HeaderText="Vin #" ReadOnly="true"
                            ForceExtractValue="Always" ConvertEmptyStringToNull="true" />                 
                    <telerik:GridEditCommandColumn UniqueName="Dta018WrnRecallQ_GridEditCommandColumn" ButtonType="ImageButton"/>                  
                </Columns>

                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                        <table id="Dta018WrnRecallQ_edit_form_tmplt" style="border-collapse: collapse; border-spacing: 2px; padding: 1px; width: 100%; border-style:hidden;">
                            <tr>
                                <td>Vin #:</td>
                                <td>
                                    <telerik:radcombobox id="Dta018WrnRecallQ_edit_form_tmplt_vin" runat="server" Text='<%# Bind("Vin") %>' TabIndex="1" Width="100%"
                                        datatextfield="text" datavaluefield="value" AllowCustomText="true" EmptyMessage="Type serial number to search..."
                                        MarkFirstMatch="true" EnableLoadOnDemand="true" OnClientItemsRequesting ="Dta018WrnRecallQEditTmpltVinRadcombo_RequestData"/>
                                </td>
                                <td>
                                    <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                        runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'></asp:Button> &nbsp;
                                    <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
                                        CommandName="Cancel"></asp:Button>
                                </td>
                            </tr>       
                        </table>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
            
            <PagerStyle Mode="NextPrevAndNumeric" />   
            
            <ClientSettings>
                <ClientEvents OnCommand="RaiseCommand" />
            </ClientSettings>    
        </telerik:RadGrid><%--Dta018WrnRecallQ_radgrd--%>

        <label id="Dta018WrnRecall_grid_err" runat="server" class="Dta018WrnRecallQdsp">err</label> 
    </div><%--Dta018WrnRecallQ_demo--%>

    <asp:HiddenField ID="Dta018WrnRecallQ_apiUrl" runat="server"/>
    <asp:HiddenField ID="Dta018WrnRecallQ_webAPItoken" runat="server"/>
</asp:PlaceHolder><%--ViewPlaceHolder--%>

<asp:PlaceHolder ID="EditPlaceHolder" runat="server" Visible="false">
    <p>
        Edit mode (this is an optional mode in case you want publishers to be able to edit
        and save settings for this element).</p>
    Setting :
    <asp:TextBox ID="SampleSetting" runat="server" />
</asp:PlaceHolder>