TimeSpan Issues on grid

[Matthew Hamlin]

Hello,

I am having issues with displaying a time span on my grid. I am getting the [object][object] error as described here: https://www.syncfusion.com/kb/4106/how-to-bind-timespan-value-to-grid-column but it is showing {{value:Planned.Hours}} : {{value:Planned.Minutes}} as the value instead of converting. I am getting a javascript error "Uncaught TypeError: Cannot read property 'converters' of undefined". My grid code is:

@Html.EJS().Grid("CommandColumn").DataSource(dataManager => { dataManager.Url("/TripReport/ItemUrlDatasource?ID=" + Model.ID).InsertUrl("/TripReport/ItemInsert").UpdateUrl("/TripReport/ItemUpdate").RemoveUrl("/TripReport/ItemDelete").Adaptor("UrlAdaptor"); }).Columns(col =>

{

    col.Field("ID").HeaderText("ClassID").IsPrimaryKey(true).Width("120").Visible(false).AllowEditing(false).ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

    col.Field("Planned").HeaderText("Planned").Width("500").Template("{{value:Planned.Hours}} : {{value:Planned.Minutes}}").Add();

}).Height("200").AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

Please help! Let me know what addtional information you need

[Matthew Hamlin]

Hello,

I have got it to display using the following code, but it will not pass the edited Timespan to the database.

<code>

@Html.EJS().Grid("CommandColumn").DataSource(dataManager => { dataManager.Url("/TripReport/ItemUrlDatasource?ID=" + Model.ID).InsertUrl("/TripReport/ItemInsert").UpdateUrl("/TripReport/ItemUpdate").RemoveUrl("/TripReport/ItemDelete").Adaptor("UrlAdaptor"); }).Columns(col =>

{

     col.Field("Planned").HeaderText("Planned").Width("150").Template("${formatTimeSpan(Planned)}").EditType("datetimepickeredit").Add();

}).Height("200").AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

<script>

    function checkTime(i) {

        if (i < 10) {

            i = "0" + i;

        }

        return i;

    }

    function formatTimeSpan(Time) {

        return checkTime(Time.Hours) + ":" + checkTime(Time.Minutes);

    }

</script>

</code>

It just passes it as a 00:00:00 timespan. Any suggestions?

[Thiyagu Subramani]

Hi Matthew, 

Thanks for contacting Syncfusion support. 

We can achieve your requirement by passing correct timespan string from client to server using actionBegin event. In this event we have passed timespan value from date Object. Please refer to the below code and sample link. 

   @Html.EJS().Grid("Grid").ActionBegin("begin").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col => 

{ 

. . . . . . .  

    col.Field("OrderDate").HeaderText("Order Date").Template("${formatTimeSpan(OrderDate)}").Width("130").Type("dateTime").EditType("datetimepickeredit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    . . . . .   

 

}).Height("400").AllowPaging().Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render() 

</div> 

 

<script> 

    function begin(args) { 

        if (args.requestType === 'save') { 

            if (args.data.OrderDate != null) { 

                args.data.OrderDate = args.data.OrderDate.toTimeString().split(' ')[0]; 

            } 

        } 

    } 

    function checkTime(i) { 

        . . . . .  

    } 

 

    function formatTimeSpan(Time) { 

. . . . . .  

    } 

</script> 

Screenshot:  

 

Sample link : https://www.syncfusion.com/downloads/support/forum/154793/ze/154793-timespan1178821726 

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

Regards, 

Thiyagu S. 

[Matthew Hamlin]

Perefect! This seems to working great. I appreciate the help.

[Thiyagu Subramani]

Hi Matthew, 

Thanks for the update. 

We are happy to hear that your issue is resolved. 

Please get back to us if you need further assistance. 

Regards, 

Thiyagu S.