1. Home
  2. Forum
  3. ASP.NET MVC
  4. Trying to bind Timespan to grid column

Trying to bind Timespan to grid column

Hey there, 

I'm currently trying to bind a grid column to a timespan but when the data loads it comes up as [object object].  I've followed this thread https://www.syncfusion.com/kb/4106/how-to-bind-timespan-value-to-grid-column but to no success.  Is there a current work around for this?


Thanks

5 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team July 17, 2018 12:06 PM UTC

Hi Anthony, 

Thanks for contacting Syncfusion support. 

As per your given detail we suspect that you want to render the time span in the Grid columns. We suggest you to render the time span column as a template column in Grid to avoid [object][object] rendering in time span column. 

In the below code example we have render the time span values to the “Worked Hours” column in Grid. 


@(Html.EJ().Grid<object>("FlatGrid") 
    .Datasource(ds=> ds.URL("/Grid/DataSource").Adaptor(AdaptorType.UrlAdaptor)) 
    .AllowPaging() 
    .Columns(col => 
           { 
                col.Field("EmployeeID").HeaderText("Employee ID").Add(); 
                col.Field("FirstName").HeaderText("First Name").Add(); 
                col.Field("LastName").HeaderText("Last Name").Add(); 
                col.HeaderText("Worked Hours").Template("{{value:WorkedHours.Hours}} : {{value:WorkedHours.Minutes}} : {{value:WorkedHours.Seconds}}").Add(); 
            }) 
            ) 
<script type="text/javascript"> 
    $.views.converters("value", function (val) { 
        return Globalize.format(val, "D2"); 
    }); 
</script> 

 
  
We have prepared a sample based on the knowledge base documentation and it can be downloadable from the below location. 


Refer the help documentation. 


Regards, 
Thavasianand S. 


AT Anthony Tran - NO LONGER THERE July 17, 2018 03:29 PM UTC

Alright I'm able to see the data now, but I've come across another issue.  I had a timepicker in my grid column, and it was working before I included the example you showed me but now it doesn't come up at all.  Here is some of the code -

//grid column with timepicker
col.HeaderText("Job Start").Template("{{value:JobStartTime.Hours}} : {{value:JobStartTime.Minutes}}").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["JobStartTime"],
                    interval: 15,
                    timeFormat: "HH:mm",
                    width: "100%"
                    

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

$.views.converters("value", function (val) {
    return Globalize.format(val, "D2");
});
</script>

KM Kuralarasan Muthusamy Syncfusion Team July 18, 2018 12:56 PM UTC

Hi Anthony, 

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, 


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


Regards, 
Kuralarasan M. 


AT Anthony Tran - NO LONGER THERE July 18, 2018 02:56 PM UTC

Everything seems to be working now.

Thanks!

MP Manivannan Padmanaban Syncfusion Team July 19, 2018 03:40 AM UTC

Hi Antony, 

We are happy to hear that the mentioned issue has been resolved. 

Please get back to us, if you need further assistance. 

Regards, 
Manivannan Padmanaban. 


Loader.
Up arrow icon