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

1 posts, 0 answers
  1. Jack
    Jack avatar
    1 posts
    Member since:
    Aug 2017

    Posted 31 Jul 2017 Link to this post

    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>

Back to Top