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.
Unfortunately, activation email could not send to your email. Please try again.

How to edit TimeSpan columns

Thread ID:

Created:

Updated:

Platform:

Replies:

131606 Jul 19,2017 04:36 AM Jul 26,2017 05:47 AM ASP.NET Web Forms 7
loading
Tags: Grid
Jorge Pampin
Asked On July 19, 2017 04:36 AM

Hello,

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

HOURS:MINUTES:SECONDS.MILLISECONDOS.

Thanks!


Saravanan Arunachalam [Syncfusion]
Replied On July 20, 2017 07:00 AM

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. 


Jorge Pampin
Replied On July 20, 2017 12:38 PM

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 [Syncfusion]
Replied On July 21, 2017 03:29 AM

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. 


Jorge Pampin
Replied On July 21, 2017 05:51 AM

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 [Syncfusion]
Replied On July 24, 2017 02:27 AM

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. 


Jorge Pampin
Replied On July 25, 2017 07:42 AM

Hello,

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

Thanks!



Saravanan Arunachalam [Syncfusion]
Replied On July 26, 2017 05:47 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;