Im using visual studio 2019 to develop an application in asp.net using c#
I have a telerik radgrid and it has a few columns that have text boxes to make it editable.
This works find but when the grid is loaded with data and the rows go to the bottom edge of the webpage you cant edit the text boxes in the last row, like they become readonly. This only happens to the first 5 editable columns the last 3 columns are ok and working.
Ive tried adding a DIV round the grid so the grid doesnt go right to the bottom of the webpage but the same issue occurs when the rows reach the bottom of the DIV.
Thanks
Hi Rakhee,
Can you please post the Grid's configuration (Markup + Backend code) so I can check out how it was setup?
Thank you. Below is markup
<asp:UpdatePanel ID="updGrid" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlGrid" runat="server">
<tlk:RadGrid ID="rg_ProcessBuilder" runat="server" Style="position: absolute; top: 280px; height:95%" Height="95%"
OnItemCreated="rg_ProcessBuilder_ItemCreated"
OnItemCommand="rg_ProcessBuilder_ItemCommand">
<MasterTableView CommandItemSettings-ShowAddNewRecordButton="false"
CommandItemDisplay="Top" AutoGenerateColumns="false"
DataKeyNames="Type,Stage,Description,Resource,SettingTime,SettingTimeUOM,RunTime,RunTimeUOM,UnitRunTime,UnitRunTimeUOM,Yield,Mode,BookingFactor,MonitorPoint,ResourceCost,StageCost">
<CommandItemSettings
ShowAddNewRecordButton="false"
ShowRefreshButton="false"
ShowSaveChangesButton="false"
ShowCancelChangesButton="false" />
<Columns>
<tlk:GridTemplateColumn HeaderText="ACTION" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="55px">
<HeaderStyle Width="70px" HorizontalAlign="Left" />
<ItemStyle Width="50px" HorizontalAlign="Left" />
<HeaderTemplate>
<tlk:RadButton ID="rbAction" runat="server" Font-Bold="false" ForeColor="Blue" Text="ACTION" OnClick="rbAction_Click"></tlk:RadButton>
</HeaderTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Select Action" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="35px" ItemStyle-Width="35px">
<HeaderStyle Width="70px" />
<ItemStyle Width="40px" HorizontalAlign="Center" />
<HeaderTemplate>
<tlk:RadDropDownList ID="rdlSelAction" runat="server" Width="65px">
<Items>
<tlk:DropDownListItem Text="" />
<tlk:DropDownListItem Text="Add" />
<tlk:DropDownListItem Text="Delete" />
<tlk:DropDownListItem Text="Change" />
</Items>
</tlk:RadDropDownList>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="ChkRow" runat="server" OnCheckedChanged="ChkRow_CheckedChanged" RowIndex="<%# Container.RowIndex %>" DataField="Checked" Enabled="true" />
</ItemTemplate>
</tlk:GridTemplateColumn>
<telerik:GridButtonColumn
CommandName="Copy" UniqueName="Copy" ItemStyle-HorizontalAlign="Center"
HeaderText="" HeaderStyle-Width="40px" ItemStyle-Width="40px"
Text=''
DataTextField="CopyStage"
ButtonType="LinkButton">
</telerik:GridButtonColumn>
<tlk:GridTemplateColumn HeaderText="Stage" UniqueName="Stage" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="40px" />
<ItemStyle Width="40px" />
<ItemTemplate>
<asp:TextBox ID="txtStage" runat="server"
Width="40px" Text='<%# Eval("Stage") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>" OnTextChanged="txtStage_TextChanged"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="In" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="55px">
<HeaderStyle Width="20px" />
<ItemStyle Width="20px" />
<ItemTemplate>
<asp:LinkButton ID="lnkIn" runat="server" Width="20px" OnClick="lnkIn_Click" Text='<%# DataBinder.Eval(Container.DataItem, "In") %>' ForeColor="Blue" Font-Underline="true" RowIndex="<%# Container.ItemIndex %>"></asp:LinkButton>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Type" UniqueName="Type" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="30px" />
<ItemStyle Width="30px" />
<ItemTemplate>
<%--<tlk:RadTextBox ID="txtType" Text='<%# DataBinder.Eval(Container.DataItem, "Type") %>' RowIndex="<%# Container.RowIndex %>" TextMode="SingleLine" Width="50px" runat="server"></tlk:RadTextBox>--%>
<asp:TextBox ID="txtType" runat="server"
Width="30px" Text='<%# Eval("Type") %>' AutoPostBack="true" ToolTip="Right click to select from list"
RowIndex="<%# Container.ItemIndex %>" OnTextChanged="txtType_TextChanged"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Description" UniqueName="Description" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="100px" />
<ItemStyle Width="100px" />
<ItemTemplate>
<asp:TextBox ID="txtDescription" runat="server" OnTextChanged="txtDescription_TextChanged"
Width="100px" Text='<%# Eval("Description") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Resource" UniqueName="Resource" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="70px" />
<ItemStyle Width="70px" />
<ItemTemplate>
<asp:TextBox ID="txtResource" runat="server"
Width="70px" Text='<%# Eval("Resource") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>" OnTextChanged="txtResource_TextChanged"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Setting Time" UniqueName="SettingTime" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:TextBox ID="txtSettingTime" runat="server"
Width="50px" Text='<%# Eval("SettingTime") %>' AutoPostBack="true" OnTextChanged="txtSettingTime_TextChanged"
RowIndex="<%# Container.ItemIndex %>"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="" UniqueName="SettingTimeUOM" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="50px">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:TextBox ID="txtSettingTimeUOM" runat="server"
Width="30px" Text='<%# Eval("SettingTimeUOM") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>" OnTextChanged="txtSettingTimeUOM_TextChanged"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Run Time" UniqueName="RunTime" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:TextBox ID="txtRunTime" runat="server" OnTextChanged="txtRunTime_TextChanged"
Width="50px" Text='<%# Eval("RunTime") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="" UniqueName="RunTimeUOM" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="50px">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:TextBox ID="txtRunTimeUOM" runat="server"
Width="30px" Text='<%# Eval("RunTimeUOM") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>" OnTextChanged="txtRunTimeUOM_TextChanged"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Unit Run Time" UniqueName="UnitRunTime" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:TextBox ID="txtUnitRunTime" runat="server" OnTextChanged="txtUnitRunTime_TextChanged"
Width="50px" Text='<%# Eval("UnitRunTime") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="" UniqueName="UnitRunTimeUOM" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="50px">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:TextBox ID="txtUnitRunTimeUOM" runat="server"
Width="30px" Text='<%# Eval("UnitRunTimeUOM") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>" OnTextChanged="txtUnitRunTimeUOM_TextChanged"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Yield" UniqueName="Yield" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:TextBox ID="txtYield" runat="server"
Width="50px" Text='<%# Eval("Yield") %>' AutoPostBack="true" OnTextChanged="txtYield_TextChanged"
RowIndex="<%# Container.ItemIndex %>"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Mode" UniqueName="Mode" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:TextBox ID="txtMode" runat="server"
Width="50px" Text='<%# Eval("Mode") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>" OnTextChanged="txtMode_TextChanged"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Booking Factor" UniqueName="BookingFactor" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="30px" />
<ItemStyle Width="30px" />
<ItemTemplate>
<asp:TextBox ID="txtBookingFactor" runat="server" OnTextChanged="txtBookingFactor_TextChanged"
Width="30px" Text='<%# Eval("BookingFactor") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>"></asp:TextBox>
</ItemTemplate>
</tlk:GridTemplateColumn>
<tlk:GridTemplateColumn HeaderText="Monitor Point" UniqueName="MonitorPoint" ShowFilterIcon="false" AllowFiltering="false" HeaderStyle-Width="85px">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:DropDownList ID="txtMonitorPoint" runat="server" OnSelectedIndexChanged="txtMonitorPoint_SelectedIndexChanged"
Width="50px" Text='<%# Eval("MonitorPoint") %>' AutoPostBack="true"
RowIndex="<%# Container.ItemIndex %>">
<Items>
<asp:ListItem Text="" />
<asp:ListItem Text="Y" />
<asp:ListItem Text="N" />
</Items>
</asp:DropDownList>
</ItemTemplate>
</tlk:GridTemplateColumn>
<telerik:GridBoundColumn
HeaderStyle-HorizontalAlign="Right"
ItemStyle-HorizontalAlign="Right"
DataField="ResourceCost"
HeaderText="Resource Cost Per HR"
UniqueName="ResourceCost">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
HeaderStyle-HorizontalAlign="Right"
ItemStyle-HorizontalAlign="Right"
DataField="StageCost"
HeaderText="Stage Cost Per Unit"
UniqueName="StageCost">
</telerik:GridBoundColumn>
<telerik:GridButtonColumn
CommandName="Attribute"
HeaderText="Attr"
Text="<<"
ButtonType="LinkButton" ItemStyle-ForeColor="Blue" ItemStyle-Font-Underline="true">
</telerik:GridButtonColumn>
<telerik:GridButtonColumn
CommandName="StageText"
HeaderText="Text"
Text="<<"
ButtonType="LinkButton" ItemStyle-ForeColor="Blue" ItemStyle-Font-Underline="true">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn
DataField="BuildDate"
HeaderText="BuildDate"
UniqueName="BuildDate"
Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
DataField="CostSet"
HeaderText="CostSet"
UniqueName="CostSet"
Visible="false">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<Selecting AllowRowSelect="false" EnableDragToSelectRows="false" />
<Scrolling AllowScroll="True"/>
</ClientSettings>
</tlk:RadGrid>
</asp:Panel>
<div style="bottom: 0px; position: absolute">
<cc1:TroposCustomValidator ID="tcv" runat="server" ErrorMessage="" Style="position: absolute; top: 0px; left: 5px;" Enabled="false" Display="None"></cc1:TroposCustomValidator>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Backend code to display the grid details
public void Load_Details_Grid(bool getDetails){
if (getDetails)
{
gridData = DataHandler.GetProcessDetails(UserContext, FlagB23, iPartNoTo.Text, vPartVer.Text, ipartNoVer.Text, iToProc.Text, iToProcVer.Text);
//first row will always be blank row for new stages so can do count >1
if (gridData.Count > 1)
{
//display cost set and build date from database read
vCostSet.Text = gridData[1].CostSet;
vLastCostSet.Text = gridData[1].BuildDate;
List<object> objects = new List<object>();
foreach (var d in gridData) objects.Add(d);
DataTable gridDataTable = Helpers.ListToDataTable(objects);
rg_ProcessBuilder.DataSource = gridDataTable;
rg_ProcessBuilder.DataBind();
}
}
else
{
rg_ProcessBuilder.DataSource = null;
rg_ProcessBuilder.Rebind();
}
}
Hi Rakhee,
Thanks for sharing the code. It seems you have a customized the Controls as well using Template with your own custom components instead of the built-in elements. With that in mind, the issues are likely coming from the custom implementation rather than from the Grid. As every customization is unique to developers, we can't guess where the things would go wrong, however, based on the shared code snippets I can recommend a few adjustments.
1. Data Binding
Binding data using the DataSource + DataBind() is not supported. Please switch to using the NeedDataSource event (this a must). Also, avoid setting the data source to "NULL", instead assign a table with the structure but empty.
Example
protected void rg_ProcessBuilder_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) { // ... some code ... if (getDetails) { // ... some code ... rg_ProcessBuilder.DataSource = gridDataTable; rg_ProcessBuilder.DataBind(); // ... some code ... } else { // ... some code ... //grid.DataSource = null; // Never set the datasource to null rg_ProcessBuilder.DataSource = gridDataTable.Clone(); // Always bind a structured table with the schema even if empty rg_ProcessBuilder.Rebind(); // ... some code ... } }
NOTE: The NeedDataSource should only be used for Data binding. Writing logics and other code in here could increase the page loading time and greatly affecting the performance.
2. Correct Template for Editing
To use the Grid's editing functionality, you will need to place the Form Controls within the EditItemTemplate instead of the ItemTemplate. That is the designated container for the Form controls. Here is a great example of having all the Rows in edit mode and correctly set up: Update all, individual or selected rows using RadGrid with InPlace edit mode
Try applying these changes and see if that will help resolve the issue.