[Solved] update calculated column

[regis]

Hi everyone,

I have a grid composed of 3 columns. Each row is in edit mode by default, edit mode is inplace.
1-column input is a template column
2-column value is a boundcolumn
3-column result is a calculated column no expression defined nor datafields

only column input is editable. I create a template with a numerictextbox.
What I would like to do is to update the calculated column when the user ente a value in the column input with the calculation:

        value/input*100

I am not sure I need a calculated column or if a read only regular textbox would be enough.

thank you

[Princy]

Hi,

You could simply use a GridTemplateColumn with a label  to represent the Calculated column and then set the value accordingly. 

ASPX:

                <Columns>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:TextBox ID="txtInput" runat="server" AutoPostBack="True"
                                ontextchanged="txtInput_TextChanged"></asp:TextBox>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="UnitPrice">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:Label ID="lblCalculated" runat="server" Text="Label"></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>

C#

 protected void txtInput_TextChanged(object sender, EventArgs e)
          {
              GridDataItem dataItem = (GridDataItem)((sender as TextBox).NamingContainer);
            //find the label
          }

Hope this helps.

Thanks,

Princy

[regis]

Thank Princy for answering,

I will give a shot and come to let you know.

have a nice day

regis

[regis]

Hi All,

Before I try it to do it server side, I would like it to be done client side, saddly, I am having hard time retreiveing the row.
Here is my script

 function Calculate(sender, args) {

            //get edittextbox
            var editText = sender;


            //get the value newly entered
            var newValue = args.get_newValue();

            //get the row
            var row = editText.get_parent();

        }

my sender is the textbox within a template column. But when I call the get_parent() method I end up with the grid.
And I can't go down from the grid to the row using get_dataItems() because I don't know the index of the row my textbox belongs.

Any way to get the row index or the row object directly from sender.

Thank you

regis

[regis]

Hi Princy,

I try to do it your way on server side but when I get the dataitem, I am not able to get the value from the boundcolumn.
Apparently my dataitem seems to be empty (if I get the cell by unique name all my cell have &bnsp as text).

Any reason for that?

Thanks

[Erwin Floresca]

you can attach an onblur event to the txtInput in the ItemDataBound event

Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rgPD.ItemDataBound
        Select Case e.Item.ItemType
            Case GridItemType.AlternatingItem, GridItemType.Item
                Dim txt As TextBox = e.Item.FindControl("txtInput")
                Dim value As Decimal = e.Item.Cells(1).Text 'get the unit price
                Dim lbl As Label = e.Item.FindControl("lblCalculated")
                txt.Attributes.Add("onblur", "Calculate(this, " & value & "," & lbl.ClientID & ")")
        End Select
    End Sub

And in the javascript you will have

function Calculate(txt, value, lblId) {
       var input = txt.value;
       var label = document.getElementById(lblId);
       value = new Number(value);
       label.value = input * value;
}

[regis]

Hi Erwin,

I tried it your way and saddly it's not working.

I tried several modifications but none of them work.

Apparently the call for the javascript function is not working. I have a javascript error: object is missing.

More if I attach the event to the text box during the itembound event,  when i swich to the edit row in the pre render, the event is not in the textbox of the ediatable row.

If you have some ideas please do not hesitate.

thank you

regis

[Erwin Floresca]

it looks like you are changing to edit mode in the pre render event. can you access the textbox from the pre render event? if so, you need to attach the event there.

Let me know if you are using jquery and I will show another way of attaching the event.

[regis]

Hi Erwin,
I am able to access the textbox during the pre render event and that where I got the javascript error: object is missing.
And I am not using jquery.

I finally manage to get it works server side and only using a template column instead of a bound column as my dataitem is empty I have to find a control.

Here  is my code below.

But I am really surprised how hard it is to make it work (even server side). There might be a better and easier way to do it client side without dynamically adding the onblur event to the text box!!!

Telerik Team any suggestion?
I will leave this ticket open for now in case someone come with a working client side solution.

thank you

protected void editAvgArea_TextChanged(object sender, EventArgs e)
        {
            decimal avgArea, area;

            GridDataItem row = (GridDataItem)((sender as RadNumericTextBox).NamingContainer);

            avgArea = (decimal)(sender as RadNumericTextBox).Value;

            area = decimal.Parse((row.FindControl("lblResponse") as Label).Text);

            (row.FindControl("lblRecovery") as Label).Text = ((area / avgArea) * 100).ToString();
        }

<telerik:RadGrid ID="GridStd" runat="server" AutoGenerateColumns="False" GridLines="None"
        Style="height: 175px" OnNeedDataSource="GridStd_NeedDataSource" AllowMultiRowEdit="True"
        OnPreRender="GridStd_PreRender">
        <MasterTableView EditMode="InPlace">
            <RowIndicatorColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn UniqueName="paramName" DataField="ParamName" ReadOnly="true">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="avgArea">
                    <EditItemTemplate>
                        <telerik:RadNumericTextBox ID="editAvgArea" runat="server" AutoPostBack="true" OnTextChanged="editAvgArea_TextChanged">
                        </telerik:RadNumericTextBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="conc" ReadOnly="true" HeaderText="Response">
                    <ItemTemplate>
                        <asp:Label ID="lblResponse" runat="server" Text='<%# Eval("Result")%>'></asp:Label>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="recovery" ReadOnly="true">
                    <ItemTemplate>
                        <asp:Label ID="lblRecovery" runat="server" Text=""></asp:Label>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>