Dynamic TextBoxes & AJAX

[Bruce]

I have a grid that looks roughly like this:
<telerik:RadGrid ID="grdItem" runat="server" secure="Estimate" AutoGenerateColumns="false" OnItemCreated="grdItem_ItemCreated" mapping="TEST" errorImageField="imgGridError" errorTextField="txtGridError" OnDataBound="grdItem_DataBound">
<MasterTableView>
<SortExpressions>
<telerik:GridSortExpression FieldName="ITEM_NUM" SortOrder="Descending" />
</SortExpressions>
<Columns>
<telerik:GridTemplateColumn HeaderText="BOGUS_HEADER" UniqueName="Item_QuantityHeader" SortExpression="Item_QuantityHeader" ItemStyle-Width="50">
<ItemTemplate>
                                &nbsp;
                                </ItemTemplate>
</telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn HeaderText="BOGUS_HEADER" UniqueName="Item_UnitPriceHeader" SortExpression="Item_UnitPriceHeader" ItemStyle-Width="100">
                        <ItemTemplate>
                                        &nbsp;
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>

I am adding text boxes to columns in the code behind like this:

protected void grdItem_ItemCreated(object sender, GridItemEventArgs e)
{
    try
    {
        if (e.Item.DataItem != null && e.Item is GridDataItem)
        {
            CE_ESTIMATE_ITEM tempDataItem = (CE_ESTIMATE_ITEM)e.Item.DataItem;
            GridDataItem tempItem = (GridDataItem)e.Item;
            TextBox quantityBox = new TextBox();
            quantityBox.TextChanged += new System.EventHandler(quantityChanged);
            quantityBox.AutoPostBack = true;
            quantityBox.Width = 50;
            quantityBox.Style.Add("text-align", "right");
            quantityBox.Text = Convert.ToString(tempDataItem.QUANTITY);
            quantityBox.TabIndex = tabOrder++;
            tempItem["Item_QuantityHeader"].Controls.Add(quantityBox);
            quantityBox.Attributes.Add("onchange", "javascript:alert('Got a change')");
            ajaMain.AjaxSettings.Add(new AjaxSetting(quantityBox.UniqueID));


            TextBox unitPriceBox = new TextBox();
            unitPriceBox.TextChanged += new System.EventHandler(quantityChanged);
            unitPriceBox.AutoPostBack = true;
            unitPriceBox.Width = 100;
            unitPriceBox.Style.Add("text-align", "right");
            unitPriceBox.Text = Convert.ToString(tempDataItem.UNIT_PRICE);
            unitPriceBox.TabIndex = tabOrder++;
            tempItem["Item_UnitPriceHeader"].Controls.Add(unitPriceBox);
            ajaMain.AjaxSettings.Add(new AjaxSetting(unitPriceBox.UniqueID));
        }
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
        Debug.WriteLine(ex.StackTrace);
        Gadgets.writeLogEntry(ex.Message, 0);
        Gadgets.writeLogEntry(ex.StackTrace, 0);
        Response.Redirect("../General/Error.aspx");
    }
}

The text boxes are created,as expected, but no matter what I try, I can't get the TextChanged call to be an AJAX call; it always functions as a postback.  The postback causes these text boxes to disappear and even if they weren't dynamically created but rather, were created in ASPX, the tab order would be lost.

I have tried using an AjaxManager, as you see here, and enclosing the entire RadGrid in a RadAjaxPanel; neither attempt worked.

My RadAjaxManagerASPX looks like this:

    <telerik:RadAjaxManager ID="ajaMain" runat="server" DefaultLoadingPanelID="pnlAjaxLoading"> 
        <AjaxSettings> 
          <telerik:AjaxSetting AjaxControlID="grdItem"> 
            <UpdatedControls> 
              <telerik:AjaxUpdatedControl ControlID="grdItem" LoadingPanelID="pnlAjaxLoading"> </telerik:AjaxUpdatedControl>
              <telerik:AjaxUpdatedControl ControlID="ajaMain" LoadingPanelID="pnlAjaxLoading"> </telerik:AjaxUpdatedControl>
            </UpdatedControls> 
          </telerik:AjaxSetting>
          <telerik:AjaxSetting AjaxControlID="ajaMain"> 
            <UpdatedControls> 
              <telerik:AjaxUpdatedControl ControlID="grdItem" LoadingPanelID="pnlAjaxLoading"> </telerik:AjaxUpdatedControl>
              <telerik:AjaxUpdatedControl ControlID="ajaMain" LoadingPanelID="pnlAjaxLoading"> </telerik:AjaxUpdatedControl>
            </UpdatedControls> 
          </telerik:AjaxSetting>
        </AjaxSettings> 
      </telerik:RadAjaxManager>
      <telerik:RadAjaxLoadingPanel ID="pnlAjaxLoading" runat="server" Visible="false"/>

Any help or hints you can provide would be great.  I would much rather not have to code my own XMLHTTPRequest calls.

[Bruce]

I discovered that if you are going to dynamically create ASP TextBox's and then set the OnItemChangedEvent, you need to do so in the Page_Init, not well after it executes, as I am trying to do in this case.  Therefore, I cannot create TextBox's on the fly in the OnItemCreated
handler if I want to handle the OnItemChangedEvent for that TextBox.

I would still like to get AJAX working either on a RadAjaxPanel or somehow using a RadAjaxManager on TextBox's that I have set up in a GridTemplateColumn.  If you have examples, I would love to see one.

[Tsvetina]

Hi Bruce,

The most important thing is to correctly create the textboxes. If you want to create the grid declaratively, you should better declare the textboxes inside the (Edit)ItemTemplate of the columns and only control whether they are Visible or not in the ItemCreated event. This way they will be initiated correctly and their events will fire as expected.

Once you achieve correct behavior from the textboxes, you should not have problems with ajaxifying the grid. However, have in mind that you should update the whole control through AJAX, not only parts of it. Your AjaxSettings would be enough, you could even remove the RadAjaxManager from the updated controls, as such setting is never needed.


Kind regards,
Tsvetina
the Telerik team