Client-side edit, update, delete and insert with RadControls for ASP.NET AJAX, WebServices and LINQ Tuesday, May 27, 2008 by Vladimir Enchev | Comments 13 Email to a friend 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 Vladimir Enchev, Senior Technical Architect Email to a friend 13 Comments Laurent 28 May 2008 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 2008 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 2008 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 2008 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 2008 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 2008 very important article. It will help people a lot specially who are working in ajax based application John roze 16 Jul 2008 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 2008 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 2008 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 2008 You need to modify Employee class on the server-side also. John Roze 19 Jul 2008 what is the name of the class Vlad? what file do i need to open to see the class? Thanx stevenao 04 Feb 2009 Is there anyway to perform an inline or InPlace editing? Mahesh 23 Mar 2011 Any chance we can do inline or inplace editing using this ? That would be really useful. ? Pls let us know. Comments Comment Apply CSS Class RadEditor hidden textarea RadEditor - please enable JavaScript to use the rich text editor. Name Click to add Email Click to add (optional, emails won't be shown on public pages) Your URL Click to add (optional) Read more articles by Vladimir Enchev - or - read latest articles in Developer Tools
Laurent 28 May 2008 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 2008 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 2008 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 2008 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 2008 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 2008 very important article. It will help people a lot specially who are working in ajax based application
John roze 16 Jul 2008 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 2008 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 2008 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
John Roze 19 Jul 2008 what is the name of the class Vlad? what file do i need to open to see the class? Thanx
Mahesh 23 Mar 2011 Any chance we can do inline or inplace editing using this ? That would be really useful. ? Pls let us know.