Textbox in Radgrid TextChanged

[James Wilson]

I have a radgrid wherein I want certain fields within each row to always be editable.  I did this in the ItemDataBound event and it works fine.  However, I would like to call the TextChanged event whenever the data in one of these fields is changed.  My goal is to make a call to save the data back to the database whenever a text field is changed.  I tried adding a TextChanged event handler to each textbox but it never fires.  The only AJAX I have going on is a drop-down list that updates the contents of the radgrid.  Any help would be very much appreciated!

Here is my ItemDataBound code:

protected void grdTaxSaleItemsListGrid_ItemDataBound(object sender, GridItemEventArgs e)
            {
                if (e.Item is GridDataItem)
                {
                    GridDataItem item = e.Item as GridDataItem;
                    foreach (GridColumn column in item.OwnerTableView.RenderColumns)
                    {

                        if (column.UniqueName == "DocumentTax" ||
                            column.UniqueName == "RecordingFee" ||
                            column.HeaderText == "StateFee" ||
                            column.UniqueName == "CountyFee" ||
                            column.UniqueName == "CostOfNotice" ||
                            column.UniqueName == "MoneyInTrust")
                        {
                            TextBox tbEditBox = new TextBox();
                            tbEditBox.Text = item[column].Text;

                            tbEditBox.CssClass = "gridEditItem";
                            tbEditBox.Width = Unit.Pixel(50);
                            tbEditBox.TextChanged += new EventHandler(tbEditBox_TextChanged);
                            tbEditBox.AutoPostBack = true;
                            item[column].Controls.Clear();
                            item[column].Controls.Add(tbEditBox);
                        }
                    }
                }
            }

Thanks!
-Jim

[Sebastian]

Hi James,

Basically, if you would like to display editable textbox in several given grid columns when actually the items are not in edit mode, I suggest you use template columns with MS TextBox controls inside their item templates.

If this is not possible in your particular case, the proper place to add controls to grid cells dynamically is the ItemCreated handler. Thus the viewstate and the event lifecycle of the programmatically injected controls will remain intact and they will function properly. The main differences between the ItemCreated and ItemDataBound events are listed here.

Additionally, a sample project which is close to your scenario and might be an alternative solution can be found in this code library entry.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[James Wilson]

Excellent, thanks!  The OnTextChanged event wasn't firing when I used this line in the ItemDataBound event:

tbEditBox.TextChanged += new EventHandler(tbEditBox_TextChanged);

I followed your suggestion and now the event is firing properly.

Thanks again!

[Craig Hauzie]

I'm following this example as well but when the OnTextChanged event fires ... the page posts back but it never enters my event handler. I have a break point set inside of the "tbEditBox_TextChanged" event but it never enters that event. Any suggestions?

Basically I have a grid with a GridClientSelectColumn and a I have 2 templated columns with a RadNumericTextBoxes inside.

When I type into the first text box and "tab out" ... I want the GridClientSelectColumn (aka Checkbox) to turn "on" and also for the 2nd text box to be filled with a calculation based on the first text boxes data.

Thanks. Craig.

[Mira]

Hello Craig,

How have you attached the event handler?
In order to implement the desired functionality, I recommend that you use the approach from the Referencing controls in grid row/edit form help topic to access the second textbox and set its value in the text changed event of the first textbox. To select the corresponding data item, please set its Selected property.

I hope this helps.

Best wishes,
Mira
the Telerik team

[Craig Hauzie]

I ended up using a JavaScript solution and accessing things client side because I couldn't get the event to fire on the server side. I ended up liking the client side version better because it's a perfect use for JavaScript and I really don't need a postback and/or Ajax for my solution. Kind of overkill when I'm just trying to do a basic calculation.

An additional question though ... in the example you sent me to review ... my text box was implemented just like the check box. It was inside an ItemTemplate and had the AutoPostback = true and the OnTextChanged was set as well. I shouldn't need to attach the event handler, just as your example doesn't attach an event handler to the check box. But for some reason, when the page posted back, the postback never made it into my routine.

Thanks for your help.

[Mira]

Hello Craig,

I am glad to hear the issue is resolved.

To your second question: Based on the supplied information, it is hard to determine what is causing the event not to fire.
If the problem persists, please send us a small working project, demonstrating your full setup and showing the unwanted behavior.
We will debug it locally and get back to you with our findings.

Kind regards,
Mira
the Telerik team

[Magnus]

I am doing something similar and it doesnt work...basically I have a radgrid (shoppingcart) with a gridtemplatecolumn with a numerictextbox and I want to update the row ontextchanged. do you have an codeexample how I can do this. This grid is wired up with a objectdatasource.

the textbox defines the quantity of a product in the shopping cart and on update i it need to recalculate the rowtotal and cart total as well...I had it working before when using a regular gridview inside a asp:updatepanel but as im modifying the site to use radcontrols I dont use updatepanels and such anymore

Would really appreciate some assistance!

Thanks,

[Craig Hauzie]

Magnus -- I never got the postback code working. Are you looking for my javascript code or are you still attempting the postback method? Did you try downloading the code Telerik attached to my original post?

Craig

[Magnus]

Craig,
im open to suggestion I just want it to work...im kinda frustrated because this it normally an easy thing to do with standard asp.net controls but it doesnt work with the radgrid...and this solution requires the radgrid for other functionality and this is the only one I cant get to work...

Thanks,

Magnus

[Craig Hauzie]

Here is a small snippet from my javascript solution ...

Background -- I had to build a page to process our premium checks that come in each month. We estimate the premium at the beginning of the month but we base commission on actual cash received so my goal was generate the commission due into the grid row after the user types in the premium received. I am storing the Commission Rate as DataKeyValue in the RadGrid itself. I also am using GridClientSelectColumn and I am auto-selecting that at the same time I'm doing the Commission Due calculations.

First -- here is the javascript code on the .aspx page:

function gvEstimated_UpdateCommission(txtPremRecvID, txtCommID)
{
    //**** FIND TEXT BOXES ****\\
    var txtPremRecv = $find(txtPremRecvID);
    var txtCommission = $find(txtCommID);
    //**** FIND GRID VALUES ****\\
    var grid = $find("<%=gvEstimatedBillings.ClientID %>");
    var rowIndex = txtPremRecv.get_element().parentNode.parentNode.parentNode.rowIndex - 1;
    //**** GET VARIABLE AMTS ****\\
    var premRecv = txtPremRecv.get_value();
    var commRate = grid.get_masterTableView().get_dataItems()[rowIndex].getDataKeyValue("CommissionRate");
    //**** CALCULATIONS ****\\
    if (premRecv > 0)
    {
            //calc & set commission amt
            txtCommission.set_value(parseFloat(premRecv) * parseFloat(pmtRate));
    }
    //**** SET GRID CHECKBOX ****\\
    grid.get_masterTableView().get_dataItems()[rowIndex].set_selected(true);
}

Second -- Here is the Telerik:RadGrid code on the .aspx. There are some grid items/properties missing I didn't include here, like AllowMultiRowSelection="true", AllowSorting="true", etc....

<telerik:RadGrid ID="gvEstimated" runat="server" OnItemDataBound="gvEstimated_ItemDataBound">
   <ClientSettings EnableRowHoverStyle="true">
      <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
   </ClientSettings>
   <MasterTableView ClientDataKeyNames="CommissionRate">
      <Columns>
         <telerik:GridClientSelectColumn UniqueName="Checkbox"></telerik:GridClientSelectColumn>
         <telerik:GridBoundColumn DataField="PolicyNo" HeaderText="Policy No"></telerik:GridBoundColumn>
         <telerik:GridDateTimeColumn DataField="PeriodDate" HeaderText="Period Dt"></telerik:GridDateTimeColumn>
         <telerik:GridTemplateColumn HeaderText="Prem Recv" UniqueName="PremiumReceived">
            <ItemTemplate>
               <telerik:RadNumericTextBox ID="txtPremiumReceived" runat="server"></telerik:RadNumericTextBox>
            </ItemTemplate>
         </telerik:GridTemplateColumn>
         <telerik:GridTemplateColumn HeaderText="Commission">
            <ItemTemplate>
               <telerik:RadNumericTextBox ID="txtCommission" telerik:RadNumericTextBox>
            </ItemTemplate>
         </telerik:GridTemplateColumn>
      </Columns>
   </MasterTableView>
</telerik:RadGrid>

Lastly, here is the ItemDataBound event in the code behind:

protected void gvEstimated_ItemDataBound(object sender, GridItemEventArgs e)
{
   if (e.Item is GridDataItem)
   {
      //Capture row
      GridDataItem gridRow = (GridDataItem)e.Item;

      //find text boxes
      RadNumericTextBox txtPremRecv = (RadNumericTextBox)gridRow.FindControl("txtPremiumReceived");
      RadNumericTextBox txtCommission = (RadNumericTextBox)gridRow.FindControl("txtCommission");

      //wire up commission calc & selecting grid row
      txtPremRecv.Attributes.Add("onblur", "gvEstimated_UpdateCommission('" + txtPremRecv.ClientID + "','" + txtCommission.ClientID + "')");
   }
}

Good luck. Let me know if you other questions.

[Magnus]

Thanks craig for you assistance however it didnt solve my problem

basically I had a regular gridview where I with a textboxfield where I could update the quantity of items and click update button. the grid was in a updatepanel so I didnt have to reload the entire page and it worked great.

Now im upgrading from asp.net 2.0 to 4.0 and implementing radcontrols althrough the site...and the client dont want an update button for the postback it just need it to postback on textchanged or onblur when changing the quantity of items. the grid uses an objectdatasource for databinding...all I want to happend is when I change the text in the radnumerictextbox to update the value in the database and update the grid or just the row so it displays the totals correctly. 
  
I thought this whould be in Teleriks interest to solve I have seen alot of questions on the same topic...!!

[Mira]

Hello Magnus,

You can see the Client edit with batch server update demo to see how to update the data on the client and then process all changes on the server with a single batch update.
Similar to the desired functionality is implemented in the Excel-like RadGrid code library as well.

Please examine these resources and let me know if any further questions arise.

Best wishes,
Mira
the Telerik team

[Magnus]

Hello Mira,
Thank you for your answer...problem solved.