ej:Column template, integer to time format

[Dimitri]

Hello,

I'm using a ej:Grid populate from CodeBehind.
One of the column is a integer (a number of seconds).

I would like to show a HH:mm:ss format (from the seconds) and be able to edit with a input type=time (no date).

How may I transform these integers in HH:mm:ss format in the ej:Column ?

[Vignesh Natarajan]

Hi Dimitri, 

 

Thanks for using Syncfusion products. 

 

We have analyzed your query and we have achieved your requirement using QuerycellInfo event and editTemplate feature of the Grid.  

We have defined the integer value code behind while binding it to the grid we have converted the integer to time format. While editing we have rendered the timePicker and edited the value.  

 

Refer the below code snippet 

 

      <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Priority="2"> 

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

                </ej:Column> 

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" Priority="2" /> 

            </Columns> 

    <ClientSideEvents QueryCellInfo="cell" ActionComplete="complete" ActionBegin="begin"/> 

        </ej:Grid> 

    </div>    

    <script type="text/javascript"> 

         function create() { 

            return $("<input>"); 

        } 

 

        function write(args) { 

            obj = $('#<%= FlatGrid.ClientID %>').ejGrid('instance'); 

            var data = ej.DataManager(obj.model.dataSource).executeLocal(new ej.Query().select("OrderDate")); 

            args.element.ejTimePicker({ width: "100%",secondsInterval :  20,timeFormat: "h:mm:ss tt", dataSource: data, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["OrderDate"] + " PM" : "" }); 

        } 

 

        function read(args) { 

            flag = false 

            var val = args.ejTimePicker("getValue").split(":"); 

            var hour = val[0]; var min = val[1]; var sec = val[2].split(" "); 

            var sec1 = sec[0]; 

            var time = parseInt(hour * 3600) + parseInt(min * 60) + parseInt(sec1); 

            return time; 

             

        } 

        var flag = true;         

        function cell(args) { 

            if (args.column.field == "OrderDate") {  

                var format = /[ : ]/; // to check after editing querycellinor will be triggered to prevent form changing the format. 

                if (flag == true || !format.test(args.text)) { 

//converting integer to time value 

                    var sec_num = parseInt(args.text, 10); // don't forget the second param 

                    var hours = Math.floor(sec_num / 3600); 

                    var minutes = Math.floor((sec_num - (hours * 3600)) / 60); 

                    var seconds = sec_num - (hours * 3600) - (minutes * 60); 

 

                    if (hours < 10) { hours = "0" + hours; } 

                    if (minutes < 10) { minutes = "0" + minutes; } 

                    if (seconds < 10) { seconds = "0" + seconds; } 

                    var tock = hours + ':' + minutes + ':' + seconds;                    

                    $(args.cell).text(tock) 

                    args.rowData.OrderDate = tock; 

                }              

            } 

        } 

    </script> 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample: http://www.syncfusion.com/downloads/support/forum/136138/ze/SyncfusionASPNETApplication42032781412  

 

Refer our help documentation for your reference 

 

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

https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo  

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

 

Regards, 

Vignesh Natarajan 

[Dimitri]

Thx for the answer !
Expected something more C# oriented than javascript to easily persist data, but your sample work well.

One last question: with EditTemplate, args contains only the value of the cell, should I put a EditTemplate on all column and aggregate data one by one ?
Or there is a equivalent to trait with all column at once ?

[Vignesh Natarajan]

Hi Dimitri, 

Thanks for the update.  

Query: “Expected something more C# oriented than javascript to easily persist data, but your sample work well.” 

We are glad to hear that your query has been resolved by our solution.  

Query2: “args contains only the value of the cell, should I put a EditTemplate on all column and aggregate data one by one”   

We suspect that you want to perform similar (convert integer to time value) action for more than one column. If the format is same then you can assign same EditTemplate to all the columns but while updating you must handle the values correctly according to column Name in queryCellinfo event.  

If the format for other columns changes then you need to define different EditTemplate for different columns according to their format.  

Note: if customization is done for all columns then Grid performance may be reduced. Since the queryCellInfo event will be triggered for every cell creation. 

Regards, 

Vignesh Natarajan