Using RadTimePicker in RadGrid how get only time using javascript

6 posts, 0 answers
  1. SR
    SR avatar
    33 posts
    Member since:
    Dec 2013

    Posted 06 Oct 2014 Link to this post

    I have telerik:2RadTimePicker controls with in grid and I want to get the time using javascript. 

    one is Start Time other one is  End Time i have to check the Validation  is Start Time Could be > End Time .

    Is there any possibility to do this one on when user enter the End Time it will check the validation and throw a error with alert message,

    and how to get time form time picker using javascript and do the validations and i want to show the timepicker with redcolor where the time validation is false 


    Any Suggestions.,

    Regards 

    SR.
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 09 Oct 2014 Link to this post

    Hello,

    For achieving the required functionality I would suggest you to access the TimePicker controls and apply the validation logic demonstrated in this online example .
    As for the coloring of the invalid input, you could simply handle its OnError client event and set a border color for the input.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. SR
    SR avatar
    33 posts
    Member since:
    Dec 2013

    Posted 10 Oct 2014 in reply to Maria Ilieva Link to this post

    Hello,

    Thakns for your suggestion actually problem is getting a time from  Radtimepicker with in the grid using javascript function. 


    Regards,
    SR
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 14 Oct 2014 Link to this post

    Hello,

    You can attach the client event OnDateChanged to the TimePicker and pass the Client ID of the RadTimePicker. Then from client side access the controls, calculate the time difference from there.
    Here is a sample code:
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
       {
           if (e.Item is GridEditFormItem && e.Item.IsInEditMode)//edit mode is editform/popup
           {
               GridEditFormItem item = (GridEditFormItem)e.Item;
              RadTimePicker pkr=(RadTimePicker)item.FindControl("RadTimePicker1");
              RadTimePicker pkr2 = (RadTimePicker)item.FindControl("RadTimePicker2");
               
              pkr.ClientEvents.OnDateSelected = "function (button,args){OnDateSelected('" + pkr.ClientID + "','" + pkr2.ClientID +"');}";
              pkr2.ClientEvents.OnDateSelected = "function (button,args){OnDateSelected('" + pkr.ClientID + "','" + pkr2.ClientID +"');}";
           }
       }

    JS:
    function OnDateSelected(pkr1, pkr2)
        {
        // access the control and set the label value
       }

    You can find more on RadTimePicker client side API from here.
    RadTimePicker Client Object.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. SR
    SR avatar
    33 posts
    Member since:
    Dec 2013

    Posted 16 Oct 2014 in reply to Maria Ilieva Link to this post

    Hello
    Thakns for reply  

    I am using this function but unable to get time from time picker can u check this 
     function OnDateSelected(tpCheckIn, tpCheckOut) {
                // access the control and set the label value
                var grid = $find("<%= grid.ClientID %>");
                try {              
                    var tableView = grid.get_masterTableView();
                    var items = tableView.get_dataItems();
                    for (var i = 0; i < items.length; i++) {
                        var rowValues = items[i];
                        var pkr1= rowValues.findElement("picker1");
                        var pkr2= rowValues.findElement("picker2");               
                        var time = pkr1.get_selectedDate();// here i am getting the error "Object doesn't support property or method 'get_selectedDate'"
                        //var time = pkr1.get_selectedDate();/using this one also unable to get the time from picker

                    }
                }
                catch (e) {
                }
               
            }

  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 21 Oct 2014 Link to this post

    Hello,

    If you are accessing the picker control in ItemDataBound event as I have suggested and then you passed them as parameters for the "OnDateSelected" function  you could directly use them on the client as the event senders.
    Therefore please instead of trying to access the pickers in the RadGrid control, use them directly and see if the selected date is accessible.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017