How to edit TimeSpan columns

[Jorge Pampin]

Hello,

How to edit TimeSpan columns? I need to edit columns with this format:

HOURS:MINUTES:SECONDS.MILLISECONDOS.

Thanks!

[Saravanan Arunachalam]

Hi Jorge, 

Thanks for contacting Syncfusion’s support. 

We understood from your query, you need to edit the Date with time including the milliseconds and we have achieved this requirement by using DateTimePicker EditType and cell’s DateTimeEditOptions property of Grid’s Columns which can be refer from the below code example and online links. 

<ej:Grid ID="OrdersGrid" ClientIDMode="Static" runat="server" AllowSorting="True" AllowPaging="True" AllowGrouping="true">             

            . . . 

            <Columns> 

                . . . 

                <ej:Column Field="OrderDate" HeaderText="Order Date" EditType="DateTimePicker" Format="{0: MM/dd/yyyy hh:mm:ss:ff tt}" TextAlign="Right" Width="80"> 

                    <DateTimeEditOptions TimeDisplayFormat="h:mm:ss:ff tt" /> 

                </ej:Column>     

                <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="90"/> 

            </Columns> 

            

        </ej:Grid> 

  

https://help.syncfusion.com/aspnet/grid/editing?cs-save-lang=1&cs-lang=html#cell-edit-type-and-its-edit-options  

http://asp.syncfusion.com/demos/web/grid/celledittype.aspx  

https://help.syncfusion.com/api/js/ejdatetimepicker#members:timedisplayformat  

And also we have created a sample based on your requirement that can be downloaded from the below link, 

http://www.syncfusion.com/downloads/support/forum/131606/ze/ASPApp-1347452471  

Regards, 

Saravanan A. 

[Jorge Pampin]

Hello,

I don´t wanto to edit dates, I want to edit amounts of time with the format:

HOURS:MINUTES:SECONDS:MILLISECONDOS

That's why I use TimeSpan data instead of DateTime data. I don't need popups to edit dates, I need enter an amount of time,  for example, 00:05:02:000 five minutes and two seconds.

Thanks.

[Saravanan Arunachalam]

Hi Jorge, 

We have analyzed your requirement, we have showed time (hh:mm:ss:ff) in the Grid by using format property of Grid’s column and edit it by using edit template feature of Grid control. By using the edit template, we have rendered the ejTimePicker to pick the time for the time span column and please refer to the below code example and online links. 

<ej:Grid ID="OrdersGrid" ClientIDMode="Static" runat="server" AllowSorting="True" AllowPaging="True" AllowGrouping="true">             

            . . . 

            <Columns> 

                . . . 

                <ej:Column Field="OrderDate" HeaderText="Order Date" EditType="DateTimePicker" Format="{0: hh:mm:ss:ff tt}" TextAlign="Right" Width="80"> 

                    <EditTemplate Create="create" Read="read" Write="write" /> 

                </ej:Column>     

                <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="90"/> 

            </Columns> 

            

        </ej:Grid> 

<script type="text/javascript"> 

          function create() { 

              return $("<input>"); 

          } 

          function write(args) { 

              //Render the ejTimePicker 

              args.element.ejTimePicker({ width: "100%", timeFormat: "h:mm:ss:fff tt", value: args.rowdata["OrderDate"] }); 

          } 

 

          function read(args) { 

              //return the picked value 

              return args.ejTimePicker("getValue"); 

          } 

      </script> 

 

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

https://help.syncfusion.com/api/js/ejtimepicker#methods:getvalue  

https://help.syncfusion.com/aspnet/grid/editing#cell-edit-template  

http://asp.syncfusion.com/demos/web/grid/edittemplate.aspx  

And also we have created a sample that can be downloaded from the below link. 

http://www.syncfusion.com/downloads/support/forum/131606/ze/F1316061182174948  

@Note: You can edit the time by manually of from the help of ejTimerPicker popup and please refer to the below attached video. 

http://www.syncfusion.com/downloads/support/forum/131606/ze/Test481595875  

Regards, 

Saravanan A. 

[Jorge Pampin]

Hello,

Ok, that works! Two questions:

1. How to hide the TimerPicker popup button?
2. How to add a summary for that time column with the same format?

Thanks!

[Saravanan Arunachalam]

Hi Jorge, 

Query 1: How to hide the TimerPicker popup button? 

We have rendered ejTimePicker by using EditTemplate of Grid’s column which is used topick the while edit the record. If you don’t want the ejTimePicker’s popup, remove the EditTemplate property from the Grid’s column. Please refer to the below code example. 

<ej:Grid ID="OrdersGrid" ClientIDMode="Static" runat="server" AllowSorting="True"AllowPaging="True" AllowGrouping="true">              

            . . .  

            <Columns>  

                . . .  

                <ej:Column Field="OrderDate" HeaderText="Order Date"EditType="DateTimePicker" Format="{0: hh:mm:ss:ff tt}" TextAlign="Right" Width="80">  

                           <%--Remove this below highlighted code--%> 

                    <EditTemplate Create="create" Read="read" Write="write" />  

                </ej:Column>      

                <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="90"/>  

            </Columns>  

             

        </ej:Grid>  

 

 

Query 2: How to add a summary for that time column with the same format? 

We have achieved your requirement by using Custom SummaryType of Grid control. By using the CustomSummaryValue handler, we have summarized all the date in the date column of Grid’s dataSource and it is formatted to the time by using ej.format method which can be refer from the below code example. 

<ej:Grid ID="OrdersGrid" ClientIDMode="Static" runat="server" AllowSorting="True" AllowPaging="True" AllowGrouping="true" ShowSummary="true">             

            . . . 

            <SummaryRows> 

                <ej:SummaryRow Title="TotalTime"> 

                    <SummaryColumn> 

                        <ej:SummaryColumn CustomSummaryValue="calculateTotalTime" SummaryType="Custom" DataMember="OrderDate" DisplayColumn="OrderDate"/>  

                    </SummaryColumn> 

                </ej:SummaryRow> 

            </SummaryRows> 

            

        </ej:Grid> 

    </div> 

      <script type="text/javascript"> 

          function calculateTotalTime(summaryCol, summaryValue) { 

              //Summarize all the date with time in the Grid's dataSource 

              var sum = ej.sum(summaryValue, "OrderDate"); 

              var d = new Date(sum); 

              return ej.format(d, "hh:mm:ss:ff tt", "en-US"); 

          } 

      </script> 

 

  

https://help.syncfusion.com/aspnet/grid/summary?cs-save-lang=1&cs-lang=html#custom-summary-by-function  

http://asp.syncfusion.com/demos/web/grid/customsummary.aspx  

And also we have modified the previously provided sample based on your requirement which can be downloaded from the below link. 

http://www.syncfusion.com/downloads/support/forum/131606/ze/ASPApp1061886792  

Regards, 

Saravanan A. 

[Jorge Pampin]

Hello,

I wanto to use EditTemplante, but I want to hide TimerPicker popup button. How to do that?

Thanks!

[Saravanan Arunachalam]

Hi Jorge, 

We are sorry for the inconveneience. 

We have analyzed your query and achieved it by using “showPopupButton” property of ejTimePicker which can be refer from the below code example and api reference link, 

<script type="text/javascript">  

          function write(args) {  

              //Render the ejTimePicker  

              args.element.ejTimePicker({ width: "100%", timeFormat: "h:mm:ss:fff tt", showPopupButton:false, value: args.rowdata["OrderDate"] });  

          }  

      </script>  

 

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

Regards, 

Saravanan A.