Hello,
I want to utilize the Rad grid control on a web page which is heavily used for the data entry work. The way the user wants the grid to work is that they want to add all the records and then click a "Save All" button which will insert all the newly added data to the SQL server database. By doing so they want to prevent the post back / Ajax request to the server for every new record that is added and thereby save the data entry time.
Also, the number of new records to be added is not fixed, so when the user clicks on the tab key on the last cell of the new record a new row should get created and it should happen on the client side without hitting the server.
Is it possible to do this using Rad grid control? I have seen a demo where tool tip is used to achieve similar functionality but the users are not very confortable with that design approach. They want to do the data entry directly on the datagrid.
Please advice.
Regards,
Rajiv



| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="test" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; width: 100%; margin: 0px; |
| padding: 0px; overflow: hidden;"> |
| <head runat="server"> |
| <title></title> |
| <style> |
| /***********************************Copy of FormDecorator.Office2007.css********************************//* FORM DECORATOR */.radfd_MyWebsite.radfd_ScrollBars |
| { |
| scrollbar-3dlight-color: #606f94; |
| scrollbar-arrow-color: #4d5874; |
| scrollbar-base-color: #f5f5f5; |
| scrollbar-darkshadow-color: #5f6e93; |
| scrollbar-face-color: #d8dfe8; |
| scrollbar-highlight-color: #fff; |
| scrollbar-shadow-color: #a3a3a3; |
| scrollbar-track-color: #efefef; |
| } |
| /* label settings */.radfd_MyWebsite label.MyWebsite |
| { |
| color: #626262; |
| } |
| /* checkbox settings */.radfd_MyWebsite .radfdCheckboxUnchecked, .radfd_MyWebsite .radfdInputDisabled.radfdCheckboxUnchecked:hover |
| { |
| background: transparent url(FormDecorator/CheckBoxSprites.gif) no-repeat 0 0; |
| } |
| .radfd_MyWebsite .radfdCheckboxUnchecked:hover |
| { |
| background: transparent url(FormDecorator/CheckBoxSprites.gif) no-repeat 0 -200px; |
| } |
| .radfd_MyWebsite .radfdCheckboxChecked, .radfd_MyWebsite .radfdInputDisabled.radfdCheckboxChecked:hover |
| { |
| background: transparent url(FormDecorator/CheckBoxSprites.gif) no-repeat 0 -420px; |
| } |
| .radfd_MyWebsite .radfdCheckboxChecked:hover |
| { |
| background: transparent url(FormDecorator/CheckBoxSprites.gif) no-repeat 0 -640px; |
| } |
| /* end of checkbox settings *//* radiobutton settings */.radfd_MyWebsite .radfdRadioUnchecked, .radfd_MyWebsite .radfdInputDisabled.radfdRadioUnchecked:hover |
| { |
| background: transparent url(FormDecorator/RadioButtonSprites.gif) no-repeat 1px 0; |
| } |
| .radfd_MyWebsite .radfdRadioUnchecked:hover |
| { |
| background: transparent url(FormDecorator/RadioButtonSprites.gif) no-repeat 1px -220px; |
| } |
| .radfd_MyWebsite .radfdRadioChecked, .radfd_MyWebsite .radfdInputDisabled.radfdRadioChecked:hover |
| { |
| background: transparent url(FormDecorator/RadioButtonSprites.gif) no-repeat 1px -440px; |
| } |
| .radfd_MyWebsite .radfdRadioChecked:hover |
| { |
| background: transparent url(FormDecorator/RadioButtonSprites.gif) no-repeat 1px -640px; |
| } |
| /* end of radiobutton settings *//* button settings */a.radfd_MyWebsite, a.radfd_MyWebsite span |
| { |
| background-image: url(FormDecorator/ButtonSprites.gif); /* font: normal 12px Arial, Verdana, Sans-serif; */ |
| color: black; |
| } |
| a.radfd_MyWebsite.radfdInputDisabled:hover |
| { |
| background-position: 0 0; |
| } |
| a.radfd_MyWebsite |
| { |
| padding-left: 4px; |
| } |
| a.radfd_MyWebsite .radfdInnerSpan, a.radfd_MyWebsite.radfdInputDisabled:hover .radfdInnerSpan |
| { |
| margin-right: 4px; |
| background-position: 0 -21px; |
| } |
| a.radfd_MyWebsite.radfdInputDisabled:hover .radfdOuterSpan |
| { |
| background-position: right 0; |
| } |
| a.radfd_MyWebsite:hover |
| { |
| background-position: 0 -42px; |
| } |
| a.radfd_MyWebsite:hover .radfdInnerSpan |
| { |
| background-position: 0 -63px; |
| } |
| a.radfd_MyWebsite:hover .radfdOuterSpan |
| { |
| background-position: right -42px; |
| } |
| /* button settings *//* clicked button styles */a.radfd_MyWebsite.radfd_Clicked |
| { |
| background-image: url(FormDecorator/ButtonSprites.gif); |
| background-position: 0 -84px; |
| background-repeat: no-repeat; |
| } |
| a.radfd_MyWebsite.radfd_Clicked span |
| { |
| background-image: url(FormDecorator/ButtonSprites.gif); |
| color: #000; |
| } |
| a.radfd_MyWebsite.radfd_Clicked .radfdInnerSpan |
| { |
| background-position: 0 -105px; |
| background-repeat: repeat-x; |
| } |
| a.radfd_MyWebsite.radfd_Clicked .radfdOuterSpan |
| { |
| background-position: right -84px; |
| background-repeat: no-repeat; |
| } |
| /* end of clicked button styles *//* do NOT change these settings, otherwise the skinned buttons will be broken when used within a decoration zone */a.radfdSkinnedFormButton.radfd_MyWebsite |
| { |
| -moz-user-select: none !important; |
| outline: none !important; |
| text-decoration: none !important; |
| cursor: default !important; |
| text-align: center !important; |
| background-color: transparent !important; |
| border: 0 !important; |
| display: inline-block !important; |
| } |
| /* Headings 4-6 */.radfd_MyWebsite h4.radfd_h4 |
| { |
| color: #567db0; |
| border-bottom: solid 1px #a0a0a0; |
| } |
| .radfd_MyWebsite h5.radfd_h5 |
| { |
| color: #000000; |
| border-bottom: solid 1px #a0a0a0; |
| } |
| .radfd_MyWebsite h6.radfd_h6 |
| { |
| color: #000000; |
| } |
| /* LABEL */.radfd_MyWebsite label.radfd_label |
| { |
| color: #000000; |
| } |
| /* FIELDSET & LEGEND */.radfd_MyWebsite table.radfd_roundedWrapper_fieldset legend, .radfd_MyWebsite fieldset.radfd_fieldset legend |
| { |
| /*Mandatory to set the height of the legend, so as to be able to calculate the rounded corners in IE properly*/ |
| font-size: 12px; |
| height: 30px; |
| line-height: 30px; |
| color: #000000; |
| } |
| .radfd_MyWebsite table.radfd_roundedWrapper_fieldset fieldset, .radfd_MyWebsite fieldset.radfd_fieldset |
| { |
| border: solid 1px #d5dfe5; |
| background-image: url(FormDecorator/FieldsetBgr.png); /* |
| having a background image on a fieldset is not okay with IE */ |
| background-repeat: no-repeat; /*Mandatory to use because of incorrect IE positioning of the image*/ |
| } |
| /* Due to a glitch in IE the following 2 classes must be declared separately for correct parsing of the textarea class in IE6*/.radfd_MyWebsite table.radfd_roundedWrapper input, .radfd_MyWebsite table.radfd_roundedWrapper textarea, .radfd_MyWebsite input.radfd_input, .radfd_MyWebsite textarea.radfd_textarea |
| { |
| border: solid 1px #7f9db9; |
| background: #ffffff; |
| color: #000000; |
| overflow: hidden; |
| } |
| .radfd_MyWebsite table.radfd_roundedWrapper input[disabled="disabled"]:hover, .radfd_MyWebsite table.radfd_roundedWrapper textarea[disabled="disabled"]:hover |
| { |
| border: solid 1px #8e8e8e; |
| background: #ffffff; |
| color: #171717; |
| overflow: hidden; |
| filter: alpha(opacity=30); |
| -moz-opacity: .3; |
| opacity: .3; |
| } |
| /* add classes for HOVER effect */.radfd_MyWebsite table.radfd_roundedWrapper input:hover, .radfd_MyWebsite table.radfd_roundedWrapper textarea:hover, .radfd_MyWebsite table.radfd_roundedWrapper:hover .radfd_roundedInnerSpan, .radfd_MyWebsite input.radfd_input:hover, .radfd_MyWebsite textarea.radfd_textarea:hover |
| { |
| border-color: #38577e !important; |
| background: #ffffff; |
| } |
| .radfd_MyWebsite table.radfd_roundedWrapper:hover .radfd_roundedOuterSpan |
| { |
| background-color: #38577e !important; |
| } |
| /***********************************************************************************************/</style> |
| </head> |
| <body style="height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden;"> |
| <form runat="server"> |
| <telerik:RadScriptManager ID="uxRadScriptManager" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadFormDecorator ID="uxRadFormDecorator" runat="server" EnableEmbeddedSkins="False" |
| Skin="MyWebsite" /> |
| <asp:Button ID="uxButton" runat="server" Text="Button" /> |
| </form> |
| </body> |
| </html> |
