<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Trace="false"
    Inherits="_Default" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>

<%@ 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 runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    
   .class1
    {
    font-size:xx-small !important; 
    }
    
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <script type="text/javascript">            
                    
                    var ActualIndex;  
                    var index;
                    
                    function updateTotals(sender, args)
                    {
                     var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
                      
                     var input1 = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[ActualIndex], "Template1");
                     var input2 = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[ActualIndex], "Template2");
                     var input3 = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[ActualIndex], "Template3");
                     
                     //NOTE!!!! under FF, use input1.childNodes[1]
                     var v1 = input1.childNodes[0].firstChild.value;
                     var v2 = input2.childNodes[0].firstChild.value;
                                          
                     var finalValue = parseFloat(v1) + parseFloat(v2);
                     input3.childNodes[0].firstChild.value= parseFloat(finalValue);                   
                     
                    }
              
                    function setIndex(sender, args)
                    {
                    index=args.get_itemIndexHierarchical();
                    }
                    
                    function setActualIndex()
                    {
                    ActualIndex = index;
                    }

        </script>
        <telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="True" runat="server"
            OutputCompression="AutoDetect" />
        <br />
        <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" GridLines="None" 
        >
            <MasterTableView AutoGenerateColumns="False" DataSourceID="AccessDataSource1">
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px" />
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px" />
                </ExpandCollapseColumn>
                <Columns>
                
                    <telerik:GridTemplateColumn UniqueName="Template1" HeaderText="UnitPrice">
                        <ItemTemplate>
                            <telerik:RadNumericTextBox runat="server" ID="input1" DbValue='<%#Eval("UnitPrice") %>'>
                            <ClientEvents OnValueChanged="updateTotals" OnFocus="setActualIndex" />
                            </telerik:RadNumericTextBox>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    
                   <telerik:GridTemplateColumn UniqueName="Template2" HeaderText="Freight">
                        <ItemTemplate>
                            <telerik:RadNumericTextBox runat="server" ID="input2"  DbValue='<%#Eval("Freight") %>'>
                            <ClientEvents OnValueChanged="updateTotals" OnFocus="setActualIndex" />
                            </telerik:RadNumericTextBox>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    
                    <telerik:GridTemplateColumn UniqueName="Template3" HeaderText="Total">
                        <ItemTemplate>
                            <telerik:RadNumericTextBox runat="server" ID="input3" >
                            <ClientEvents />
                            </telerik:RadNumericTextBox>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    
                    
                </Columns>
            </MasterTableView>
            
            <ClientSettings>
            <ClientEvents OnRowMouseOver="setIndex" />
            </ClientSettings>
            
            <FilterMenu EnableTheming="True">
                <CollapseAnimation Duration="200" Type="OutQuint" />
            </FilterMenu>
        </telerik:RadGrid><asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb"
            SelectCommand="SELECT TOP 10 [UnitPrice], [Freight] FROM [Invoices]"></asp:AccessDataSource>
    </form>
</body>
</html>
