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

by Vladimir Enchev | Comments 13
Continuing my previous post regarding RadGrid client-side data-binding, I've made small example on how to perform edit, update, delete and insert using web services, LINQ and RadControls.



Live Demo | Download

,
Senior Technical Architect

13 Comments

Laurent
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
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
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
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
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
very important article. It will help people a lot specially who are working in ajax based application
John roze
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
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
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
You need to modify Employee class on the server-side also.
John Roze
what is the name of the class Vlad? what file do i need to open to see the class? Thanx
stevenao
Is there anyway to perform an inline or InPlace editing?
Mahesh
Any chance we can do inline or inplace editing using this ? That would be really useful. ? Pls let us know.

Comments

  1.    
      
      
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)
Read more articles by Vladimir Enchev - or - read latest articles in Developer Tools