Hi,
We are using telerik Rad Ajax Controls for our website, Technologies, ASP.NET, C#. We are using Visual Studio 2010 and framework 4.0 for our web application development.
Scenario is as follows,
We have .aspx page for showing personal information of user where we have used RadPanelBar to categorize the information. There are 6 RadPanelItem in RadPanelBar and user can save each panel information separately i.e. there is save button in every panel. And again there is Save button at the bottom (It is not in rad panel bar) of the page to save all the information in the form. HTML Tables are used to show controls/fields in each panel. Now when we click on save button either it is individual panel save button or save button at the bottom to save all the information the controls on that panel or some other panel controls get distorted. It not happens every time, but suddenly sometime on click of save button, controls of any other panel or same panel get distorted. I have given proper width to table and columns of the table and to controls also. Is it CSS ISSUE? Please help me out. Here is the code snippet for more understanding,<
telerik:RadPanelItem
runat
=
"server"
Text
=
"Host Country - Home Address"
Value
=
"HostAddr"
>
<
Items
>
<
telerik:RadPanelItem
runat
=
"server"
Value
=
"HostHomeAddress"
>
<
ItemTemplate
>
<
div
class
=
"text"
style
=
"background-color: #edf9fe"
>
<
table
cellpadding
=
"5"
cellspacing
=
"0"
border
=
"0"
width
=
"730px"
>
<
tr
>
<
td
align
=
"right"
colspan
=
"3"
style
=
"text-align: right;"
valign
=
"middle"
>
<
asp:CheckBox
ID
=
"primary_addr_checkbox3"
runat
=
"server"
OnClick
=
"UnCheckOther(this)"
/>
Mark as primary Mailing Address
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"3"
>
<
asp:Label
ID
=
"lblmsgHostCHA"
runat
=
"server"
Font-Names
=
"Verdana"
></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
valign
=
"top"
width
=
"width250px"
>
</
td
>
<
td
align
=
"right"
valign
=
"top"
>
<
asp:Button
ID
=
"btnSaveHostCHA"
runat
=
"server"
CausesValidation
=
"false"
OnClick
=
"btnSaveHostCHA_Click"
OnClientClick
=
"clearMsg()"
Text
=
"Save Changes"
/>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
valign
=
"top"
width
=
"width250px"
>
<
asp:Label
ID
=
"lblHostHomeCountry"
runat
=
"server"
AssociatedControlID
=
"ddlHostHomeCountry"
Font-Names
=
"Verdana"
ForeColor
=
"#696969"
Text
=
"Country"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
<
asp:DropDownList
ID
=
"ddlHostHomeCountry"
runat
=
"server"
AutoPostBack
=
"true"
DataTextField
=
"Name"
DataValueField
=
"ID"
Font-Names
=
"Verdana"
OnSelectedIndexChanged
=
"ddlHostHomeCountry_SelectedIndexChanged"
Width
=
"200px"
>
</
asp:DropDownList
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
</
td
>
</
tr
>
<
tr
>
<
td
width
=
"width250px"
>
<
asp:Label
ID
=
"lblHostHomeStreet1"
runat
=
"server"
AssociatedControlID
=
"txtHostHomeStreet1"
Font-Names
=
"Verdana"
ForeColor
=
"#696969"
Text
=
"Street 1"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
<
asp:TextBox
ID
=
"txtHostHomeStreet1"
runat
=
"server"
CssClass
=
"textInput"
Font-Names
=
"Verdana"
MaxLength
=
"50"
Width
=
"200px"
></
asp:TextBox
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
valign
=
"top"
width
=
"width250px"
>
<
asp:Label
ID
=
"lblHostHomeStreet2"
runat
=
"server"
AssociatedControlID
=
"txtHostHomeStreet2"
Font-Names
=
"Verdana"
ForeColor
=
"#696969"
Text
=
"Street 2"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
<
asp:TextBox
ID
=
"txtHostHomeStreet2"
runat
=
"server"
CssClass
=
"textInput"
Font-Names
=
"Verdana"
MaxLength
=
"50"
Width
=
"200px"
></
asp:TextBox
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
valign
=
"top"
width
=
"width250px"
>
<
asp:Label
ID
=
"lblHostHomeCity"
runat
=
"server"
AssociatedControlID
=
"txtHostHomeCity"
Font-Names
=
"Verdana"
ForeColor
=
"#696969"
Text
=
"City"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
<
asp:TextBox
ID
=
"txtHostHomeCity"
runat
=
"server"
CssClass
=
"textInput"
Font-Names
=
"Verdana"
MaxLength
=
"50"
Width
=
"200px"
></
asp:TextBox
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
valign
=
"top"
width
=
"width250px"
>
<
asp:Label
ID
=
"lblHostHomeState"
runat
=
"server"
AssociatedControlID
=
"ddlHostHomeState"
Font-Names
=
"Verdana"
ForeColor
=
"#696969"
Text
=
"State/Province"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
<
asp:DropDownList
ID
=
"ddlHostHomeState"
runat
=
"server"
DataTextField
=
"Name"
DataValueField
=
"StateProvinceID"
Font-Names
=
"Verdana"
Width
=
"200px"
>
</
asp:DropDownList
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
valign
=
"top"
width
=
"width250px"
>
<
asp:Label
ID
=
"lblHostHomeZip"
runat
=
"server"
AssociatedControlID
=
"txtHostHomeZip"
Font-Names
=
"Verdana"
ForeColor
=
"#696969"
Text
=
"Zip/Postal Code"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
<
asp:TextBox
ID
=
"txtHostHomeZip"
runat
=
"server"
CssClass
=
"textInput"
Font-Names
=
"Verdana"
MaxLength
=
"20"
Width
=
"200px"
></
asp:TextBox
>
</
td
>
<
td
align
=
"left"
valign
=
"top"
>
</
td
>
</
tr
>
</
table
>
<
br
/>
</
div
>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
public class Person : BusinessBase<
Person
>, IPerson, IAggregateRoot
{
public User.User Owner { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string FullName
{
get { return LastName + ", " + FirstName; }
}
public DateTime BirthDate { get; set; }
public Address.Address Address { get; set; }
public IList<
Item.Item
> Items { get; set; }
protected override void validate()
{
}
}
public class Address : BusinessBase<
Address
>, IAddress, IAggregateRoot
{
public string Street { get; set; }
public string City { get; set; }
public string State { get; set; }
public string ZipCode { get; set; }
protected override void validate()
{
}
}
<
EditFormSettings
EditFormType
=
"Template"
InsertCaption
=
"New Person"
>
<
FormTemplate
>
<
div
id
=
"PersonDiv"
>
<
table
>
<
tr
>
<
td
>
First Name:
</
td
>
<
td
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtFirstName"
MaxLength
=
"50"
Text='<%# Bind("FirstName") %>' />
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator1"
runat
=
"server"
ControlToValidate
=
"txtFirstName"
ErrorMessage
=
"A first name is required"
ValidationGroup
=
"vgPerson"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
Last Name:
</
td
>
<
td
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtLastName"
MaxLength
=
"50"
Text='<%# Bind("LastName") %>' />
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator3"
runat
=
"server"
ControlToValidate
=
"txtLastName"
ErrorMessage
=
"A last name is required"
ValidationGroup
=
"vgPerson"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
Use your address:
</
td
>
<
td
>
<
telerik:RadButton
ToggleType
=
"CheckBox"
runat
=
"server"
ID
=
"cbUseYourAddress"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
Street:
</
td
>
<
td
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtStreet"
MaxLength
=
"50"
Text='<%# Bind("Address.Street") %>' />
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator2"
runat
=
"server"
ControlToValidate
=
"txtStreet"
ErrorMessage
=
"A street is required"
ValidationGroup
=
"vgPerson"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
City:
</
td
>
<
td
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtCity"
MaxLength
=
"50"
Text='<%# Bind("Address.City") %>' />
</
td
>
</
tr
>
<
tr
>
<
td
>
State:
</
td
>
<
td
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtState"
MaxLength
=
"2"
Text='<%# Bind("Address.State") %>' />
</
td
>
</
tr
>
<
tr
>
<
td
>
Zip code:
</
td
>
<
td
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtZipCode"
MaxLength
=
"10"
Text='<%# Bind("Address.ZipCode") %>' />
</
td
>
</
tr
>
<%-- <
tr
>
<
td
>
Birth date:
</
td
>
<
td
>
<
telerik:RadDatePicker
ID
=
"dpBirthDate"
runat
=
"server"
DbSelectedDate='<%# Bind("BirthDate") %>' />
</
td
>
</
tr
>--%>
<
tr
>
<
td
colspan
=
"2"
>
<
asp:Button
ID
=
"btnUpdate"
Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' ValidationGroup="vgPerson" />
<
asp:Button
ID
=
"btnCancel"
Text
=
"Cancel"
runat
=
"server"
CausesValidation
=
"False"
CommandName
=
"Cancel"
ValidationGroup
=
"vgPerson"
/>
</
td
>
</
tr
>
</
table
>
</
div
>
<
asp:ValidationSummary
ID
=
"ValidationSummary1"
runat
=
"server"
ValidationGroup
=
"vgPerson"
ShowMessageBox
=
"True"
ShowSummary
=
"False"
/>
</
FormTemplate
>
Protected
Sub
RadGrid1_PreRender(sender
As
Object
, e
As
EventArgs)
RadGrid1.MasterTableView.GetColumn(
"ID"
).Visible =
False
End
Sub
<telerik:RadGrid ID="grdPaymentHistory" runat="server" AutoGenerateColumns="False"
CssClass="Grid" Width="800px" Height="180" AllowFilteringByColumn="False" Skin="Windows7" OnNeedDataSource="grdPaymentHistory_NeedsDataSource" AllowSorting="True" DataKeyNames="FinancialTransactionId" OnItemCommand="grdPaymentHistory_OnItemCommand" OnItemDataBound="grdPaymentHistory_ItemDataBound" OnInsertCommand="grdPaymentHistory_InsertCommand" OnUpdateCommand="grdPaymentHistory_UpdateCommand" OnCustomAggregate="grdPaymentHistory_CustomAggregate" ShowFooter="True"><MasterTableView Width="100%" EditMode="EditForms">
<ExpandCollapseColumn>
<HeaderStyle Width="15px"></HeaderStyle>
</ExpandCollapseColumn> <Columns><telerik:GridBoundColumn DataField="FinancialTransactionId" UniqueName="FinancialTransactionId"
Visible="False" /> <telerik:GridBoundColumn HeaderText="Date" DataField="CreatedOn.LocalDateTime" SortExpression="CreatedOn.LocalDateTime" UniqueName="CreatedOn.DateTime" DataFormatString="{0:MM/dd/yyyy hh:mm tt}" HeaderStyle-Width="110" /> <telerik:GridBoundColumn HeaderText="Transaction" DataField="TransactionType" SortExpression="TransactionType" UniqueName="TransactionType" /><telerik:GridBoundColumn HeaderText="Payment" DataField="PaymentType" UniqueName="PaymentType" FilterControlWidth="40px" SortExpression="PaymentType" FooterText="Total:" />
<telerik:GridBoundColumn HeaderText="Amount" DataField="Amount" UniqueName="Amount"
SortExpression="Amount" DataFormatString="{0:C}" Aggregate="Custom">
<ItemStyle HorizontalAlign="Right" />
<FooterStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridEditCommandColumn UniqueName="EditRefundAmount" />
<telerik:GridBoundColumn HeaderText="GL Acct" DataField="GLAccountId" UniqueName="GLAccountId"
SortExpression="GLAccountId" />
<telerik:GridBoundColumn HeaderText="Auth #" DataField="AuthorizationNumber" UniqueName="AuthorizationNumber"SortExpression="AuthorizationNumber" />
<telerik:GridBoundColumn HeaderText="ID" DataField="ProviderTransactionId" SortExpression="ProviderTransactionId" UniqueName="ProviderTransactionId" />
<telerik:GridBoundColumn HeaderText="User" DataField="CreatedBy" SortExpression="CreatedBy"
UniqueName="CreatedBy" />
<telerik:GridBoundColumn HeaderText="Response" DataField="Response" SortExpression="Response" UniqueName="Response" /> <telerik:GridButtonColumn ButtonType="PushButton" CommandName="Void" HeaderStyle-Width="56px" DataTextFormatString="Void" HeaderText="Actions" UniqueName="Actions" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" DataTextField="VoidButton" AndCurrentFilterFunction="NoFilter" Visible="True" /><telerik:GridTemplateColumn>
<HeaderStyle Width="30px" /> <ItemTemplate><asp:Image ID="imgReceipt" runat="server" ImageUrl="~/App_Themes/Default/images/receipt.png"
ToolTip="View receipt details for printing and emailing" />
</ItemTemplate>
<FooterStyle HorizontalAlign="Right"></FooterStyle>
</telerik:GridTemplateColumn> </Columns> <EditFormSettings EditFormType="Template" InsertCaption="Start Refund Transaction" CaptionFormatString="Edit Follow Up"> <FormTemplate><table> <tr> <td >Enter Refund Amount </td>
<td colspan="3"><asp:RadTextBox runat="server" ID="txtAmount" Text='<%# Eval("Amount") %>'></asp:RadTextBox></td>
<td> <asp:Button runat="server" ID="btnRefund" Text="Refund" Width="75px" CommandName="Update" /></td> </tr> </table>
</FormTemplate>
</EditFormSettings>
<NoRecordsTemplate> No Transactions Found</NoRecordsTemplate> </MasterTableView> <HeaderStyle CssClass="GridHeader" /> <FooterStyle CssClass="GridHeader" /><GroupingSettings CaseSensitive="False" />
<ClientSettings AllowColumnsReorder="false" ReorderColumnsOnClient="True">
<Resizing AllowColumnResize="true" ResizeGridOnColumnResize="false" ClipCellContentOnResize="true" />
<Scrolling AllowScroll="true" UseStaticHeaders="True" />
</ClientSettings>
</telerik:RadGrid>
The update command event is as below:
protected void grdPaymentHistory_UpdateCommand(object sender, GridCommandEventArgs e)
{
//Get the GridEditableItem of the RadGrid
GridEditableItem editedItem = e.Item as GridEditableItem;
//Access the textbox from the edit form template and store the values in variables.
if (editedItem != null)
{
var refundAmount = ((RadTextBox)editedItem.FindControl("txtAmount")).Text;
}
}
<telerik:GridEditCommandColumn HeaderStyle-Width="60px" UniqueName="EditCommandColumn"
Visible="true" ButtonType="ImageButton" HeaderText="Edit">
</telerik:GridEditCommandColumn>
Hope I am clear with my question.
Aprreciate your help.
Thanks
<
httpHandlers
>
<
remove
verb
=
"*"
path
=
"*.asmx"
/>
<
add
verb
=
"*"
path
=
"*.asmx"
validate
=
"false"
type
=
"System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
/>
<
add
verb
=
"*"
path
=
"*_AppService.axd"
validate
=
"false"
type
=
"System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
/>
<
add
verb
=
"GET,HEAD"
path
=
"ScriptResource.axd"
validate
=
"false"
type
=
"System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
/>
<
add
path
=
"ChartImage.axd"
type
=
"Telerik.Web.UI.ChartHttpHandler"
verb
=
"*"
validate
=
"false"
/>
<
add
path
=
"Telerik.Web.UI.SpellCheckHandler.axd"
type
=
"Telerik.Web.UI.SpellCheckHandler"
verb
=
"*"
validate
=
"false"
/>
<
add
path
=
"Telerik.Web.UI.DialogHandler.aspx"
type
=
"Telerik.Web.UI.DialogHandler"
verb
=
"*"
validate
=
"false"
/>
<
add
path
=
"Telerik.RadUploadProgressHandler.ashx"
type
=
"Telerik.Web.UI.RadUploadProgressHandler"
verb
=
"*"
validate
=
"false"
/>
<
add
path
=
"Telerik.Web.UI.WebResource.axd"
type
=
"Telerik.Web.UI.WebResource"
verb
=
"*"
validate
=
"false"
/>
</
httpHandlers
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Name
=
"Telerik.Web.UI"
Assembly
=
"Telerik.Web.UI.Common.Core.js"
/>
</
Scripts
>
</
asp:ScriptManager
>