Unable to get value of properity id object is null or undefined.

[Sonny]

I am have a user control in a parent page. The parent page has two RadGrids and the user control has one RadGrid. When an item is selected in one of the parent grids, the grid in the user control is updated. The UC grid uses batch editing, but both parent grid are read only. This all works, except a JavaScript error "Unable to get value of property 'id' object is null or undefined." which occurs in the Telerik.Web.UI.Grid.GridBatchEditingScripts.js file.

Between the two there are 4 files with lots of code. I would like to attach a zip file so that you can look at the code, but this forum will not allow it and because it seems to be a RadGrid JavaScipt error, I cannot isolate just where in the code the error is occurring. So I can't copy any code to this forum. Also there is no other JavaScript on the page or on the UC.

Does anyone have an idea of what might be causing this error or to at least give me some idea where to look?

Thanks,

~Sonny

[Sonny]

I also forgot to mention that I am using Telerik.web.UI version 2014.1.403.45

[Sonny]

After doing some research, I found that there where some compatibility issues in the past with Visual Studio and Internet Explorer. However, these where older versions of Telerik than what we're using. Does anyone know of any compatibility between Telerik .Net user controls and Visual Studio 2012 v11.0.61030.00 and/or IE9 v9.0.8112.16421?

[Konstantin Dikov]

Hello Sonny,

With the provided information only it will be difficult to guess what could be causing the problem. Nevertheless, could you please provide the markup of your editable RadGrid (in the user control) and any client-side code that you have related to it.

Additionally, could you please elaborate if the issue is replicated in all browsers or in IE only?

Looking forward to your reply.


Regards,
Konstantin Dikov
Telerik

[Tim]

Hello Konstantin,

     I am a developer working with Sonny on this problem. 

We have a menu that lists items on a aspx page that uses an ItemCommand Event to post back to the server.  On the same aspx page we a user control (ascx) page that also displays a grid.  The grid on the ASCX page is set to use GridEditMode.Batch.

The error we are seeing is when we click an "item" from the ASPX page's grid.  The ItemCommand Event should fire and post back to the server, but before that happens, we get a JavaScript error on the client side saying it is a Microsoft JScript runtime error: "Unable to get value of the property 'id': object is null or undefined." 

*****This error is being thrown from the Telerik.Web.UI.Grid.GridBatchEditingScripts.js*****

The line that throws the error is:

o=p.id.split("__")[1].charAt(0)==="-";

if(o&&n.InsertVisiblityMode==="AlwaysHidden" )

{return false;}

Not sure why this script is firing, but any feedback that could help would be great

[Clarence]

Hi Konstantin,

This is Sonny (I used the wrong account on my last posts. Sorry).

Here's the code you requested. There is no JavaScript code.

<telerik:RadGrid ID="AvailMgrRadGrid" runat="server" CssClass="Grid" EnableHeaderContextMenu="True" EnableViewState="true"
        GridLines="Both" Skin="Office2010Silver" Height="100%" >
        <MasterTableView ViewStateMode="Enabled" AllowCustomSorting="false" AllowNaturalSort="False" AllowSorting="false"
            AutoGenerateColumns="False" CssClass="Grid" EditMode="Batch" Width="100%" DataKeyNames="AvailabilityID">
            <CommandItemSettings ShowAddNewRecordButton="false" ShowExportToCsvButton="false" ShowCancelChangesButton="true"
                ShowSaveChangesButton="true" ShowExportToExcelButton="false" ShowExportToPdfButton="false" ShowExportToWordButton="false" />
            <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" />
            <ItemStyle BackColor="" />
            <DetailTables>
                <telerik:GridTableView AutoGenerateColumns="false" DataKeyNames="AvailabilityID,Scope"
                    HierarchyDefaultExpanded="true" EnableViewState="true" NoDetailRecordsText="No Record to Display" NoMasterRecordsText="No Record to Display"
                    ShowHeadersWhenNoRecords="true" EditMode="Batch" Width="100%">
                    <ParentTableRelation>
                        <telerik:GridRelationFields DetailKeyField="AvailabilityID" MasterKeyField="AvailabilityID" />
                        <telerik:GridRelationFields />
                    </ParentTableRelation>
                    <Columns>
                        <telerik:GridTemplateColumn HeaderText="Scope" DataField="Scope" UniqueName="Scope">
                            <ItemTemplate>
                                <asp:Label ID="Scope" runat="server" Text='<%# Eval("PmaptAvailability.Scope") == null ? Eval("Scope") : Eval("PmaptAvailability.Scope") %>' Visible="true"></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="TxtScope" MaxLength="300" runat="server" Text='<%# Eval("PmaptAvailability.Scope") == null ? Eval("Scope") : Eval("PmaptAvailability.Scope") %>' Visible="true"></asp:TextBox>
                                <br />
                            </EditItemTemplate>
                            <HeaderStyle Width="100%" />
                        </telerik:GridTemplateColumn>
                    </Columns>
                </telerik:GridTableView>
            </DetailTables>
            <Columns>
                <%--Original NTIRA Availability--%>
                <telerik:GridTemplateColumn DataField="OrigAvail" HeaderText="Original NTIRA Availability" UniqueName="OrigAvail">
                    <ItemTemplate>
                        <div id="origAvail" class="<%= availTitleStyleClass %>">
                            <asp:Label ID="OrigAvailLabel" runat="server"
                                Text='<%#  string.Concat(
                                            Eval("Hull.HullNumber"),
                                            " ",
                                            String.Format("{0:MM/dd/yy}", Eval("StartDate")),
                                            " - ",
                                            String.Format("{0:MM/dd/yy}", Eval("EndDate")),
                                            " ",
                                            Eval("AvailabilityType.AvailabilityTypeName"))
                                            %>'></asp:Label>
                        </div>
                    </ItemTemplate>
                    <HeaderStyle Width="250px" />
                </telerik:GridTemplateColumn>
                <%--NTIRA/LMA--%>
                <telerik:GridTemplateColumn HeaderText="NTIRA vs LMA" UniqueName="NtiraLmaID" DataField="NtiraLmaID" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="NtiraLma" runat="server" Text="Align"></asp:Label>
                    </ItemTemplate>
                    <HeaderStyle Width="100px" />
                </telerik:GridTemplateColumn>
                <%--Cancel or XFR--%>
                <telerik:GridTemplateColumn HeaderText="Cancel or XFR Planning Data" UniqueName="CancelXfr" DataField="CancelXfr" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="CancelXfr" runat="server" Text="N/A" Visible="true"></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:Label ID="LblCancelXfr" runat="server" Text="N/A" Visible="true"></asp:Label>
                        <telerik:RadDropDownList ID="DdlCancelXfr" runat="server" Width="115px"
                            OnSelectedIndexChanged="DdlCancelXfr_SelectionChanged" AutoPostBack="true"
                            Visible="false" Enabled="false">
                            <Items>
                                <telerik:DropDownListItem Text="Select to Cancel or Transfer" Value="0" />
                                <telerik:DropDownListItem Text="Cancel" Value="1" />
                                <telerik:DropDownListItem Text="Transfer" Value="2" />
                            </Items>
                        </telerik:RadDropDownList>
                        <br />
                    </EditItemTemplate>
                    <HeaderStyle Width="120px" Wrap="true" />
                </telerik:GridTemplateColumn>
                <%--LMA SOA--%>
                <telerik:GridTemplateColumn HeaderStyle-Width="90px" HeaderText="LMA SOA" UniqueName="LmaSoaCol" DataField="LmaSoaCol" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="LmaSoa" runat="server" Text='<%# Eval("PmaptAvailability.StartDate") == null ? Eval("StartDate", "{0:MM/dd/yy}") : Eval("PmaptAvailability.StartDate", "{0:MM/dd/yy}") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:Label ID="LblLmaSoa" runat="server" Text='<%# Eval("PmaptAvailability.StartDate") == null ? Eval("StartDate", "{0:MM/dd/yy}") : Eval("PmaptAvailability.StartDate", "{0:MM/dd/yy}") %>'></asp:Label>
                        <telerik:RadDatePicker ID="DpLmaSoa" runat="server" Calendar-Enabled="true" Calendar-PresentationType="Interactive"
                            Calendar-ViewStateMode="Enabled" DateInput-Enabled="false" DatePopupButton-Enabled="true" EnableEmbeddedSkins="true"
                            EnableScreenBoundaryDetection="true" Skin="Default" Width="90px" Visible="true" SelectedDate='<%# Eval("PmaptAvailability.StartDate") == null ? Eval("StartDate") : Eval("PmaptAvailability.StartDate") %>'>
                        </telerik:RadDatePicker>
                    </EditItemTemplate>
                    <HeaderStyle Width="110px" />
                </telerik:GridTemplateColumn>
                <%--LMA EOA--%>
                <telerik:GridTemplateColumn HeaderText="LMA EOA" UniqueName="LmaEoaCol" DataField="LmaEoaCol" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="LmaEoa" runat="server" Text='<%# Eval("PmaptAvailability.EndDate") == null ? Eval("EndDate", "{0:MM/dd/yy}") : Eval("PmaptAvailability.EndDate", "{0:MM/dd/yy}") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:Label ID="LblLmaEoa" runat="server" Text='<%# Eval("PmaptAvailability.EndDate") == null ? Eval("EndDate", "{0:MM/dd/yy}") : Eval("PmaptAvailability.EndDate", "{0:MM/dd/yy}") %>'></asp:Label>
                        <telerik:RadDatePicker ID="DpLmaEoa" runat="server" Calendar-Enabled="true" Calendar-PresentationType="Interactive"
                            Calendar-ViewStateMode="Enabled" DateInput-Enabled="false" DatePopupButton-Enabled="true" EnableEmbeddedSkins="true"
                            EnableScreenBoundaryDetection="true" Skin="Default" Width="90px" Visible="true"
                            SelectedDate='<%# Eval("PmaptAvailability.EndDate") == null ? Eval("EndDate") : Eval("PmaptAvailability.EndDate") %>'>
                        </telerik:RadDatePicker>
                    </EditItemTemplate>
                    <HeaderStyle Width="110px" />
                </telerik:GridTemplateColumn>
                <%--LANT PAC--%>
                <telerik:GridTemplateColumn HeaderText="LANT PAC" ReadOnly="false" UniqueName="Fleet" DataField="Fleet" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="Fleet" runat="server" Visible="true" Text='<%#Eval("PmaptAvailability.Fleet.Name") == null ? Eval("Hull.Fleet.Name") : Eval("PmaptAvailability.Fleet.Name")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:Label ID="LblFleet" runat="server" Text='<%#Eval("PmaptAvailability.Fleet.Name") == null ? Eval("Hull.Fleet.Name") : Eval("PmaptAvailability.Fleet.Name")%>'></asp:Label>
                        <telerik:RadDropDownList ID="DdlFleet" runat="server" DataTextField="Name" Width="60px" Visible="true" Enabled="true"
                            DataValueField="FleetID" DataSourceID="FleetObjectDataSource">
                        </telerik:RadDropDownList>
                        <br />
                    </EditItemTemplate>
                    <HeaderStyle Width="70px" />
                </telerik:GridTemplateColumn>
                <%--XFR AVAIL--%>
                <telerik:GridTemplateColumn HeaderText="XFR original data to this New NTIRA Avail" UniqueName="XfrAvail" DataField="XfrAvail" ItemStyle-HorizontalAlign="Center" HeaderStyle-Wrap="true">
                    <ItemTemplate>
                        <asp:Label ID="XfrAvail" runat="server" Text="N/A" Visible="true"></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:Label ID="LblXfrAvail" runat="server" Text="N/A" Visible="true"></asp:Label>
                        <telerik:RadDropDownList ID="DdlXfrAvail" runat="server"
                            Width="180px"
                            AppendDataBoundItems="True"
                            DataTextField="Display"
                            DataValueField="AvailID"
                            Visible="false" Enabled="false">
                            <Items>
                                <telerik:DropDownListItem Text="Select Avail to Xfr to" Value="0" />
                            </Items>
                        </telerik:RadDropDownList>
                    </EditItemTemplate>
                    <HeaderStyle Width="190px" Wrap="true" Height="40px" />
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <HeaderStyle CssClass="GridHeader" />
        <ItemStyle CssClass="GridRow" />
    </telerik:RadGrid>

As far as browsers go, we are in a closed, secured Intranet. The only browser allowed is IE 9, but they can set up a VM with IE 11 for me to test on maybe by the end of the day tomorrow. They plan on upgrading to IE 11 across the entire network in the next few weeks.

Let me know if there's anything more you need.

~Sonny

[Clarence]

Update: This error only occurs when the user control grid is in batch edit mode.

[Konstantin Dikov]

Hi Clarence,

First, please note that when you use Batch Editing, no Eval or Bind expression are allowed in the EditItemTemplate. With Batch Editing, the Batch Editing Manager will retrieve the value from the cell and will try to set that value to the editor (for simple scenarios). For complex templates you need to use the approach from the following help article:

• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/working-with-templates

As for the error in question, could you please test the same code with newer version of the suite (preferably the latest) and see if upgrading will resolve the problem.

Looking forward to your reply.
 

Regards,
Konstantin Dikov
Telerik