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

RadGrid Column sizing in edit mode

3 Answers 305 Views

Grid

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

John asked on 19 Nov 2018, 06:47 PM

radgrid-edit-problem.png

I have a radgrid I am trying to edit. When It goes to edit mode all the columns are pushed to the left side of the row. The edit portion displays correctly but the data row that is being edited has all the columns pushed to the left side of the grid.

Here is the code for the aspx page. I will attach a before and after edit button is pushed as attached files. I have tried column editors. Tried adjusting them from code behind. All the things I have found on the web to no avail. I have spent way too much time trying to figure this out and the client is getting restless. Any help would be appreciated.

<div id="divRadGrid">

<telerik:RadGrid

runat="server"

ID="rgLOIs"

DataSourceID="sdsLOIs"

ClientIDMode="Static"

ShowHeader="true"

width ="100%"

AllowAutomaticInserts="false"

AllowAutomaticDeletes="false"

AutoGenerateEditColumn="false"

AutoGenerateColumns="false"

EditItemStyle-CssClass="noPrint"

EditItemStyle-Width="20%"

EditRowStyle-Width="5%">

<ClientSettings Scrolling-UseStaticHeaders="true" Scrolling-AllowScroll="true"></ClientSettings>

<MasterTableView Width="100%" TableLayout="Fixed">

<EditFormSettings >

<FormStyle BackColor="#99ccff" />

</EditFormSettings>

<Columns>

<telerik:GridEditCommandColumn UniqueName="GridEditColumn" ></telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="AuditLoiId" Display="false" ReadOnly="true" />

<telerik:GridBoundColumn DataField="LoiId" Display="false" ReadOnly="true"/>

<telerik:GridBoundColumn UniqueName="LoiCode" DataField="LoiCode" ReadOnly="true" ItemStyle-CssClass="maximize" HeaderStyle-Wrap="true"/>

<telerik:GridBoundColumn UniqueName="LoiText" DataField="LoiText" HeaderStyle-CssClass="form-control" ReadOnly="true" ColumnEditorID="GridTextBoxColumnEditor1" ItemStyle-CssClass="maximize" HeaderText="LOI" HeaderStyle-Width="20%" HeaderStyle-Wrap="true"/>

<telerik:GridTemplateColumn UniqueName="CBResponse" HeaderText="Yes/No" ItemStyle-CssClass="maximize" HeaderStyle-Width="5%">

<ItemTemplate>

<asp:RadioButtonList runat="server" ID="rblItemResponse" Width="100%" DataValueField="CBResponse" Value='<%# Eval("CBResponse") %>'>

<asp:ListItem Text="Yes" Value="1"></asp:ListItem>

<asp:ListItem Text ="No" Value="0"></asp:ListItem>

</asp:RadioButtonList>

</ItemTemplate>

<EditItemTemplate>

<asp:RadioButtonList runat="server" ID="rblEditResponse" Width="100%" DataValueField="CBResponse" >

<asp:ListItem Text="Yes" Value="1"></asp:ListItem>

<asp:ListItem Text ="No" Value="0"></asp:ListItem>

</asp:RadioButtonList>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="FacilityStatus" ItemStyle-CssClass="maximize" HeaderStyle-Width="15%"

HeaderText="Status(Facility)">

<EditItemTemplate>

<asp:DropDownList ID="ddlEditFacilityStatus" runat="server" Width="100%" DataSourceID="sdsLoiStatus" DataTextField="LoiStatusText" DataValueField="LoiStatusId" SelectedValue='<%# Bind("FacilityStatus") %>'></asp:DropDownList>

</EditItemTemplate>

<ItemTemplate>

<asp:DropDownList ID="ddlItemFacilityStatus" runat="server" Width="100%" DataSourceID="sdsLoiStatus" DataTextField="LoiStatusText" DataValueField="LoiStatusId" SelectedValue='<%# Eval("FacilityStatus") %>'></asp:DropDownList>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName ="FacilityComments" ItemStyle-CssClass="maximize" HeaderStyle-Width="20%" HeaderText="Facility Comments">

<EditItemTemplate>

<asp:TextBox ID="txtEditFacilityComments" runat="server" Width="100%" Text='<%# Bind("FacilityComments") %>'></asp:TextBox>

</EditItemTemplate>

<ItemTemplate>

<asp:TextBox ID="txtItemFacilityComments" runat="server" Width="100%" Text='<%# Eval("FacilityComments") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="AuditorStatus" ItemStyle-CssClass="maximize" HeaderStyle-Width="15%"

HeaderText="Status(Auditor)" DataField="AuditorStatus">

<EditItemTemplate>

<asp:DropDownList ID="ddlEditAuditorStatus" runat="server" Width="100%" DataSourceID="sdsLoiStatus" DataTextField="LoiStatusText" DataValueField="LoiStatusId" SelectedValue='<%# Bind("AuditorStatus") %>'></asp:DropDownList>

</EditItemTemplate>

<ItemTemplate>

<asp:DropDownList ID="ddlItemAuditorStatus" runat="server" Width="100%" DataSourceID="sdsLoiStatus" DataTextField="LoiStatusText" DataValueField="LoiStatusId" SelectedValue='<%# Eval("AuditorStatus") %>'></asp:DropDownList>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName ="AuditorComments" ItemStyle-CssClass="maximize" HeaderStyle-Width="20%" HeaderText="Facility Comments">

<EditItemTemplate>

<asp:TextBox ID="txtEditAuditorComments" runat="server" Width="100%" Text='<%# Bind("AuditorComments") %>'></asp:TextBox>

</EditItemTemplate>

<ItemTemplate>

<asp:TextBox ID="txtItemAuditorComments" runat="server" Width="100%" Text='<%# Eval("AuditorComments") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

3 Answers, 1 is accepted

answered on 22 Nov 2018, 09:09 AM

Hello John,

You can remove ClientIDMode property and see whether this will resolve the issue:
https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#setting-clientidmode-property-to-static-breaks-the-telerik-controls-functionality

Also, you can temporarily remove the UseStaticHeaders property:
https://www.telerik.com/support/kb/aspnet-ajax/grid/details/misaligned-columns-in-radgrid-with-scrolling-enabled

I hope these steps will help you troubleshoot the issue.

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.