DateimeColumn Editors Client Side Calculate Date Difference

[Miguel]

Hi everyone,

 

I have an issue regarding column editors. This is the scenario:

I have a radgrid with 3 columns. Two of them are GridDateTimeColumns, the other is a GridNumericColumn.

In edit mode (using“PopUp”) I select both dates. As soon as I select the second date I want to calculate the difference between these two dates and place the result (in years) into the NumericColumn. But I do not want to do this in the server side (SelectedDateChanged event). Instead, I want to perform this functionality in the client side in order to make it more “Dynamic” to the user.

I understand I have to program this within the ItemCreated event and include a javascript function in my aspx.

My problem is that I have not been able to find an attribute that I can add to the second GridDateTimeColumnEditor in order to fire an event as soon as I select the date from the calendar.

This is what I have so far but does not work as I expected: (the Onclick or Onblur events force me to place focus on the dateinput of the second datepicker in order to fire the calculation. I want this to happen as soon as I select the date.)

C#:

protected void RgridSigPoros_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && (e.Item.IsInEditMode))
    {
        GridEditableItem item = e.Item as GridEditableItem;

        GridDateTimeColumnEditor editorFechaFuga = (GridDateTimeColumnEditor)item.EditManager.GetColumnEditor("FechaFuga");
        GridDateTimeColumnEditor editorFechaFabrica = (GridDateTimeColumnEditor)item.EditManager.GetColumnEditor("FechaFabrica");
        GridNumericColumnEditor editorTiempoUso = (GridNumericColumnEditor)item.EditManager.GetColumnEditor("TiempoUso");

        editorFechaFabrica.PickerControl..Attributes.Add("onfocus", "return CalculateDiffDate('" + editorFechaFuga.PickerControl.ClientID + "','" + editorFechaFabrica.PickerControl.ClientID + "','" + editorTiempoUso.NumericTextBox.ClientID + "')");
        editorTiempoUso.NumericTextBox.Enabled = false;
    }
}

javascript

function CalculateDiffDate(DPoroID, DFabricaID, CTotalID)
{
    var DatePoro = $find(DPoroID).get_selectedDate();
    var DateFabrica = $find(DFabricaID).get_selectedDate();
    var TiempoUso = $find(CTotalID);

    //Set 1 day in milliseconds
    var one_day=1000 * 60 * 60 * 24 ;
    //Calculate difference btw the two dates, and convert to years
    var total = Math.ceil((DatePoro.getTime()-DateFabrica.getTime())/(one_day))/365;

    TiempoUso.set_value(total);
}

I hope my question is clear enough and looking forward to hearing from you guys real soon.

Thanks in advance,

Miguel

[Pavlina]

Hi Miguel,

This is to let you know that we will need some additional time to review the issue at hand. We will get back to you with more information on the matter shortly.

All the best,
Pavlina
the Telerik team