Hi,
I have a textbox that is inside the commanditemtemplate of a rad grid. I am trying to change the value of this textbox client side when a row is clicked in the rad grid. My problem is that the value is not being displayed. I placed an alert in the script and the value returned is the correct value it just isn't displayed on the screen.
If I place a textbox outside the radgrid and change the value client side it works.
Thanks for your help.
I have a textbox that is inside the commanditemtemplate of a rad grid. I am trying to change the value of this textbox client side when a row is clicked in the rad grid. My problem is that the value is not being displayed. I placed an alert in the script and the value returned is the correct value it just isn't displayed on the screen.
If I place a textbox outside the radgrid and change the value client side it works.
Thanks for your help.
function RowSelected(sender, eventArgs) {
var radGrid = $get('rgvMainGrid')
var dataItem = $get(eventArgs.get_id());
var grid = sender;
var MasterTable = grid.get_masterTableView();
var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
var txtJob = $telerik.findControl(radGrid, 'rtxJob');
//Text Box That Is Outside The Grid – Value Is Changed
var txtText = document.getElementById('txtTest');
txtText.value = MasterTable.getCellByColumnUniqueName(row, "Job").innerHTML;
//Text Box That Is Inside The Grid – Value Is Not Changed
txtJob.value = MasterTable.getCellByColumnUniqueName(row, "Job").innerHTML;
alert(txtJob.value);
}
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WBF PRJ Forecasting.aspx.vb" Inherits="IPS_Gateway.WBF_PRJ_Forecasting" %><!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" ><head runat="server"> <title></title></head> <script src="../../Scripts/GridScroll.js" type="text/javascript"></script> <script src="../../Scripts/GridFunctions.js" type="text/javascript"></script> <script src="../../Scripts/GridTemplateToolbar.js" type="text/javascript"></script> <script src="../../Scripts/ControlSelectOnFocus.js" type="text/javascript"></script> <script type="text/javascript" > function RowSelected(sender, eventArgs) { var radGrid = $get('rgvMainGrid') var dataItem = $get(eventArgs.get_id()); var grid = sender; var MasterTable = grid.get_masterTableView(); var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()]; var txtJob = $telerik.findControl(radGrid, 'rtxJob'); var txtText = document.getElementById('txtTest'); txtText.value = MasterTable.getCellByColumnUniqueName(row, "Job").innerHTML; txtJob.value = MasterTable.getCellByColumnUniqueName(row, "Job").innerHTML; alert(txtJob.value); } /*2 functions needed because $find("<%=rgvMainGrid.ClientID %>")/$get('rgvMainGrid') will not return the client id when in an exeternal js file, therefore the client id value must be passed to the function from the calling page*/ function pageLoad() { HideButtonsExternal($find("<%=rgvMainGrid.ClientID %>")); } function ShowHideFilterFields(sender, args) { ShowHideFilterFieldsExternal(sender, args, $find("<%=rgvMainGrid.ClientID %>")); } function ShowHideCommandTemplate(sender, args) { ShowHideCommandTemplateExternal(sender, args, $get('rgvMainGrid')); } function GridTemplateOnSelectedIndexChanged(sender, args) { GridTemplateOnSelectedIndexChangedExternal(sender, args, $get('rgvMainGrid')); } function DeleteOnClientClicking(sender, args) { DeleteOnClientClickingExternal(sender, args, $find("<%=rgvMainGrid.ClientID %>")); } function EditOnClientClicking(sender, args) { EditOnClientClickingExternal(sender, args, $find("<%=rgvMainGrid.ClientID %>")); } function TemplateDeleteOnClientClicking(sender, args) { TemplateDeleteOnClientClickingExternal(sender, args, $find("<%=rgvMainGrid.ClientID %>")); } </script> <body> <form id="form1" runat="server"> <act:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true" AsyncPostBackTimeOut="600"/> <telerik:RadWindowManager ID="rwmManager" runat="server"></telerik:RadWindowManager> <telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="loading"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="rgvMainGrid" > <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="rgvMainGrid" LoadingPanelID="loading" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="loading" runat="server" Skin="Windows7" EnableEmbeddedSkins="true" /> <asp:SqlDataSource ID="SQLDS_ForecastedCostSummary" runat="server" ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Project].[DSP_ForecastedCost-Sel]" /> <asp:SqlDataSource ID="SQLDS_ForecastedCostEntry" runat="server" ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Project].[DSP_ForecastedHoursEntry-Sel]" /> <asp:panel ID="pnlPage" runat="server" cssClass="css_GPC01_Panel_MainContent"> <wuc:PageHeader id="wucPageHeader" runat="server"></wuc:PageHeader> <asp:Panel ID="pnlPageContent" runat="server" cssClass="css_GPC01_Panel_PageContent" > <asp:Panel ID="Panel1" runat="server" cssClass="css_GPC01_Panel_PageContent" > <asp:UpdatePanel ID="uppSelection" runat="server" > <ContentTemplate> <asp:Table ID="tblSelection" runat="server" style=" border-collapse:collapse; margin-top:0px;" cellspacing="0" cellpadding="0" Width="1200px"> <asp:TableRow runat="server" CssClass="css_GFS01_TableHeading_Blue" > <asp:TableCell ID="tcLblLastPayroll" runat="server" Width="100px" ><asp:Label ID="lblLastPayroll" runat="server" Text="Last Payroll Date" CssClass="css_GFS01_Heading_Small_Center" Width="100px" /> </asp:TableCell> <asp:TableCell ID="tcLblBeginDate" runat="server" Width="100px" ><asp:Label ID="lblBeginDate" runat="server" Text="Begin Date" cssClass="css_GFS01_Heading_Small_Center" Width="100px"/></asp:TableCell> <asp:TableCell ID="tcLblActivityDate" runat="server" Width="100px"><asp:Label ID="lblActivityDate" runat="server" Text="Activity Date" cssClass="css_GFS01_Heading_Small_Center" Width="100px" /> </asp:TableCell> <asp:TableCell ID="tcLblTrxType" runat="server" Width="200px"><asp:Label ID="lblTrxType" runat="server" Text="Transaction Type" CssClass="css_GFS01_Heading_Small_Center" Width="200px"/> </asp:TableCell> <asp:TableCell ID="tcLblJob" runat="server" Width="100px"><asp:Label ID="lblJob" runat="server" Text="Job" CssClass="css_GFS01_Heading_Small_Center" Width="100px"/> </asp:TableCell> <asp:TableCell ID="tcLblEmployeeName" runat="server" Width="200px"><asp:Label ID="lblEmployeeName" runat="server" Text="Employee" CssClass="css_GFS01_Heading_Small_Center" Width="200px"/> </asp:TableCell> <asp:TableCell ID="tcLblCostcLblodeDiscipline" runat="server" Width="120px"><asp:Label ID="lblCostCodeDiscipline" runat="server" Text="Cost Code Discipline" CssClass="css_GFS01_Heading_Small_Center" Width="120px"/> </asp:TableCell> <asp:TableCell ID="tcLblEmployeeDiscipline" runat="server" Width="100px"><asp:Label ID="lblEmployeeDiscipline" runat="server" Text="Employee Discipline" CssClass="css_GFS01_Heading_Small_Center" Width="100px"/> </asp:TableCell> </asp:TableRow> <asp:TableRow ID="trSelection" runat="server" style="border-style:solid;border-width:thin;" Width="1200px"> <asp:TableCell ID="tcLastPayroll" runat="server" Width="100px"><asp:TextBox ID="txtLastPayroll" runat="server" CssClass="css_GFS01_Text_Small_Center" Width="100px" EnableViewState="true" Enabled="false"/> </asp:TableCell> <asp:TableCell ID="tcBeginDate" runat="server" Width="100px"><asp:TextBox ID="txtBeginDate" runat="server" CssClass="css_GFS01_Text_Small_Center" Width="100px" EnableViewState="true"/><act:CalendarExtender ID="clnBeginDae" runat="server" TargetControlID="txtBeginDate" /></asp:TableCell> <asp:TableCell ID="tcActivityDate" runat="server" Width="100px"><asp:TextBox ID="txtActivityDate" runat="server" CssClass="css_GFS01_Text_Small_Center" Width="100px" EnableViewState="true"/> <act:CalendarExtender ID="clnActivityDate" runat="server" TargetControlID="txtActivityDate" /></asp:TableCell> <asp:TableCell ID="tcTrxType" runat="server" Width="200px"><telerik:RadComboBox ID="rcbTrxType" runat="server" Width="200px" EnableViewState="true" HighlightTemplatedItems="true" EnableEmbeddedSkins="true" Skin="WebBlue" OnClientFocus="OnClientFocus"/></asp:TableCell> <asp:TableCell ID="tcJob" runat="server" Width="100px"><ucf25:JobNumber ID="rcbJobNumber" runat="server" OnIndexChangedJobNumberHandler="JobNumber_OnSelectedIndexChanged" EnableViewState="true" /> </asp:TableCell> <asp:TableCell ID="tcEmployeeName" runat="server" Width="200px"><ucf16:EmployeeName ID="rcbEmployeeName" runat="server" OnIndexChangedEmployeeNameHandler="EmployeeName_OnSelectedIndexChanged" EnableViewState="true"/> </asp:TableCell> <asp:TableCell ID="tcCostCodeDiscipline" runat="server" Width="120px"><ucf26:CostCodeDiscipline ID="rcbCostCodeDiscipline" runat="server" OnIndexChangedCostCodeDisciplineHandler="CostCodeDiscipline_OnSelectedIndexChanged" EnableViewState="true"/> </asp:TableCell> <asp:TableCell ID="tcEmployeeDiscipline" runat="server" Width="100px"><ucf20:EmployeeDiscipline ID="rcbEmployeeDiscipline" runat="server" OnIndexChangedEmployeeDisciplineHandler="EmployeeDiscipline_OnSelectedIndexChanged" EnableViewState="true"/> </asp:TableCell> </asp:TableRow> </asp:Table> </ContentTemplate> </asp:UpdatePanel><telerik:RadTextBox ID="txtTest" runat="server" EnableViewState= "true" Text="* /> <telerik:RadAjaxPanel ID="rapUpdateGrid" runat="server" > <telerik:RadGrid ID="rgvMainGrid" runat="server" DataSourceID="SQLDS_ForecastedCostEntry" EnableEmbeddedSkins="true" Skin="Office2010Silver" Height="460px" Width="1200px" EnableViewState="true" AutoGenerateColumns="false" AllowMultiRowSelection="false" AllowAutomaticDeletes="false" AllowAutomaticInserts="true" AllowAutomaticUpdates="true" EnableLinqExpressions="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowFilteringByColumn="false" AllowSorting="true" AllowPaging="true" PageSize="1000"> <HeaderStyle Font-Bold="true" HorizontalAlign ="Center" VerticalAlign="Middle" Wrap="false" font-size="10px"/> <ItemStyle HorizontalAlign="Right" /> <AlternatingItemStyle HorizontalAlign="Right" /> <HeaderStyle HorizontalAlign="Center" Width="40px"/> <PagerStyle AlwaysVisible="true" Mode="NextPrevNumericAndAdvanced"/> <ExportSettings IgnorePaging="true" OpenInNewWindow="true" /> <FooterStyle HorizontalAlign="Right" /> <GroupingSettings GroupContinuedFormatString="" GroupContinuesFormatString="" /> <ClientSettings AllowColumnsReorder="true" AllowDragToGroup="false" AllowColumnHide="false" ReorderColumnsOnClient="true" EnablePostBackOnRowClick="false" AllowExpandCollapse="true" EnableRowHoverStyle="true" ClientEvents-OnRowClick="RowSelected"> <Selecting AllowRowSelect="true" /> <Resizing AllowColumnResize="True" AllowRowResize="False" EnableRealTimeResize="True" ResizeGridOnColumnResize="true" ></Resizing> <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="2" /> </ClientSettings> <ExportSettings HideStructureColumns="true" ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true" /> <MasterTableView DataSourceID="SQLDS_ForecastedCostEntry" Name="MasterGrid" EnableViewState="true" AllowMultiColumnSorting="true" ShowFooter="true" ShowGroupFooter="true" ShowHeadersWhenNoRecords="true" EditMode="InPlace" CommandItemDisplay="Top" GroupLoadMode="Client" > <CommandItemTemplate> <asp:Table ID="tblCommandTemplate" runat="server" Width="1220px" CellSpacing="0" CellPadding="0"> <asp:TableRow ID="trowCommandTemplate1" Height="25px" runat="server" style="display:block;" > <asp:TableCell > <telerik:RadButton ID="rbtAdd" runat="server" CommandName="InitInsert" Skin="Transparent" Text="Add" Icon-PrimaryIconURL="<%$ Resources:Images,AddRecord16%>" style="position:absolute;left:10px;font-size:12px;" ToolTip="Add New Record" /> <telerik:RadButton ID="rbtEdit" runat="server" CommandName="EditSelected" Skin="Transparent" Text="Edit" Icon-PrimaryIconURL="<%$ Resources:Images,EditRecord16%>" style="position:absolute;left:70px;font-size:12px;" ToolTip="Edit Record" Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>' OnClientClicking="EditOnClientClicking" /> <telerik:RadButton ID="rbtDelete" runat="server" CommandName="DeleteSelected" Skin="Transparent" Text="Delete" Icon-PrimaryIconURL="<%$ Resources:Images,DeleteRecord16%>" style="position:absolute;left:129px;font-size:12px;" ToolTip="Delete Record" Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>' OnClientClicking="DeleteOnClientClicking" /> <telerik:RadButton ID="rbtCancel" runat="server" CommandName="CancelAll" Skin="Transparent" Text="Cancel" Icon-PrimaryIconURL="<%$ Resources:Images,CancelRecord16%>" style="position:absolute;left:10px;font-size:12px;" ToolTip="Cancel Add/Edit" Visible='<%# rgvMainGrid.EditIndexes.Count > 0 Or rgvMainGrid.MasterTableView.IsItemInserted %>' /> <telerik:RadButton ID="rbtSaveNew" runat="server" CommandName="PerformInsert" Skin="Transparent" Text="Save" Icon-PrimaryIconURL="<%$ Resources:Images,SaveRecord16%>" style="position:absolute;left:80px;font-size:12px;" ToolTip="Save New Record" Visible='<%# rgvMainGrid.MasterTableView.IsItemInserted%>' /> <telerik:RadButton ID="rbtSave" runat="server" CommandName="UpdateEdited" Skin="Transparent" Text="Save" Icon-PrimaryIconURL="<%$ Resources:Images,SaveRecord16%>" style="position:absolute;left:80px;font-size:12px;" ToolTip="Save Edited Record" Visible='<%# rgvMainGrid.EditIndexes.Count > 0 AND Not rgvMainGrid.MasterTableView.IsItemInserted%>'/> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell> <telerik:RadTextBox ID="rtxJob" runat="server" Width="25px" Text="Job" EnableViewState="true" /> <telerik:RadTextBox ID="rtxJobName" runat="server" Width="100px" /> <telerik:RadTextBox ID="rtxExtra" runat="server" Width="25px" /> <telerik:RadTextBox ID="rtxCostCode" runat="server" Width="35px" /> <telerik:RadTextBox ID="rtxCostCodeDescription" runat="server" Width="100px" /> <telerik:RadTextBox ID="rtxCostCodeDiscipline" runat="server" Width="50px" /> <telerik:RadTextBox ID="rtxContractType" runat="server" Width="50px" /> <telerik:RadTextBox ID="rtxProjectManager" runat="server" Width="75px" /> <telerik:RadTextBox ID="rtxLaborRateTable" runat="server" Width="50px" /> </asp:TableCell> </asp:TableRow> </asp:Table> </CommandItemTemplate> <Columns> <telerik:GridBoundColumn DataField="ArgusDBID" UniqueName="ArgusDBID" HeaderText="DBID" Visible="false" > </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="Job" UniqueName="Job" HeaderText="Job" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Left" > </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="JobName" UniqueName="JobName" HeaderText="Job Name" HeaderStyle-Width="150px" ItemStyle-HorizontalAlign="Left" /> <telerik:GridBoundColumn DataField="ContractType" UniqueName="ContractType" HeaderText="Type" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Left" /> <telerik:GridBoundColumn DataField="ProjectManager" UniqueName="ProjectManager" HeaderText="Project Manager" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Left" /> <telerik:GridBoundColumn DataField="LaborRateTable" UniqueName="LaborRateTable" HeaderText="Rate Table" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Left" /> <telerik:GridBoundColumn DataField="Extra" UniqueName="Extra" HeaderText="Extra" HeaderStyle-Width="50px" ReadOnly="true" ItemStyle-HorizontalAlign="Left" /> <telerik:GridBoundColumn DataField="CostCode" UniqueName="CostCode" HeaderStyle-Width="50px" HeaderText="Cost Code" ItemStyle-HorizontalAlign="Left" /> <telerik:GridBoundColumn DataField="CostCodeDescription" UniqueName="CostCodeDescription" HeaderStyle-Width="150px" HeaderText="Description" ItemStyle-HorizontalAlign="Left" /> <telerik:GridBoundColumn DataField="CostCodeDiscipline" UniqueName="CostCodeDiscipline" HeaderStyle-Width="100px" HeaderText="Description" ItemStyle-HorizontalAlign="Left" /> <telerik:GridBoundColumn DataField="EmployeeName" UniqueName="EmployeeName" HeaderStyle-Width="110px" HeaderText="Employee" ItemStyle-HorizontalAlign="Left" ReadOnly="true"/> <telerik:GridBoundColumn DataField="Misc1" UniqueName="Misc1" HeaderStyle-Width="110px" HeaderText="Emp Discipline" ItemStyle-HorizontalAlign="Left" ReadOnly="true"/> <telerik:GridBoundColumn DataField="BeginningHours" UniqueName="BeginningHours" HeaderText="JTD" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek1" UniqueName="HoursWeek1" HeaderText="Week1" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek2" UniqueName="HoursWeek2" HeaderText="Week2" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek3" UniqueName="HoursWeek3" HeaderText="Week3" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek4" UniqueName="HoursWeek4" HeaderText="Week4" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek5" UniqueName="HoursWeek5" HeaderText="Week5" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek6" UniqueName="HoursWeek6" HeaderText="Week6" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek7" UniqueName="HoursWeek7" HeaderText="Week7" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek8" UniqueName="HoursWeek8" HeaderText="Week8" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek9" UniqueName="HoursWeek9" HeaderText="Week9" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek10" UniqueName="HoursWeek10" HeaderText="Week10" DataFormatString="{0:F2}" Aggregate="Sum"/> <telerik:GridBoundColumn DataField="HoursWeek11" UniqueName="HoursWeek11" HeaderText="Week11" DataFormatString="{0:F2}" Aggregate="Sum"/> </Columns> </MasterTableView> </telerik:RadGrid> </telerik:RadAjaxPanel> </asp:Panel> </asp:Panel> </asp:panel> </form></body></html>1 Answer, 1 is accepted
0
Shinu
Top achievements
Rank 2
Rank 2
answered on 11 Jun 2012, 04:41 AM
Hello Tracy,
Here is the sample code that I tried which worked as expected.
JS:
Thanks,
Shinu.
Here is the sample code that I tried which worked as expected.
JS:
<script type="text/javascript">function OnRowSelected(sender, eventArgs) { var master = sender.get_masterTableView(); var rtxt = $telerik.findControl(sender.get_element(), 'rtxJob'); var row = master.get_dataItems()[eventArgs.get_itemIndexHierarchical()]; rtxt.set_value(master.getCellByColumnUniqueName(row, "Job").innerHTML);}</script>Thanks,
Shinu.