We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. How to edit TimeSpan columns

How to edit TimeSpan columns

Hello,

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

HOURS:MINUTES:SECONDS.MILLISECONDOS.

Thanks!


7 Replies
SA Saravanan Arunachalam Syncfusion Team July 20, 2017 11:00 AM UTC

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> 
  
And also we have created a sample based on your requirement that can be downloaded from the below link, 
Regards, 
Saravanan A. 


JP Jorge Pampin July 20, 2017 04:38 PM UTC

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.


SA Saravanan Arunachalam Syncfusion Team July 21, 2017 07:29 AM UTC

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> 
 
And also we have created a sample that can be downloaded from the below link. 
@Note: You can edit the time by manually of from the help of ejTimerPicker popup and please refer to the below attached video. 
Regards, 
Saravanan A. 


JP Jorge Pampin July 21, 2017 09:51 AM UTC

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!



SA Saravanan Arunachalam Syncfusion Team July 24, 2017 06:27 AM UTC

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> 
 
  
And also we have modified the previously provided sample based on your requirement which can be downloaded from the below link. 
Regards, 
Saravanan A. 


JP Jorge Pampin July 25, 2017 11:42 AM UTC

Hello,

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

Thanks!



SA Saravanan Arunachalam Syncfusion Team July 26, 2017 09:47 AM UTC

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>  
 
Regards, 
Saravanan A. 


Loader.
Up arrow icon