How to update an individual row column based on the values on the other columns row provided on the client side

[M]

Hi

I have a radgrid  and radtimepicker on itemtemplates for each column,

the radtimepicker when loaded gets the time from the database, but when it's loaded, user can modify the time, I need to calculate the total time and display it on the end cell of each row for that row.

What's the best way to calculate this and display it on the radgrid on the client side.

Many thanks!

[Princy]

Hi,

Please have a look into the following code snippet:

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"AllowPaging="true" AutoGenerateEditColumn="true" AllowSorting="true">
    <MasterTableView DataKeyNames="OrderDate" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
            <telerik:GridTemplateColumn HeaderText="OrderDate">
                <ItemTemplate>
                    <telerik:RadTimePicker ID="RadTimePicker1" runat="server" DbSelectedDate='<%# Bind("OrderDate") %>'>
                        <DateInput ID="DateInput1" OnClientDateChanged="OnClientDateChanged" runat="server">
                        </DateInput>
                    </telerik:RadTimePicker>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="RequiredDate">
                <ItemTemplate>
                    <telerik:RadTimePicker ID="RadTimePicker2" runat="server" DbSelectedDate='<%# Bind("RequiredDate") %>'>
                    </telerik:RadTimePicker>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <telerik:RadTextBox ID="RadTextBox1" runat="server">
                    </telerik:RadTextBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind_newConnectionString3 %>"
    SelectCommand="SELECT  * FROM [Orders]"></asp:SqlDataSource>

JS:

<script type="text/javascript">
    function pageLoad() {
        var grid = $find("<%=RadGrid1.ClientID %>");

        var totalAmount = 0;

        if (grid) {
            var MasterTable = grid.get_masterTableView();
            var Rows = MasterTable.get_dataItems();
            for (var i = 0; i < Rows.length; i++) {
                var row = Rows[i];
                //Access the Time Picker
                var txtQuntity1 = row.findControl("RadTimePicker1");
                var txtQuntity2 = row.findControl("RadTimePicker2");
                //Get selected Time
                var value1 = txtQuntity1.get_textBox().control.get_value();
                var value2 = txtQuntity2.get_textBox().control.get_value();
                totalAmount = value1 + value2;

                //Your logic to add time

                var l1 = row.findControl("RadTextBox1");
                l1.set_value(totalAmount); //Set the value to the third column
            }
        }

    }
    function OnClientDateChanged(sender, args) {
        var grid = $find("<%=RadGrid1.ClientID %>");

        var totalAmount = 0;

        if (grid) {
            var MasterTable = grid.get_masterTableView();
            var Rows = MasterTable.get_dataItems();
            for (var i = 0; i < Rows.length; i++) {
                var row = Rows[i];
                //Access the Time Picker
                var txtQuntity1 = row.findControl("RadTimePicker1");
                var txtQuntity2 = row.findControl("RadTimePicker2");
                //Get Time
                var value1 = txtQuntity1.get_textBox().control.get_value();
                var value2 = txtQuntity2.get_textBox().control.get_value();
                totalAmount = value1 + value2;

                //Your logic to add time

                var l1 = row.findControl("RadTextBox1");
                l1.set_value(totalAmount); //Set the value to the third column
            }
        }
    }
</script>

Thanks,
Princy