This is a migrated thread and some comments may be shown as answers.

Radgrid allignment issue

9 Answers 220 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Ryan asked on 18 Jun 2013, 02:30 PM

I have a radgrid that allows a user to add/update.

The table has about 15-20 columns. When in edit/add mode 2 of these columns labels are left aligned instead of right aligned?

These are both on GridTemplateColumn columns. Has anyone seen this before?

Here is one of the columns.

<telerik:GridTemplateColumn DataField="sGender"

FilterControlAltText="Filter sGender column" HeaderText="Gender"

SortExpression="sGender" UniqueName="sGender">

<EditItemTemplate>

<telerik:RadDropDownList ID="ddlGender" runat="server" SelectedValue='<%# Bind("sGender") %>' DataValueField="sGender">

<Items>

<telerik:DropDownListItem runat="server" Text="Male" Value="M"/>

<telerik:DropDownListItem runat="server" Text="Female" Value="F"/>

</Items>

</telerik:RadDropDownList>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="sGenderLabel" runat="server" Text='<%# Eval("sGender") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

9 Answers, 1 is accepted

answered on 19 Jun 2013, 04:18 AM

Hi Ryan,

I tried your code,it works fine at my end,could you provide how you have set the alignment.Here is an example.Please try if this helps.

ASPX:

<telerik:RadGrid ID="rgdAccts" runat="server" AutoGenerateColumns="False">

<MasterTableView>

<Columns>

<telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID">

<HeaderStyle HorizontalAlign="Right" />

<ItemStyle HorizontalAlign="Right" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity">

<EditItemTemplate>

<telerik:RadDropDownList ID="ddlCity" runat="server" SelectedValue='<%# Bind("ShipCity") %>'

DataValueField="ShipCity">

<Items>

<telerik:DropDownListItem runat="server" Text="AA" Value="A" />

<telerik:DropDownListItem runat="server" Text="BB" Value="B" />

</Items>

</telerik:RadDropDownList>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="LblShipCity" runat="server" Text='<%# Eval("ShipCity") %>'></asp:Label>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Right" />

<ItemStyle HorizontalAlign="Right" />

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

Thanks,
Princy

answered on 19 Jun 2013, 11:23 AM

screenshot.jpg

Adding those didn't help. I did notice this after adding a theme and then removing it. Not sure if it has anything to do with it or just a coincidence. I have attached a screen shot to show you whats happening.

<telerik:GridTemplateColumn DataField="sGender"

FilterControlAltText="Filter Gender" HeaderText="Gender"

SortExpression="sGender" UniqueName="sGender">

<EditItemTemplate>

<telerik:RadDropDownList ID="ddlGender" runat="server" SelectedValue='<%# Bind("sGender") %>' DataValueField="sGender">

<Items>

<telerik:DropDownListItem runat="server" Text="Male" Value="M"/>

<telerik:DropDownListItem runat="server" Text="Female" Value="F"/>

</Items>

</telerik:RadDropDownList>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="sGenderLabel" runat="server" Text='<%# Eval("sGender") %>'></asp:Label>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Right"/>

<ItemStyle HorizontalAlign="Right"/>

</telerik:GridTemplateColumn>

answered on 21 Jun 2013, 06:38 AM

RadGridEditAligmentIssue.zip

Hello Ryan,

I tried to replicate the issue on my side bu to no avail. Could you please explain what kind of theme you are using? I prepared a small sample and attached it to this thread. Could you please give it a try and let me know how it differs from your real setup?

Regards,
Kostadin
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 21 Jun 2013, 06:06 PM

Here is a copy of the grid.

<telerik:RadGrid ID="gvPatientList" runat="server" CellSpacing="0"

DataSourceID="dsPatientList" GridLines="None" AutoGenerateColumns="False"

>

<MasterTableView DataSourceID="dsPatientList" DataKeyNames="PatientID" AllowAutomaticInserts="True" AllowAutomaticUpdates="True" CommandItemDisplay="Top" RetrieveNullAsDBNull ="True">

<CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Add Patient"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn UniqueName="TemplateColumn">

<ItemTemplate>

<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="false" CommandName="Edit" Text="Edit"></asp:LinkButton>

</ItemTemplate>

<EditItemTemplate>

</EditItemTemplate>

<ItemStyle CssClass="linkUnderline" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="PatientID" DataType="System.Int32"

FilterControlAltText="Filter PatientID column" HeaderText="PatientID"

SortExpression="PatientID" UniqueName="PatientID" Visible="False" >

<EditItemTemplate>

<asp:HiddenField ID="hdnPatientID" runat="server" Value='<%# Eval("PatientID") %>' />

</EditItemTemplate>

<ItemTemplate>

<asp:HiddenField ID="hdnPatientID" runat="server" Value='<%# Eval("PatientID") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="sLastName"

FilterControlAltText="Filter sLastName column" HeaderText="Last Name"

SortExpression="sLastName" UniqueName="sLastName">

<EditItemTemplate>

<asp:TextBox ID="sLastNameTextBox" runat="server" Text='<%# Bind("sLastName") %>' MaxLength="50"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvLastName" ControlToValidate="sLastNameTextBox"

ErrorMessage="*Required" Display="Static" runat="server" ForeColor="Red">

</asp:RequiredFieldValidator>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="sLastNameLabel" runat="server" Text='<%# Eval("sLastName") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="sFirstName"

FilterControlAltText="Filter sFirstName column" HeaderText="First Name"

SortExpression="sFirstName" UniqueName="sFirstName">

<EditItemTemplate>

<asp:TextBox ID="sFirstNameTextBox" runat="server" Text='<%# Bind("sFirstName") %>' MaxLength="50"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvFirstName" ControlToValidate="sFirstNameTextBox"

ErrorMessage="*Required" Display="Static" runat="server" ForeColor="Red">

</asp:RequiredFieldValidator>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="sFirstNameLabel" runat="server" Text='<%# Eval("sFirstName") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="sMiddleName"

FilterControlAltText="Filter sMiddleName column" HeaderText="Middle Name" MaxLength="50"

SortExpression="sMiddleName" UniqueName="sMiddleName">

<%-- <ColumnValidationSettings EnableRequiredFieldValidation="true">

<RequiredFieldValidator ForeColor="Red" ErrorMessage="*Required"></RequiredFieldValidator>

</ColumnValidationSettings>

--%>

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="sGender"

FilterControlAltText="Filter Gender" HeaderText="Gender"

SortExpression="sGender" UniqueName="sGender">

<EditItemTemplate>

<telerik:RadDropDownList ID="ddlGender" runat="server" SelectedValue='<%# Bind("sGender") %>' DataValueField="sGender">

<Items>

<telerik:DropDownListItem runat="server" Text="Male" Value="M"/>

<telerik:DropDownListItem runat="server" Text="Female" Value="F"/>

</Items>

</telerik:RadDropDownList>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="sGenderLabel" runat="server" Text='<%# Eval("sGender") %>'></asp:Label>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Right"/>

<ItemStyle HorizontalAlign="Right"/>

</telerik:GridTemplateColumn>

<telerik:GridDateTimeColumn DataField="vDateOfBirth"

DataType="System.DateTime"

FilterControlAltText="Filter DOB column"

HeaderText="DOB" SortExpression="vDateOfBirth"

UniqueName="vDateOfBirth" DataFormatString="{0:MM/dd/yyyy}" Visible="True" >

<ColumnValidationSettings EnableRequiredFieldValidation="true">

<RequiredFieldValidator ForeColor="Red" ErrorMessage="*Required"></RequiredFieldValidator>

</ColumnValidationSettings>

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn DataField="sSSN"

FilterControlAltText="Filter sSSN column" HeaderText="SSN"

SortExpression="sSSN" UniqueName="sSSN" MaxLength="10" Visible="False">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="sRoomNumber"

FilterControlAltText="Filter sRoomNumber column" HeaderText="Room Number" MaxLength="50"

SortExpression="sRoomNumber" UniqueName="sRoomNumber">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="sMedicalRecordNumber"

FilterControlAltText="Filter sMedicalRecordNumber column"

HeaderText="Medical Record #" SortExpression="sMedicalRecordNumber" MaxLength="50"

UniqueName="sMedicalRecordNumber">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="sAccountNumber"

FilterControlAltText="Filter sAccountNumber column" HeaderText="Account #" MaxLength="50"

SortExpression="sAccountNumber" UniqueName="sAccountNumber">

<ColumnValidationSettings EnableRequiredFieldValidation="true">

<RequiredFieldValidator ForeColor="Red" ErrorMessage="*Required"></RequiredFieldValidator>

</ColumnValidationSettings>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="sServiceType" EditFormColumnIndex="1"

FilterControlAltText="Filter sServiceType column" HeaderText="Service Type"

SortExpression="sServiceType" UniqueName="sServiceType">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="vAdmitDate" EditFormColumnIndex="1"

DataType="System.DateTime"

FilterControlAltText="Filter Admit Date"

HeaderText="Admit Date" SortExpression="vAdmitDate"

UniqueName="vAdmitDate" Visible="True" DataFormatString="{0:MM/dd/yyyy}" >

<ColumnValidationSettings EnableRequiredFieldValidation="true">

<RequiredFieldValidator ForeColor="Red" ErrorMessage="*Required"></RequiredFieldValidator>

</ColumnValidationSettings>

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn DataField="vDischargeDate" EditFormColumnIndex="1"

DataType="System.DateTime"

FilterControlAltText="Filter Discharge Date"

HeaderText="Discharge Date" SortExpression="vDischargeDate"

UniqueName="vAdvDischargeDatemitDate" Visible="True" DataFormatString="{0:MM/dd/yyyy}">

</telerik:GridDateTimeColumn>

<telerik:GridTemplateColumn DataField="sAttendingProviderNumber"

EditFormColumnIndex="1"

FilterControlAltText="Filter sAttendingProviderNumber column"

HeaderText="Attending Provider" SortExpression="sAttendingProviderNumber"

UniqueName="sAttendingProviderNumber">

<EditItemTemplate>

<telerik:RadDropDownList ID="sAttendingProviderNumberDDL" runat="server"

DataSourceID="dsAttendingDocs" DataTextField="DOCNAME" DataValueField="DOCCODE"

SelectedValue='<%# Bind("sAttendingProviderNumber") %>' AppendDataBoundItems="True" Width="250px">

<Items>

<telerik:DropDownListItem runat="server" Text="Select an Attending Provider" Value=""/>

</Items>

</telerik:RadDropDownList>

</EditItemTemplate>

<ItemTemplate>

<telerik:RadDropDownList ID="sAttendingProviderNumberDDL" runat="server"

DataSourceID="dsAttendingDocs" DataTextField="DOCNAME" DataValueField="DOCCODE"

SelectedValue='<%# Bind("sAttendingProviderNumber") %>' AppendDataBoundItems="True" Width="185px"

OnSelectedIndexChanged="sAttendingProviderNumberDropDownList_SelectedIndexChanged"

AutoPostBack="True">

<Items>

<telerik:DropDownListItem runat="server" Text="Select an Attending Provider" Value=""/>

</Items>

</telerik:RadDropDownList>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridDropDownColumn DataSourceID="dsReferringDocs" ListTextField="DisplayName" ListValueField="DOCCODE"

UniqueName="sReferringProviderNumber" SortExpression="sReferringProviderNumber" DataField="sReferringProviderNumber"

DropDownControlType="RadComboBox" AllowAutomaticLoadOnDemand="true"

EditFormColumnIndex="1" FilterControlAltText="Filter sReferringProviderNumber"

HeaderText="Referring Provider" ItemStyle-Width="250px" ColumnEditorID="RefPCPNumberColumnEditor"

AllowVirtualScrolling="true" ShowMoreResultsBox="true" ItemsPerRequest="10" Visible="False">

</telerik:GridDropDownColumn>

<telerik:GridDropDownColumn DataSourceID="dsReferringDocs" ListTextField="DisplayName" ListValueField="DOCCODE"

UniqueName="sPCPNumber" SortExpression="sPCPNumber" DataField="sPCPNumber"

DropDownControlType="RadComboBox" AllowAutomaticLoadOnDemand="true"

EditFormColumnIndex="1" FilterControlAltText="Filter sPCPNumber"

HeaderText="PCP" ColumnEditorID="RefPCPNumberColumnEditor"

AllowVirtualScrolling="true" ShowMoreResultsBox="true" ItemsPerRequest="10" Visible="False">

</telerik:GridDropDownColumn>

<telerik:GridBoundColumn DataField="sPrimaryInsurance" EditFormColumnIndex="1"

FilterControlAltText="Filter sPrimaryInsurance column"

HeaderText="Primary Insurance" SortExpression="sPrimaryInsurance" MaxLength="50"

UniqueName="sPrimaryInsurance" Visible="False">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="sSource" EditFormColumnIndex="1" Visible="False" ReadOnly="True"

FilterControlAltText="Filter sSource column" HeaderText="Source"

SortExpression="sSource" UniqueName="sSource">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="sDateEntered" Visible="False" ReadOnly="True"

FilterControlAltText="Filter sDateEntered column" HeaderText="Date Entered"

SortExpression="sDateEntered" UniqueName="sDateEntered">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="iNotSeenByProvider" EditFormColumnIndex="1"

DataType="System.Boolean" DefaultInsertValue="False" FilterControlAltText="Filter Seen By Provider"

HeaderText="Not Seen By Provider" SortExpression="iNotSeenByProvider"

UniqueName="iNotSeenByProvider" ItemStyle-Width="50px">

<EditItemTemplate>

<asp:CheckBox ID="iNotSeenByProviderCheckBox" runat="server" AutoPostBack="false" Checked='<%# Bind("iNotSeenByProvider") %>' />

</EditItemTemplate>

<ItemTemplate>

<asp:CheckBox ID="iNotSeenByProviderCheckBox" runat="server" AutoPostBack="true" Checked='<%# Eval("iNotSeenByProvider") %>' OnCheckedChanged="ToggleSeenByProvider"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings ColumnNumber="2" CaptionDataField="sFullName" CaptionFormatString="Edit details for {0}"

InsertCaption="New Patient">

<FormTableItemStyle Wrap="False"></FormTableItemStyle>

<FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>

<FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="2" Width="100%"></FormMainTableStyle>

<FormTableStyle CellSpacing="0" CellPadding="2" Height="110px">

</FormTableStyle>

<FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>

<EditColumn ButtonType="ImageButton" InsertText="Add Patient" UpdateText="Update Patient"

UniqueName="EditCommandColumn1" CancelText="Cancel" >

</EditColumn>

<FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>

</EditFormSettings>

<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

</MasterTableView>

<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>

answered on 26 Jun 2013, 11:45 AM

RadGridEditAligmentIssue.zip

Hi Ryan,

I am still not able to reproduce the issue. I prepared another sample based on your code and attached it to this forum post. Could you please give it a try and let me know how it behaves on your end? I would suggest you to provide us with a small runnable sample or try to replicate the issue in my project in order to investigate it further.

Regards,
Kostadin
Telerik

answered on 01 Jul 2013, 01:15 PM

gridscreenshot.jpg

I am 100% sure this is being caused by my style sheet.

Can you tell me what the is different about a template column vs all the other columns as far as the field label that is generated?

This way I can try to adjust my css to make these template columns behave like my other labels.

Here is my label CSS.

label {

width: 150px;

float: left;

text-align: right;

margin: 3px 5px 5px 5px;

clear: both;

}

Accepted

answered on 04 Jul 2013, 06:32 AM

Hello Ryan,

Could you please try the following CSS rules and let me know about the result?

<style type="text/css">

label

{

width: 150px;

text-align: right;

margin: 3px 5px 5px 5px;

clear: both;

}

.rgEditForm td,

.rgEditForm tr.EditFormHeader td

{

text-align: left;

}

.rgEditForm td:first-child

{

text-align: right;

}

</style>

Regards,
Kostadin
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Support and Learning

Productivity and Design Tools

Radgrid allignment issue

9 Answers, 1 is accepted