In a radgrid, update textbox with the difference of 2 RadTimepickers values in the same grid cell

[Jose]

I have 2 timepicker and a numeric text box in each grid cell.  So as the user makes a selection on either of the Timepickers the , numeric txtbox is supposed to show the differences of the two selections.  I need to to find a way to accomplish this behaviour.  Any help is appreciated.

Heres my itemtemplate in the grid.

 <ItemTemplate>
                                    <table  >
                                        <tr>
                                            <td align="center">
                                                <asp:CheckBox ID="cb7" runat="server"   />
                                                <asp:Label    ID="lb7" runat="server" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                            <telerik:RadTimePicker ID="txt_InD7" runat="server" Width="86"></telerik:RadTimePicker>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                              <telerik:RadTimePicker ID="txt_OutD7" runat="server" Width="86"></telerik:RadTimePicker>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                        
                                            <telerik:RadNumericTextBox ID ="txt_MinD7" runat="server" MaxLength="3" Width="54"></telerik:RadNumericTextBox>
                                            <asp:CompareValidator ID="CompareValidator7" runat="server"  ControlToCompare="txt_InD7" ControlToValidate="txt_OutD7" Operator="GreaterThan" ErrorMessage="*"></asp:CompareValidator>
                                            </td>
                                        </tr>
                                    </table>
                                   
                            </ItemTemplate> 

[Shinu]

Hello Robert,

Try the following approach by attaching 'OnDateSelected' event to RadTimePickers and setting the difference between selected time' to RadTextBox in the event handler.

ASPX:

    . . .
    <td align="left">
        <telerik:RadTimePicker ID="txt_InD7" runat="server" Width="86">
        </telerik:RadTimePicker>
    </td>
</tr>
<tr>
    <td align="left">
        <telerik:RadTimePicker ID="txt_OutD7" runat="server" Width="86">
            <ClientEvents OnDateSelected="OnDateSelected" />
        </telerik:RadTimePicker>
      . . .

JavaScript:

<script type="text/javascript">
    function timeDifference(laterdate, earlierdate) {
        var difference = laterdate.getTime() - earlierdate.getTime();
        var daysDifference = Math.floor(difference / 1000 / 60 / 60 / 24);
        difference -= daysDifference * 1000 * 60 * 60 * 24
        var hoursDifference = Math.floor(difference / 1000 / 60 / 60);
        return (hoursDifference);
    }
    function OnDateSelected(sender, args) {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var length = MasterTable.get_dataItems().length;
        for (var i = 0; i < length; i++) {
            var timePicker2 = MasterTable.get_dataItems()[i].findControl("txt_OutD7");
            if (sender.get_id() == timePicker2.get_id()) {
                var timePicker1 = MasterTable.get_dataItems()[i].findControl("txt_InD7");
                var numtext = MasterTable.get_dataItems()[i].findControl("txt_MinD7");
                var dt1 = new Date();
                var dt2 = new Date();
                dt2 = timePicker2.get_selectedDate();
                dt1 = timePicker1.get_selectedDate();
                numtext.set_value(timeDifference(dt2, dt1));  // Set the NumericTextBox value
            }
        }
    }
</script>

Feel free to alter the logic according to your requirement.

Regards,
Shinu.