Client-side edit, update, delete and insert with RadControls for ASP.NET AJAX, WebServices and LINQ

13 Comments

• Laurent 28 May
  Thank you for this excellent post! Some points: 1. I'm very pleased to see how to create new rows on the client-side. 2. A small issue under IE7 (not FF2) that might be a generic RadGrid issue: - Insert a new employee but fill only one field (its first name for example) - Click Add >> On the RadGrid newly created row, the selection borders are displayed only for the filled fields. It occurs also when you empty a field of an existing row. 3. Scrolling issue: When tableView.selectItem(i); is called, the item might not be displayed when there are too many items (more than 13 is my case) since the tableView is not scrolled to show the inserted item. Anyhow, it is a great sample. Thanks again. BR, Laurent
• Vlad 28 May
  Thanks Laurent! I've just updated our file browser example (http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/FileBrowser/DefaultCS.aspx) with similar technique and now both RadGrid and RadTreeView will be populated on client. You can check the JavaScript file in the code viewer for more info about grid rows creation. As for these issues you are right. Missing borders can be fixed with a nbsp in the cell and probably I can call scrollIntoView() to get the selected item in visible area. Thank you once again for the feedback and let me know if you have any other questions! Vlad
• Laurent 31 May
  Hello, I've got two more issues : 1. currentRowIndex should be initialized to 0. Currently hitting Delete without having selected any row uses null as currentRowIndex. 2. More important: Add 2 new employees. Then delete these two employees. Add a new employee. When you click Add, you get a JavaScript error in Telerik.Web.UI.GridTableView.prototype.clearSelectedItems, because this._owner._selectedItemsInternal has previously not been correcty updated and contains in index 0 a row that doesn't exist anymore. BR, Laurent
• Fredrik Gunne 05 Jun
  Hi, Vlad! Very interesting articles on client-side data-binding. It would fit our needs perfectly, if one thing was possible: To not only update a RadGrid on the client by adding new rows, but creating the columns, etc on the client. To see why this is interesting, consider our scenario: We have an application where the user's input determines the data-source (i.e. tables or views) that the RadGrid should be bound to, so we don't know the columns when the page is loaded. Right now, we are forced to performe a postback to the server each time that user changes the input because the input could potentially change the data-source. If there was a client-side "DataBind", we wouldn't have to perform the postback, just call a webservice to get the data. Would this be very complex to implement? We are using some of the more advanced features of the RadGrid, such as hierarchical grids, editable grids, RadGridDropDown, etc. Again, thanks for great articles! /Fredrik
• Vlad 10 Jun
  Thank you for the feedback Laurent! We will fix these problems definitely for the built-in Q2 client-side data-binding. @Fredrik - We will do our best to implement as many as possible client-side data-binding features for Q2. I will post an update once we are ready.
• fnfzone 16 Jun
  very important article. It will help people a lot specially who are working in ajax based application
• John roze 16 Jul
  Hello There i was wondering how you declare the objects when you call the create function. i try followin it but doesnt work var employee = { EmployeeID : null, FirstName : null, LastName : null, Title : null, TitleOfCourtesy : null, BirthDate : null, Notes : null, create : function() { var obj = new Object(); obj.EmployeeID = ""; obj.FirstName = ""; obj.LastName = ""; obj.Title = ""; obj.TitleOfCourtesy = ""; obj.BirthDate = ""; obj.Notes = ""; return obj; i try to add some new variable like phone but it does work( obj.Photo) can you help me
• Vlad 17 Jul
  Hi John, Do you get any errors? You can open a support ticket with small example demonstrating the problem and I will gladly help you.
• john roze 17 Jul
  Actually i cannot add a new object what you have in your sample create : function() { var obj = new Object(); obj.EmployeeID = ""; obj.FirstName = ""; obj.LastName = ""; obj.Title = ""; obj.TitleOfCourtesy = ""; obj.BirthDate = ""; obj.Notes = ""; obj.Photo = ""; ----- i want to add a photo but when i type obj. there isnt a Photo only (FirstName,LastName,etc). return obj; what is the problem? where can i define the photo so i can add a obj.Photo please help i really want to learn
• Vlad 18 Jul
  You need to modify Employee class on the server-side also.
• John Roze 19 Jul
  what is the name of the class Vlad? what file do i need to open to see the class? Thanx
• stevenao 05 Feb
  Is there anyway to perform an inline or InPlace editing?
  
• Mahesh 23 Mar
  Any chance we can do inline or inplace editing using this ? That would be really useful. ? Pls let us know.