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

RadGrid UpdatePanel: Cannot CRUD...

2 Answers 189 Views

General Discussions

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

Bonnie asked on 29 Jan 2020, 08:33 PM

I am using the example found here: https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/automatic-crud-operations/defaultcs.aspx and a dummy datasource.

When I try to delete, I get this: 7617|updatePanel|RadGrid1Panel| and cannot delete.

Adding and editing are not working properly either.

I must say I am brand new to this & any help would be much appreciated.

001.<%@ Page Language="C#" %>

002.

003.<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

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

005.<%@ Import Namespace="System.Linq" %>

006.<%@ Import Namespace="System" %>

007.<%@ Import Namespace="System.Collections.Generic" %>

008.<%@ Import Namespace="System.Data" %>

009.<%@ Import Namespace="System.Drawing" %>

010.<%@ Import Namespace="System.Globalization" %>

011.<%@ Import Namespace="System.Security.Principal" %>

012.<%@ Import Namespace="System.Xml" %>

013.<%@ Import Namespace="System.Xml.Serialization" %>

014.<%@ Import Namespace="System.Web.UI" %>

015.<%@ Import Namespace="System.Globalization" %>

016.

017.<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

018.<script type="text/javascript">

019. function reSizeDropZone() {

020. var dropZone = document.getElementById('DROPZONE');

021. var attachmentsContainer = document.getElementById('ruAttachmentsListContainer');

022. if (attachmentsContainer.scrollHeight != dropZone.clientHeight) {

023. dropZone.style.height = attachmentsContainer.scrollHeight;

024. }

025. }

026.</script>

027.<script runat="server">

028.

029. protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)

030. {

031. if (e.Item is GridEditableItem && e.Item.IsInEditMode)

032. {

033. if (!(e.Item is GridEditFormInsertItem))

034. {

035. GridEditableItem item = e.Item as GridEditableItem;

036. GridEditManager manager = item.EditManager;

037. GridTextBoxColumnEditor editor = manager.GetColumnEditor("processID") as GridTextBoxColumnEditor;

038. editor.TextBoxControl.Enabled = false;

039. }

040. }

041. }

042. protected void RadGrid1_ItemInserted(object source, GridInsertedEventArgs e)

043. {

044. if (e.Exception != null)

045. {

046.

047. e.ExceptionHandled = true;

048. SetMessage("Customer cannot be inserted. Reason: " + e.Exception.Message);

049.

050. }

051. else

052. {

053. SetMessage("New customer is inserted!");

054. }

055. }

056. private void DisplayMessage(string text)

057. {

058. RadGrid1.Controls.Add(new LiteralControl(string.Format("<span style='color:red'>{0}</span>", text)));

059. }

060.

061. private void SetMessage(string message)

062. {

063. gridMessage = message;

064. }

065.

066. private string gridMessage = null;

067.

068. protected void RadGrid1_PreRender(object sender, EventArgs e)

069. {

070. if (!string.IsNullOrEmpty(gridMessage))

071. {

072. DisplayMessage(gridMessage);

073. }

074. }

075.

076. protected void RadGrid1_InsertCommand(object sender, GridCommandEventArgs e)

077. {

078. if (e.Item is GridEditableItem)

079. {

080. GridEditableItem editedItem = e.Item as GridEditableItem;

081. //here editedItem.SavedOldValues will be the dictionary which holds the

082. //predefined values

083.

084. //Prepare new dictionary object

085. Hashtable newValues = new Hashtable();

086. e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem);

087. //the newValues instance is the new collection of key -> value pairs

088. //with the updated ny the user data

089. }

090. }

091.

092.</script>

093.

094.<!DOCTYPE html>

095.<html xmlns="http://www.w3.org/1999/xhtml">

096.<head runat="server">

097. <title>Appropriation Request</title>

098.

099. <link href="Styles/Styles.css" rel="stylesheet" />

100. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

101.</head>

102.<body>

103.

104. <form id="form1" runat="server">

105.

106. <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

107. <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

108. <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

109. <AjaxSettings>

110. <telerik:AjaxSetting AjaxControlID="RadGrid1">

111. <UpdatedControls>

112. <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

113. </UpdatedControls>

114. </telerik:AjaxSetting>

115. </AjaxSettings>

116. </telerik:RadAjaxManager>

117.

118. <asp:UpdatePanel runat="server" ID="upPan" UpdateMode="Always">

119. <ContentTemplate>

120.

121. <div class="demo-container" id="mainContainer">

122. <%--HEADER--%>

123. <div style="position: absolute; top: 0; width: 98vw; height: 5vh; padding-top: 2vh; padding-left: 1vw;">

124. <div style="position: absolute;">

125. <img src="ASDF Logo.png" alt="ASDF" height="42" width="250"

126. style="float: left;" /><br style="clear: both" />

127. </div>

128. <div style="width: 98vw; position: absolute; text-align: center; vertical-align: top; padding-top: 9px;">

129. <asp:Label CssClass="titleDisplay" runat="server" ID="header" Style="color: rgb(66,66,66); font-weight: bold; font-size: 2em;">Accounts Receivable Adjustment</asp:Label>

130. </div>

131. <div style="position: absolute; top: 0.5vw; right: 1vw; text-align: right;">

132. <a href="https://www.wordtech.com/videos.html" target="_blank" style="text-decoration: none;">

133. <img src="PoweredBy.png" height="35" alt="Powered By DocMinder® WORD-TECH" />

134. </a>

135. <br />

136. <asp:Label runat="server" ID="lblUserName" Style="display: inline; font-weight: bold;" Text="User:"></asp:Label>

137. <telerik:RadTextBox runat="server" ID="txtUser" WrapperCssClass="ectbw2" CssClass="ectb" Enabled="false" Text="[User Name Display Here]"></telerik:RadTextBox>

138. </div>

139. </div>

140. <%--DIVIDER--%>

141. <div>

142. <div style="border-bottom: 3px solid rgb(217,217,217); width: 99vw; margin-top: calc(5vh + 42px);"></div>

143. </div>

144. <%--CONTENT--%>

145.

146. <div

style="margin: 3vh 10vw 0 10vw; width: 80vw; display: grid; grid-template-areas: 'Market TodaysDate' 'AgencyName OriginalInvoiceTotalNetAmount'

147. 'AgencyExternalID TotalNetAmount' 'AssetsAndItems AssetsAndItems' 'AdditionalCommentsAssets AdditionalCommentsAssets'

148. 'History History' 'Submit Submit';">

149. <div style="display: inline-grid; margin: 0 1em 0 0; grid-area: Market;">

150. <asp:Label runat="server" ID="lblMarket" Text="Market:" Style="color: rgb(4,59,79); font-size: 11pt; font-weight: 500;"></asp:Label>

151. <telerik:RadTextBox WrapperCssClass="ectbw" CssClass="ectb" runat="server" ID="txtMarket" EmptyMessage="Select/Enter only 1 Market"></telerik:RadTextBox>

152. </div>

153. <div style="display: inline-grid; margin: 0 0 0 1em; grid-area: TodaysDate;">

154. <asp:Label runat="server" ID="lblTodaysDate" Text="Today's Date:" Style="color: rgb(4,59,79); font-size: 11pt; font-weight: 500;"></asp:Label>

155. <telerik:RadTextBox Enabled="false" WrapperCssClass="ectbw" CssClass="ectb" runat="server" ID="txtTodaysDate" EmptyMessage="Todays Date"></telerik:RadTextBox>

156. </div>

157. <div style="display: inline-grid; margin: 1em 1em 0 0; grid-area: AgencyName;">

158. <asp:Label runat="server" ID="lblAgencyName" Text="Agency Name:" Style="color: rgb(4,59,79); font-size: 11pt; font-weight: 500;"></asp:Label>

159. <telerik:RadTextBox WrapperCssClass="ectbw" CssClass="ectb" runat="server" ID="txtAgencyName" EmptyMessage="Select/Enter only 1 Agency Name"></telerik:RadTextBox>

160. </div>

161. <div style="display: inline-grid; margin: 1em 0 0 1em; grid-area: OriginalInvoiceTotalNetAmount;">

162. <asp:Label runat="server" ID="lblOriginalInvoiceTotalNetAmount" Text="Original Invoice(s) Total Net Amount" Style="color: rgb(4,59,79); font-size: 11pt; font-weight: 500;"></asp:Label>

163. <telerik:RadNumericTextBox Type="Currency" Enabled="false" WrapperCssClass="ectbw" CssClass="ectb" runat="server" ID="txtOriginalInvoiceTotalNetAmount" EmptyMessage="This amount will automatically be calculated based on the entries below"></telerik:RadNumericTextBox>

164. </div>

165. <div style="display: inline-grid; margin: 1em 1em 0 0; grid-area: AgencyExternalID;">

166. <asp:Label runat="server" ID="lblAgencyExternalID" Text="Agency External ID:" Style="color: rgb(4,59,79); font-size: 11pt; font-weight: 500;"></asp:Label>

167. <telerik:RadTextBox WrapperCssClass="ectbw" CssClass="ectb" runat="server" ID="txtAgencyExternalID"></telerik:RadTextBox>

168. </div>

169. <div style="display: inline-grid; margin: 1em 0 0 1em; grid-area: TotalNetAmount;">

170. <asp:Label runat="server" ID="lblTotalNetAmount" Text="Total Net Amount:" Style="color: rgb(4,59,79); font-size: 11pt; font-weight: 500;"></asp:Label>

171. <telerik:RadNumericTextBox Type="Currency" Enabled="false" WrapperCssClass="ectbw" CssClass="ectb" runat="server" ID="txtTotalNetAmount" EmptyMessage="This amount will automatically be calculated based on the entries below"></telerik:RadNumericTextBox>

172. </div>

173. </div>

174.

175. <div class="demo-container no-bg" id="gridContainer">

176.

177. <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="EntityDataSourceCustomers" AllowAutomaticUpdates="true" AllowAutomaticInserts="true" AllowAutomaticDeletes="true" AllowSorting="true" OnItemCreated="RadGrid1_ItemCreated" OnItemInserted="RadGrid1_ItemInserted" OnPreRender="RadGrid1_PreRender" OnInsertCommand="RadGrid1_InsertCommand">

178. <PagerStyle Mode="NextPrevAndNumeric" />

179. <MasterTableView DataSourceID="EntityDataSourceCustomers" AutoGenerateColumns="False"

180. DataKeyNames="processID" CommandItemDisplay="Top">

181. <Columns>

182.

183. <telerik:GridEditCommandColumn UniqueName="EditCommandColumn">

184. </telerik:GridEditCommandColumn>

185.

186. <telerik:GridBoundColumn DataField="processID" HeaderText="Process ID" SortExpression="processID"

187. UniqueName="processID" Visible="false" MaxLength="5">

188. </telerik:GridBoundColumn>

189. <telerik:GridBoundColumn DataField="propertyStation" HeaderText="Property Station" SortExpression="propertyStation"

190. UniqueName="propertyStation">

191. </telerik:GridBoundColumn>

192. <telerik:GridBoundColumn DataField="accountExecutive" HeaderText="Account Executive" SortExpression="accountExecutive"

193. UniqueName="accountExecutive">

194. </telerik:GridBoundColumn>

195. <telerik:GridBoundColumn DataField="advertiser" HeaderText="Advertiser" SortExpression="advertiser"

196. UniqueName="advertiser">

197. </telerik:GridBoundColumn>

198. <telerik:GridBoundColumn DataField="invoiceDate" HeaderText="Invoice Date" SortExpression="invoiceDate"

199. UniqueName="invoiceDate">

200. </telerik:GridBoundColumn>

201. <telerik:GridBoundColumn DataField="invoiceNum" HeaderText="Invoice #" SortExpression="invoiceNum"

202. UniqueName="invoiceNum">

203. </telerik:GridBoundColumn>

204. <telerik:GridBoundColumn DataField="orderNum" HeaderText="Order #" SortExpression="orderNum"

205. UniqueName="orderNum">

206. </telerik:GridBoundColumn>

207. <telerik:GridBoundColumn DataField="adjustmentType" HeaderText="Adjustment Type" SortExpression="adjustmentType"

208. UniqueName="adjustmentType">

209. </telerik:GridBoundColumn>

210. <telerik:GridBoundColumn DataField="reasonCode" HeaderText="Reason Code" SortExpression="reasonCode"

211. UniqueName="reasonCode">

212. </telerik:GridBoundColumn>

213. <telerik:GridBoundColumn DataField="paymentAnnotation" HeaderText="Payment Annotation" SortExpression="paymentAnnotation"

214. UniqueName="paymentAnnotation">

215. </telerik:GridBoundColumn>

216. <telerik:GridBoundColumn DataField="originalInvoiceNetAdjustment" HeaderText="Original Invoice Net Adjustment" SortExpression="originalInvoiceNetAdjustment"

217. UniqueName="originalInvoiceNetAdjustment">

218. </telerik:GridBoundColumn>

219. <telerik:GridBoundColumn DataField="adjustmentNetAmount" HeaderText="Adjustment Net Amount" SortExpression="adjustmentNetAmount"

220. UniqueName="adjustmentNetAmount">

221. </telerik:GridBoundColumn>

222. <telerik:GridBoundColumn DataField="purpose" HeaderText="Purpose" SortExpression="purpose"

223. UniqueName="purpose">

224. </telerik:GridBoundColumn>

225.

226. <telerik:GridButtonColumn Text="Delete" CommandName="Delete" />

227.

228. </Columns>

229. </MasterTableView>

230. </telerik:RadGrid>

231. </div>

232. </ContentTemplate>

233. </asp:UpdatePanel>

234.

235. <asp:SqlDataSource ID="EntityDataSourceCustomers" runat="server" ConnectionString="User ID=asdf;Integrated Security=True;Data Source=asdftest;Initial Catalog=ASDF" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM web_ASDFGrid;"></asp:SqlDataSource>

236.

237. </form>

238.</body>

239.</html>

2 Answers, 1 is accepted

answered on 03 Feb 2020, 01:40 PM

RadGrid-Automatic-CRUD.zip

Hi Bonnie,

Thank you for your interest in using the Telerik UI for ASP.NET AJAX.

It's alright, we all had begun at the basics, then time and experience made us better.

Let me give you a few quick highlights on this case scenario:

The RadGrid controls can be bound in different ways, and that depends on the business requirements, see Telerik RadGrid Data Binding Basics. The demo you mentioned uses the Declarative Binding technique with a Declarative DataSource control, specifically the EntityDataSource, but the Automatic Operations work with all DataSource controls, however, they require additional configuration.

Generally speaking, these DataSource controls require additional commands to work. For instance, if you would like them to extract the data from a database or database context, you'll need to define a command for Selecting.

In case of an SqlDataSource control, the SelectCommand is used to query the database:

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT [OrderID], [OrderDate], [Freight], [ShipName], [ShipCountry] FROM [Orders]">
</asp:SqlDataSource>

This will only query the database for the records. If you would like to Insert, Update, or Delete, you will need to define commands for those as well.

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    InsertCommand="INSERT INTO [Orders] ([OrderDate], [Freight], [ShipName], [ShipCountry]) VALUES (@OrderDate, @Freight, @ShipName, @ShipCountry)"
    SelectCommand="SELECT [OrderID], [OrderDate], [Freight], [ShipName], [ShipCountry] FROM [Orders]"
    UpdateCommand="UPDATE [Orders] SET [OrderDate] = @OrderDate, [Freight] = @Freight, [ShipName] = @ShipName, [ShipCountry] = @ShipCountry WHERE [OrderID] = @OrderID"
    DeleteCommand="DELETE FROM [Orders] WHERE [OrderID] = @OrderID">
</asp:SqlDataSource>

These commands tell the DataSource Control, how to interact with the database when the command is called by the RadGrid.

Once you have all the commands configured, you will also need to tell the Grid, that you want to use the Automatic Operations by enabling the Automatic Insert/Update/Delete operations.

<telerik:RadGrid ID="RadGrid1" runat="server"
    DataSourceID="SqlDataSource1"
    AllowAutomaticInserts="true"
    AllowAutomaticUpdates="true"
    AllowAutomaticDeletes="true">
</telerik:RadGrid>

The EntityDataSource control, on the other hand, works a little differently due to the EntityFramework. This does not require special queries as opposed to the SqlDataSource control. It receives the object (a record to be inserted, updated or deleted) from the Grid and it calls the Add(), Remove() functions then saves changes using SaveChanges() method.

<asp:EntityDataSource ID="EntityDataSourceCustomers" runat="server" ConnectionString="name=NorthwindReadWriteEntities"
    DefaultContainerName="NorthwindReadWriteEntities" 
    EntitySetName="Customers" OrderBy="it.[ContactName]"
    EntityTypeFilter="Customer" 
    EnableFlattening="False" 
    EnableInsert="True" 
    EnableUpdate="True"
    EnableDelete="True"> 
</asp:EntityDataSource>

I have attached a fully runnable sample project demonstrating the Automatic CRUD operations using SqlDataSource control. The DataBase is an .MDF file in the App_Data folder.

Please download the sample and test it out to see it in action. Feel free to make changes, experiment on it, that would clarify a lot of questions that you might have in your head now.

Please let me know if you have any questions about configuring the Telerik controls.

I look forward to hearing from you.

Kind regards,
Attila Antal
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.