DateimeColumn Editors Client Side Calculate Date Difference

2 posts, 0 answers
  1. Miguel
    Miguel avatar
    25 posts
    Member since:
    Dec 2010

    Posted 26 Oct 2011 Link to this post

    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
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 31 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top