This is a migrated thread and some comments may be shown as answers.

Client Error on Grid

2 Answers 215 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mike asked on 01 Mar 2017, 08:48 PM

I have a grid with a Button Column to handle deleting an item in the grid, and every time I click the X, I'm prompted with "are you sure?" [which is good], but if I say "ok" to the delete confirmation, there is a JS error being thrown:

Uncaught TypeError: Cannot read property 'toString' of null

in a ScriptResource. The grid is loaded in a modal RadWindow.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<script type="text/javascript">

function CloseAndRebind(args) {

GetRadWindow().BrowserWindow.refreshGrid(args);

GetRadWindow().close();

}

function CancelEdit() {

GetRadWindow().close();

}

</script>

<asp:Label ID="lblKeywordName" runat="server"></asp:Label>

<br />

<div id="gridContainer">

<telerik:RadAjaxManager runat="server" ID="radAjaxManager">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rgLists">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgLists" LoadingPanelID="ralpLoading" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="ralpLoading" RenderMode="Lightweight"></telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="rgLists" runat="server" AutoGenerateColumns="False" AllowFilteringByColumn="True" AllowPaging="False" AllowSorting="True" Skin="Metro" Width="100%"

ShowStatusBar="True" GridLines="None" OnNeedDataSource="rgLists_OnNeedDataSource" OnItemCommand="rgLists_OnItemCommand"

OnItemDataBound="rgLists_OnItemDataBound" OnInsertCommand="rgLists_OnInsertCommand" OnUpdateCommand="rgLists_OnUpdateCommand"

OnDeleteCommand="rgLists_OnDeleteCommand" RenderMode="Lightweight">

<ClientSettings AllowColumnsReorder="False" EnableRowHoverStyle="True" EnablePostBackOnRowClick="True" AllowRowsDragDrop="True">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="False"></Selecting>

<Scrolling UseStaticHeaders="True"></Scrolling>

</ClientSettings>

<GroupingSettings CaseSensitive="False"></GroupingSettings>

<MasterTableView Width="100%" GridLines="None" DataKeyNames="keyword_id,code_id" ClientDataKeyNames="keyword_id,code_id" EnableHeaderContextMenu="True" CommandItemDisplay="Top"

InsertItemPageIndexAction="ShowItemOnCurrentPage">

<NoRecordsTemplate>There are no value pairs found.</NoRecordsTemplate>

<CommandItemSettings ShowAddNewRecordButton="True" ShowCancelChangesButton="False" ShowSaveChangesButton="False" ShowRefreshButton="True"

AddNewRecordText="Add New Code"></CommandItemSettings>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">

<HeaderStyle Width="35px"></HeaderStyle>

<ItemStyle VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn ConfirmText="Remove this code?" ConfirmDialogType="RadWindow" ConfirmTitle="Remove" ButtonType="ImageButton"

CommandName="Delete" ConfirmDialogHeight="160px" ConfirmDialogWidth="250px" UniqueName="DeleteColumn">

<HeaderStyle Width="35px"></HeaderStyle>

<ItemStyle VerticalAlign="Top"></ItemStyle>

</telerik:GridButtonColumn>

<telerik:GridBoundColumn DataField="keyword_id" HeaderText="KeywordId" UniqueName="KeywordId" Visible="False"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="code_id" HeaderText="CodeId" UniqueName="CodeId" Visible="False"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="description" HeaderText="Text" UniqueName="Text"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="code_value" HeaderText="Value" UniqueName="Value"></telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="inactive" HeaderText="Inactive Flag" UniqueName="Inactive"></telerik:GridCheckBoxColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table class="form">

<tr>

<th style="text-align: left;">Key:</th>

<td style="text-align: left;">

<telerik:RadTextBox runat="server" ID="radKey" EmptyMessage="Key" RenderMode="Lightweight"></telerik:RadTextBox>

</td>

</tr>

<tr>

<th style="text-align: left;">Value:</th>

<td style="text-align: left;">

<telerik:RadTextBox runat="server" ID="radValue" EmptyMessage="Value" RenderMode="Lightweight"></telerik:RadTextBox>

</td>

</tr>

<tr>

<th style="text-align: left;">Inactive:</th>

<td style="text-align: left;">

<telerik:RadCheckBox runat="server" ID="radInactive" AutoPostBack="False" RenderMode="Lightweight" />

</td>

</tr>

<tr>

<td colspan="2"> </td>

</tr>

<tr>

<td colspan="2">

<telerik:RadButton runat="server" ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'

CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' RenderMode="Lightweight" />

<telerik:RadButton runat="server" ID="btnCancel" Text="Cancel" CommandName="Cancel" CausesValidation="False" RenderMode="Lightweight" />

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</div>

<p></p>

<div style="float: left; margin-left: 10px">

<telerik:RadButton ID="btnUpdate" runat="server" OnClick="btnUpdate_Click" Text="Save" SingleClick="True" Width="100px" RenderMode="Lightweight" />

<telerik:RadButton ID="btnCancel" runat="server" OnClick="btnCancel_OnClick" Text="Cancel" Width="100px" CausesValidation="False" RenderMode="Lightweight" />

</div>

<telerik:RadWindowManager runat="server" ID="rwmError"></telerik:RadWindowManager>

</asp:Content>

The odd thing is, I use this approach in other web apps and have no issues. Any ideas?

2 Answers, 1 is accepted

Accepted

answered on 06 Mar 2017, 11:11 AM

Hi Mike,

We are aware of this issue. This is a bug in version R1 2017 - DeleteCommand event does not fire with ConfirmDialogType="RadWindow". You can try to upgrade to version 2017 R1 SP1 to resolve the issue.

Alternatively, you can remove the ConfirmDialogType property and use the default window confirmation:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.