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

timing is everything

6 Answers 128 Views

Grid

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

Elliott asked on 11 Apr 2013, 05:21 PM

I have a grid of items to order that gets filled from a drop down of vendors
if there is only one vendor - and the vendor only has one item then the grid gets populated - and the item is selected
for some reason, the selection script references controls not yet instantiated when the script that counts items runs

script to select one item

// only one item in page - select it

function MasterTableViewCreated(sender, eventArgs) {

var theGrid = sender.get_masterTableView();

var kount = theGrid.get_dataItems().length;

if (kount == 1) {

dont_rebuild_grid = true;

theGrid.selectItem(theGrid.get_dataItems()[0].get_element());

dont_rebuild_grid = false;

}

script to select an item

function ItemsRowSelected(sender, eventArgs) {

var theGrid = sender.get_masterTableView();

var k = eventArgs.get_itemIndexHierarchical();

var row = theGrid.get_dataItems()[k];

var getValues = theGrid.extractValuesFromItem(k);

var ItemID = theGrid.getCellByColumnUniqueName(row, "ItemID").innerHTML;

var ShipStart = theGrid.getCellByColumnUniqueName(row, "ShipStart").innerHTML;

var ShipEnd = theGrid.getCellByColumnUniqueName(row, "ShipEnd").innerHTML;

var ItemDescription = theGrid.getCellByColumnUniqueName(row, "ItemDescription").innerHTML;

var NetCost = theGrid.getCellByColumnUniqueName(row, "NetCost").innerHTML;

var BoothNumber = theGrid.getCellByColumnUniqueName(row, "BoothNumber").innerHTML;

var VendorNumber = theGrid.getCellByColumnUniqueName(row, "VendorNumber").innerHTML;

var rntbOrderCode = $find('<%=rntbOrderCode.ClientID %>');

var rcbVendor = $find('<%=rcbVendor.ClientID %>');

if (dont_rebuild_grid) {

if (rcbVendor) {

var rcbiVendor = rcbVendor.findItemByValue(VendorNumber);

if (rcbiVendor) {

rcbiVendor.select();

}

dont_rebuild_grid = false;

}

// IE

if (ItemDescription.indexOf("NOBR") > 0) {

ItemDescription = ItemDescription.replace('</NOBR>', '');

ItemDescription = ItemDescription.replace('<NOBR>', '');

}

// just about everything else

else {

ItemDescription = ItemDescription.replace('</nobr>', '');

ItemDescription = ItemDescription.replace('<nobr>', '');

}

ItemDescription = ItemDescription.replace('&', '&');

document.forms["form1"].txtItemID.value = ItemID;

document.forms["form1"].lblInfo.value = ItemDescription + ' ' + ItemID;

document.forms["form1"].lblDelivery.value = "";

document.forms["form1"].txtNetCost.value = NetCost.replace('$', '');

// document.forms["form1"].txtBoothNumber.value = BoothNumber;

document.forms["form1"].txtVendor.value = VendorNumber;

var startDate = $find("<%= rtbStart.ClientID %>");

var endDate = $find("<%= rtbEnd.ClientID %>");

if (startDate != null) {

startDate.set_value(ShipStart);

}

if (endDate != null) {

endDate.set_value(ShipEnd);

}

var i = 0;

var j = 0;

for (j = 0; j < 1; j++) {

for (i = 0; i < document.forms["form1"].txtStoreCount.value; i++) {

var actual = $find("sd" + j + i + "_rntbQty");

actual.set_value('');

}

var first_date = $find("<%= del.ClientID %>");

var ship_start = createDate(ShipStart);

first_date.set_selectedDate(ship_start);

// order code textbox not always found

if (rntbOrderCode != null) {

rntbOrderCode.set_value('');

}

return true;

}

any advice on how to proceed?
thanks

6 Answers, 1 is accepted

answered on 16 Apr 2013, 01:22 PM

Items.jpg

Johny
rtbStart and rtbEnd are RadTextBox controls
there is one or more RadNumericTextboxes with a suffix of _rntbQty
when the ItemsRowSelected script is triggered by the MasterTableViewCreated event handler none of the controls are built yet

that cat is so adorable

answered on 19 Apr 2013, 09:18 AM

Hi Marianne,

Are you able to obtain a reference to the rtbStart and rtbEnd RadTextBoxes using the code shown below? As for obtaining a reference to the rntQty RadNumericTextBoxes I suggest that you use:

var qtyNumericTextBox = $find(theNumericTextBoxContainer, '<%= rntbQty.ClientID %>');

If this does not prove helpful please show us your entire markup so we could give you a more precise answer.

All the best,
Angel Petrov
the Telerik team

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 their blog feed now.

answered on 19 Apr 2013, 03:21 PM

Angel - this logic is in three other web sites that don't have a problem
the difference is that the grid cannot fill on the initial page - the grid is filled not from a dropdown but a textbox, which is always empty on the initial load
anyway, here is most of the page - I left out another grid

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Items.aspx.VB" Inherits="Items" %>

<%@ Register Src="ShipData.ascx" TagName="ShipData" TagPrefix="shipping" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 id="Head1" runat="server">

<title>Order System</title>

<script type="text/javascript" language="JavaScript" src="javascripts/calendar1.js"></script>

<script type="text/javascript" language="JavaScript" src="javascripts/calendar2.js"></script>

<script type="text/javascript" language="JavaScript" src="javascripts/RADcalendar2.js"></script>

<link rel="Stylesheet" type="text/css" media="screen" href="WebPages.css" />

<style type="text/css">

.style1

{

width: 360px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadCodeBlock ID="rcBlock" runat="server">

<script type="text/javascript">

<!--

function RowDblClick(sender, eventArgs) {

idx = eventArgs.get_itemIndexHierarchical();

theGrid.selectItem(theGrid.get_dataItems()[idx].get_element());

}

function RowClick(sender, eventArgs) {

idx = eventArgs.get_itemIndexHierarchical();

theGrid.selectItem(theGrid.get_dataItems()[idx].get_element());

}

// only one item in page - select it

function MasterTableViewCreated(sender, eventArgs) {

var theGrid = sender.get_masterTableView();

var kount = theGrid.get_dataItems().length;

if (kount == 1) {

dont_rebuild_grid = true;

theGrid.selectItem(theGrid.get_dataItems()[0].get_element());

dont_rebuild_grid = false;

}

// from PowerBuys

var dont_rebuild_grid = false;

function onClientSelectedIndexChanged(sender, eventArgs) {

if (dont_rebuild_grid) {

}

else {

dont_rebuild_grid = false;

var vendor = eventArgs.get_item().get_value();

__doPostBack("rcbVendor", vendor);

}

// do not allow entry of comma or dot in textboxes

function OnKeyPress(sender, args) {

var uniCode = args.get_keyCode();

if (uniCode > 43 & uniCode < 47) {

args.set_cancel(true);

}

function ItemsRowSelected(sender, eventArgs) {

var theGrid = sender.get_masterTableView();

var k = eventArgs.get_itemIndexHierarchical();

var row = theGrid.get_dataItems()[k];

var getValues = theGrid.extractValuesFromItem(k);

var ItemID = theGrid.getCellByColumnUniqueName(row, "ItemID").innerHTML;

var ShipStart = theGrid.getCellByColumnUniqueName(row, "ShipStart").innerHTML;

var ShipEnd = theGrid.getCellByColumnUniqueName(row, "ShipEnd").innerHTML;

var ItemDescription = theGrid.getCellByColumnUniqueName(row, "ItemDescription").innerHTML;

var NetCost = theGrid.getCellByColumnUniqueName(row, "NetCost").innerHTML;

var BoothNumber = theGrid.getCellByColumnUniqueName(row, "BoothNumber").innerHTML;

var VendorNumber = theGrid.getCellByColumnUniqueName(row, "VendorNumber").innerHTML;

var rntbOrderCode = $find('<%=rntbOrderCode.ClientID %>');

var rcbVendor = $find('<%=rcbVendor.ClientID %>');

if (dont_rebuild_grid) {

if (rcbVendor) {

var rcbiVendor = rcbVendor.findItemByValue(VendorNumber);

if (rcbiVendor) {

rcbiVendor.select();

}

dont_rebuild_grid = false;

}

// IE

if (ItemDescription.indexOf("NOBR") > 0) {

ItemDescription = ItemDescription.replace('</NOBR>', '');

ItemDescription = ItemDescription.replace('<NOBR>', '');

}

// just about everything else

else {

ItemDescription = ItemDescription.replace('</nobr>', '');

ItemDescription = ItemDescription.replace('<nobr>', '');

}

ItemDescription = ItemDescription.replace('&', '&');

document.forms["form1"].txtItemID.value = ItemID;

document.forms["form1"].lblInfo.value = ItemDescription + ' ' + ItemID;

document.forms["form1"].lblDelivery.value = "";

document.forms["form1"].txtNetCost.value = NetCost.replace('$', '');

// document.forms["form1"].txtBoothNumber.value = BoothNumber;

document.forms["form1"].txtVendor.value = VendorNumber;

var startDate = $find("<%= rtbStart.ClientID %>");

var endDate = $find("<%= rtbEnd.ClientID %>");

if (startDate != null) {

startDate.set_value(ShipStart);

}

if (endDate != null) {

endDate.set_value(ShipEnd);

}

var i = 0;

var j = 0;

for (j = 0; j < 1; j++) {

for (i = 0; i < document.forms["form1"].txtStoreCount.value; i++) {

var actual = $find("sd" + j + i + "_rntbQty");

actual.set_value('');

}

var first_date = $find("<%= del.ClientID %>");

var ship_start = createDate(ShipStart);

first_date.set_selectedDate(ship_start);

// order code textbox not always found

if (rntbOrderCode != null) {

rntbOrderCode.set_value('');

}

return true;

}

-->

</script>

</telerik:RadCodeBlock>

<telerik:RadScriptManager ID="rsManager" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">

</asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="raManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rcbVendor">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgItems" />

<telerik:AjaxUpdatedControl ControlID="rcbVendor" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="rgItems">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgItems" />

<telerik:AjaxUpdatedControl ControlID="rcbVendor" />

<telerik:AjaxUpdatedControl ControlID="rntbOrderCode" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="rgOrder">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgOrder" />

<telerik:AjaxUpdatedControl ControlID="rcbVendor" />

<telerik:AjaxUpdatedControl ControlID="lblInfo" />

<telerik:AjaxUpdatedControl ControlID="lblBoothNumber" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<asp:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<table border="0" cellpadding="1" cellspacing="1" style="width: 1015px" >

<tr>

<td>

<asp:Label ID="lblTrace" Visible="false" runat="server" />

</td>

<td>

<table cellpadding="0" cellspacing="0">

<tr>

<td>

<telerik:RadNumericTextBox ID="rntbOrderCode" MinValue="1" MaxValue="99999" MaxLength="5" Font-Names="Verdana" Font-Size="X-Small" Height="22px" Width="54px" runat="server">

<NumberFormat DecimalDigits="0" GroupSeparator="" />

<ClientEvents OnKeyPress="OnKeyPress" />

</telerik:RadNumericTextBox>

</td>

<td>

<telerik:RadButton ID="rbOrderCode" Text="Order Code" OnClick="rbOrderCode_Click" Skin="Hay" AccessKey="F" ToolTip="Alt + F" runat="server" >

<Icon SecondaryIconCssClass="rbSearch" SecondaryIconRight="4" SecondaryIconTop="4" />

</telerik:RadButton>

</td>

</tr>

</table>

</td>

<%-- <td style="width: 118px; background-color: #e6e6fa;" valign="middle"><a id="lnkShowOrder" href="#" style="font-size: 8pt; font-family: arial; color: #0000cc" onclick="javascript:return GetReport()">| View Show Reports</a></td>--%>

<%-- <td style="width: 112px; background-color: #e6e6fa;" valign="middle"><a id="lnkChainOrder" href="#" style="font-size: 8pt; font-family: arial; color: #0000cc" onclick="javascript:return GetChainOrder()">| Chain Stores Order</a></td>--%>

<td style="width: 76px; background-color: #e6e6fa;" valign="middle"><a id="lnkInstruction" href="#" style="font-size: 8pt; font-family: arial; color: #0000cc" onclick="javascript:return GetInstruct()">| Instructions</a></td>

<td>\</td>

<td align="right" >

<table cellpadding="0" cellspacing="0">

<tr>

<td style="font-family:Arial;">Booth </td>

<td>

<asp:Label ID="lblBoothNumber" width="40px" Font-Names="Arial" runat="server" />

</td>

<td> </td>

<td>

<telerik:RadComboBox ID="rcbVendor" AutoPostBack="false" ValueType="System.Int32" OnClientSelectedIndexChanged="onClientSelectedIndexChanged" width="280px" runat="server" />

</td>

</tr>

</table>

</td>

</tr>

</table>

\ <div>

<telerik:RadGrid ID="rgItems" OnNeedDataSource="rgItems_NeedDataSource" OnItemDataBound="rgItems_ItemDataBound" Skin="Hay" width="1014px" runat="server" >

<GroupingSettings CaseSensitive="false" />

<MasterTableView DataKeyNames="ItemID" AutoGenerateColumns="false" AllowSorting="true" AllowPaging="false" AllowFilteringByColumn="False" EditMode="InPlace" Width="99%" >

<Columns>

<telerik:GridBoundColumn UniqueName="ItemDescription" DataField="ItemDescription" HeaderText="Description" DataFormatString="<nobr>{0}</nobr>" ReadOnly="true" >

</telerik:GridBoundColumn>

<telerik:GridNumericColumn UniqueName="Pack" DataField="Pack" HeaderText="Pack" DataType="System.Int32" ReadOnly="True" >

<HeaderStyle HorizontalAlign="Right" Width="50px" />

<ItemStyle HorizontalAlign="Right" />

</telerik:GridNumericColumn>

<telerik:GridBoundColumn UniqueName="ItemSize" DataField="ItemSize" HeaderText="Size" DataFormatString="<nobr>{0}</nobr>" ReadOnly="true" >

<HeaderStyle Width="70px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="UOM" DataField="UOM" HeaderText="UOM" ReadOnly="true" >

<HeaderStyle Width="70px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="UPC" DataField="UPC" HeaderText="UPC" ReadOnly="true" >

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridNumericColumn UniqueName="NetCost" DataField="NetCost" DataType="System.Decimal" DataFormatString="{0:c}" HeaderText="Net Cost" ReadOnly="true" >

<HeaderStyle Width="50px" />

<ItemStyle HorizontalAlign="Right" />

</telerik:GridNumericColumn>

<telerik:GridNumericColumn UniqueName="Retail" DataField="Retail" DataType="System.Decimal" DataFormatString="{0:c}" HeaderText="SRP" ReadOnly="true" >

<HeaderStyle Width="50px" />

<ItemStyle HorizontalAlign="Right" />

</telerik:GridNumericColumn>

<telerik:GridNumericColumn UniqueName="ItemID" DataField="ItemID" HeaderText="Item" DataType="System.Int32" ReadOnly="True" >

<ItemStyle HorizontalAlign="Right" />

</telerik:GridNumericColumn>

<telerik:GridDateTimeColumn UniqueName="ShipStart" DataField="ShipStart" HeaderText="Del Start" DataType="System.DateTime" PickerType="None" DataFormatString="{0:d}" ReadOnly="true" >

<HeaderStyle Width="80px" />

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn UniqueName="ShipEnd" DataField="ShipEnd" HeaderText="Del End" DataType="System.DateTime" PickerType="None" DataFormatString="{0:d}" ReadOnly="true" >

<HeaderStyle Width="80px" />

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn UniqueName="BoothNumber" DataField="BoothNumber" HeaderText="Booth" ReadOnly="true" >

<HeaderStyle Width="40px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="VendorNumber" DataField="VendorNumber" HeaderText="Vendor" ReadOnly="true" >

<HeaderStyle Width="52px" />

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="true" />

<ClientEvents OnRowSelected="ItemsRowSelected" />

<ClientEvents OnMasterTableViewCreated="MasterTableViewCreated" />

</ClientSettings>

<SelectedItemStyle ForeColor="Maroon" />

</telerik:RadGrid>

</ContentTemplate>

</asp:UpdatePanel>

</div>

<div>

<asp:UpdatePanel id="UpdatePanel2" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<table>

<tr>

<td colspan="9">

<input style=

"FONT-SIZE: 10px; WIDTH: 660px; BORDER-TOP-STYLE: none; FONT-FAMILY: Verdana; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none; font-weight: bold; color: navy;"

id="lblInfo" readonly type="text" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblDelWnd" Text="Del Wnd" style="font-size: 8pt; color: #000099; font-family: Verdana" runat="server" />

</td>

<td>

<telerik:RadTextBox ID="rtbStart" CssClass="ship_window" ReadOnly="True" Width="68px" EnableSingleInputRendering="False" runat="server" />

</td>

<td>

<telerik:RadTextBox ID="rtbEnd" CssClass="ship_window" ReadOnly="True" Width="68px" EnableSingleInputRendering="False" runat="server" />

</td>

<td> </td>

<td>

<table>

<tr>

<td align="right">

<asp:Label ID="lblStoreNumber" Font-Names="Arial" runat="server" />

</td>

<td class="style1">

<asp:Label ID="lblStoreName" width="360px" Font-Names="Arial" runat="server" />

</td>

</tr>

</table>

</td>

</tr>

</table>

<asp:Table id="tblShip" Width="900px" BorderStyle="Solid" BorderWidth="1px" runat="server">

<asp:TableRow ID="TableRow1" runat="server">

<asp:TableCell ID="TableCell1" runat="server">

<span style="font-size: 8pt; color: #000099; font-family: Verdana">Ship Date</span>

<telerik:RadDatePicker id="del" Width="92px" Height="18px" Font-Size="X-Small" Font-Names="Verdana" BorderWidth="1px" AllowEmpty="true" MinDate="1/1/1900" MaxDate="12/31/2100" runat="server" >

<DateInput DateFormat="d" runat="server">

<ClientEvents OnKeyPress="del_keypress" />

<ClientEvents OnError="date_input_error" />

</DateInput>

</telerik:RadDatePicker>

</asp:TableCell>

<asp:TableCell ID="TableCell2" align="right" runat="server">

<telerik:RadButton ID="rbStore" Text="Another Store" Skin="Hay" runat="server" />

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Accepted

answered on 24 Apr 2013, 02:18 PM

Hello Marianne,

The problem in this case comes from the fact that the OnMasterTableViewCreated event is fire too early and the RadTextBoxes are no yet initialized. This is so because the page initializes the controls one by one and first the grid is loaded then the RadTextBoxes. There are two ways you can resolve the problem:

Use the client-side page load event like demonstrated below:

function pageLoad() {

            grid = $find("<%= rtbEnd.ClientID %>");

            var theGrid = grid.get_masterTableView();

            var kount = theGrid.get_dataItems().length;

            if (kount >0) {

                theGrid.selectItem(theGrid.get_dataItems()[0].get_element());

            }

        }

        function ItemsRowSelected(sender, eventArgs) {

            ...



            var startDate = $find("<%= rtbStart.ClientID %>");

            var endDate = $find("<%= rtbEnd.ClientID %>");

            ...

        }

Note that this is the preferable approach.
Place the RadTextBoxes above the grid so they can be initialized first.

All the best,
Angel Petrov
the Telerik team