Convert object Object with timepicker

[Anthony Tran - NO LONGER THERE]

Hi there,

I have a Grid with an inline template that has a timepicker for one of the columns.  Only issue I'm coming across is when I initially open a record, the value for the timepicker isn't showing.  Below is what I'm using to make the timepicker,

                         

                         //column in grid I need to be a timepicker

                     col.Field("JobStartTime").HeaderText("Job Start").EditTemplate(editTemp => editTemp.Create("create").Write("write").Read("read")).Template("{{value:JobStartTime.Hours}} : {{value:JobStartTime.Minutes}}").Add();

//script

            function create(args) {

                return $("<input>");

            }

            function write(args) {

                

                //convert the element to ejTimePicker control

                args.element.ejTimePicker({

                    value: args.rowdata["JobStartTime"],

                    interval: 15,

                    timeFormat: "HH:mm",

                    width: "100%"

                });

                

            }

            function read(args) {

                

                return args.ejTimePicker("getValue");//get the value from the TimePicker control

            }

//endscript

When I check args.rowdata["JobStartTime"] it comes up as 'object Object'.  The other values I check are valid.  

How do I get the value to show up in the timepicker when I open up a record?

[Farveen Sulthana Thameeztheen Basha]

Hi Anthony,

 

Thanks for contacting Syncfusion Support.

 

From you given code, we found that you did not mentioned field in that timePicker column. So we suggest you to add the field name in that timePicker column to get the timePicker while editing the grid. Also you want to set the values to ejTimePicker in correct format inside the editTemplate. Please refer the following code snippet:

 

@(Html.EJ().Grid<object>("FlatGrid")

    .Columns(col =>

           {

                col.Field("WorkedHours").HeaderText("Worked Hours").Template("{{value:WorkedHours.Hours}} : {{value:WorkedHours.Minutes}} : {{value:WorkedHours.Seconds}}").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();

            })

            )

<script type="text/javascript">

 

    function create(args) {

        return $("<input>");

    }

    function write(args) {

        //convert the element to ejTimePicker control

        args.element.ejTimePicker({

            value: args.rowdata["WorkedHours"].Hours + ":" + args.rowdata["WorkedHours"].Minutes,

            interval: 15,

            timeFormat: "HH:mm",

            width: "100%"

        });

    }

</script>

 

In this code we have used the field in that timePicker column and we have provide the correct format to set the value to ejTimePicker. Also we have prepared the sample with your requirement and that sample can be downloadable from the below link,

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F1387461153659024.zip

 

Refer the following link to know about value property of ejTimePicker:

 

https://help.syncfusion.com/api/js/ejtimepicker#members:value

 

Regards,

Farveen sulthana T