How to get the timepicker for editing records in dialogtemplate in syncfusion grid

[Tejaswini]

Hi, I am using syncfusion grid to display regularization records.  There are fields- Attendance date, modified in time, modified out time, subject, reason for regularization of record. I am using dialogtemplate as editmode for editing records. All the fields are working correct for add and edit. But the problem is, for modified in time and modified out time the timepicker is not rendering while adding and editing the record.

Here is my code,

regularization_controller.html

<div ng-controller="regularization_controller">

    <script id="template" type="text/x-jsrender">

      

        <table class="col-md-12" cellspacing="10">

            <tr>

                <td style="text-align: right;">

                    Sr. No.

                </td>

                <td style="text-align: left">

                    <input id="sr_no" name="sr_no" value="{{: sr_no}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable"  />

                </td>               

            </tr>

            <tr>              

                <td style="text-align: right;">

                    Attendance Date

                </td>

                <td style="text-align: left">

                    <input id="attendance_date" ej-datepicker e-value="date" e-select="select" e-dateformat="dd-MMM-yyyy"/>

                </td>

            </tr>

            <tr>

                <td style="text-align: right;">

                   Modified In Time 

                </td>

                <td style="text-align: left">

                    <input id="modified_in_time" class="col-lg-6" e-format="hh:mm tt"/>

                </td>

            </tr>

          <tr>

                <td style="text-align: right;">

                  Modified Out Time

                </td>

                <td style="text-align: left">

                     <input id="modified_out_time" class="col-lg-6" e-format="hh:mm tt"/>

               

                </td>               

            </tr>

          <tr>

                <td style="text-align: right;">

                   Reason

                </td>

                <td style="text-align: left">

                    <input id="reason" name="reason" value="{{: reason}}"  class="e-field e-ejinputtext valid" />

                </td>               

            </tr>

          <tr>

                <td style="text-align: right;">

                   Status

                </td>

                <td style="text-align: left">

                    <input id="status" value="{{: status}}" ej-dropdownlist e-datasource="regularize_status" />

                </td>               

            </tr>

       </table>

    </script>

<div class="panel panel-default col-md-12 col-lg-12 col-xs-12 col-sm-12  notifications">

        <div class="panel-heading col-md-12 col-lg-12 col-xs-12 col-sm-12 panel_top_bottom  ">

            <h4 class="subpanel_header">Regularisation Details</h4>

         </div>

 

      

        <div class="panel-body grid_panel">

       

       <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowpaging="true" e-selectedrowindex="selectedRow" e-editsettings-allowadding="true"

                e-editsettings-allowdeleting="true" e-editsettings-allowediting="true" e-editsettings-showconfirmdialog="false"

                e-editsettings-editmode='dialogtemplate' e-editsettings-dialogeditortemplateid="#template" e-actioncomplete="actionComplete" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools">

      

           <div e-columns>

                <div e-column e-field="sr_no" e-width="50" e-headertext="Sr.No." e-isprimarykey="true" e-textalign="center"></div>

                <div e-column e-field="attendance_date" e-editType="datepicker" e-headertext="Attendance Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}" datepicker-popup="{{format}}"></div>

                <div e-column e-field="modified_in_time"  e-format="{0:hh:mm tt}" e-headertext="Modified In Time" e-textalign="center"></div>

                <div e-column e-field="modified_out_time"  e-format="{0:hh:mm tt}" e-headertext="Modified Out Time" e-textalign="center"></div>

                <div e-column e-field="reason" e-headertext="Reason" e-textalign="center"></div>

       

            <div e-column e-field="status" e-headertext="Status"  e-edittype="dropdownedit" e-datasource="regularize_status" e-textalign="center"></div>

            </div>

            </div>

        </div>

    </div>

                          

</div>

regularization_controller.js

app.controller('regularization_controller', function ($scope, $window, $modal, $compile) {

   

    $scope.tools = ["add", "edit", "delete", "update", "cancel"];

    $scope.data = [{ "sr_no": "1", "attendance_date": "25-Feb-2015", "modified_in_time": "09:00 AM", "modified_out_time": "09:00 AM","reason": "abc", "status": "Applied" }, { "sr_no": "2", "attendance_date": "26-Feb-2015", "modified_in_time": "09:00 AM", "modified_out_time": "09:00 AM", "reason": "abc", "status": "Applied" }];

    $scope.regularize_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];

    $scope.select = function (args) {

        var scope = angular.element($(".gridform")).scope();

        $scope.date = args.value;

        //$scope.in_time= args.value;

        //$scope.out_time = args.value;

        scope.compile($(".gridform"));

    }

  

    $scope.compile = function (el) {

        $compile(el)($scope);

    }

    $scope.actionComplete = function actionComplete(args) {

        if (args.requestType == "beginedit") {

            

            $("#Gridmodified_in_time").ejTimePicker(); //GridId + Field name

            $("#Gridmodified_out_time").ejTimePicker();

            $scope.date = args.model.currentViewData[args.rowIndex].attendance_date;

            modified_in_time = args.model.currentViewData[args.rowIndex].modified_in_time;

            modified_out_time = args.model.currentViewData[args.rowIndex].modified_out_time;

            var scope = angular.element($("#Grid")).scope();

            scope.compile($(".gridform"));

        }

        else {

            if ((args.requestType == "add")) {

                $("#Gridmodified_in_time").ejTimePicker(); //GridId + Field name

                $("#Gridmodified_out_time").ejTimePicker();

                var scope = angular.element($("#Grid")).scope();

                scope.compile($(".gridform"));

                $scope.date = null;

            }

        }

    }

  

});

Where am i wrong?

How can i get the timepicker while adding and editing the records in dialogtemplate in syncfusion grid.

And, While editing the time fields, there should be values for time(values before updating)  in respective fields(modified in time and out time)

 How can solve these problems? Is there any solution?

Thank you.

[Ajith R]

Hi Tejaswini,

Thanks for using Syncfusion products.

Query 1: How can I get the timepicker while adding and editing the records in dialogtemplate in syncfusion grid.

We have analyzed your code snippet and found that you have rendered the TimePicker control to unknown element ID (#Gridmodified_in_time). We would like to let you know that when we are using dialog template edit mode, we can directly render the controls with its original element id (#modified_in_time) in the actionComplete event and there is no need to append the Grid id with the template control id (#Grid + modified_in_time).  Please refer the below code snippet for further details.

<script id="template" type="text/x-jsrender">

            <table class="col-md-12" cellspacing="10">

                ------

                ------

                <tr>

                    <td style="text-align: right;">

                        Modified In Time

                    </td>

                    <td style="text-align: left">

                        <input id="modified_in_time" class="col-lg-6" value="{{:modified_in_time}}" />

                    </td>

                </tr>

                <tr>

                    <td style="text-align: right;">

                        Modified Out Time

                    </td>

                    <td style="text-align: left">

                        <input id="modified_out_time" class="col-lg-6" value="{{:modified_out_time}}" />

                    </td>

                </tr>

                   -------

                   -------

            </table>

        </script>

<script type="text/javascript">

        angular.module('regulation', ['ejangular']).controller('regularization_controller', function ($scope) {

            -------

            -------

            $scope.actionComplete = function actionComplete(args) {

                if (args.requestType == "beginedit" || args.requestType == "add") {

                    $("#modified_in_time").ejTimePicker({ timeFormat: "hh:mm tt" });

                    $("#modified_out_time").ejTimePicker({ timeFormat: "hh:mm tt" });

                    -------

                    -------

                }

            }           

        });

    </script>

Query 2: While editing the time fields, there should be values for time(values before updating)  in respective fields(modified in time and out time)

We can set the value with the template format “{{:modified_in_time}}” field in the input element to achieve your requirement. Please refer the above code snippet for further details.

For your convenience we have created a simple sample from your code snippet and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118445/TimePickerDialogTemplateEditing-1652808676.zip

Please let us know if you have any concerns.

Regards,

Ajith R

[Tejaswini]

 Hi Ajith R,

Thank you for the answer. I have modified the above changes in my js file but while editing the time fields, values for time(values before updating) are not shown in respective fields(modified in time and out time) instead it is still showing '12 A.M.' as default value for time while editing any record. Here, i have updated my js file sepertely for 'add' and 'edit' request,

app.controller('regularization_controller', function ($scope, $window, $modal, $compile) {

    

    $scope.tools = ["add", "edit", "delete", "update", "cancel"];

    

    $scope.data = [{ "sr_no": "1", "attendance_date": "25-Feb-2015", "modified_in_time": "09:00 AM", "modified_out_time": "09:00 AM","reason": "abc", "status": "Applied" }, { "sr_no": "2", "attendance_date": "26-Feb-2015", "modified_in_time": "09:00 AM", "modified_out_time": "09:00 AM", "reason": "abc", "status": "Applied" }];

    $scope.regularize_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];

    $scope.select = function (args) {

        var scope = angular.element($(".gridform")).scope();

        $scope.date = args.value;

        

        scope.compile($(".gridform"));

    }

  

    $scope.compile = function (el) {

        $compile(el)($scope);

    }

    

    $scope.actionComplete = function actionComplete(args) {

        if (args.requestType == "beginedit") {

            

           

            $scope.date = args.model.currentViewData[args.rowIndex].attendance_date;

           

            $("#modified_in_time").ejTimePicker({ timeFormat: "hh:mm tt" });

            $("#modified_out_time").ejTimePicker({ timeFormat: "hh:mm tt" });

            var scope = angular.element($("#Grid")).scope();

            scope.compile($(".gridform"));

           

        }

        

        if (args.requestType == "add") {

           

            $scope.date = null;

           

            $("#modified_in_time").ejTimePicker({ timeFormat: "hh:mm tt" });

            $("#modified_out_time").ejTimePicker({ timeFormat: "hh:mm tt" });

            var scope = angular.element($("#Grid")).scope();

            scope.compile($(".gridform"));

               

            }

        

    }

    

});

Where am i wrong?

How can i get the values for time(values before updating) in respective fields(modified in time and out time)

Thanks in advance.

[Alan Sangeeth S]

Hi Tejaswini,

Thanks for the update.

From your code snippets we found that in Editing Template you have not set the attribute “value” for TimePicker field which may be the cause of the issue. So we suggest you to set “value” attribute in Editing Template to resolve your issue. Please refer the following code snippets.

<script id="template" type="text/x-jsrender">

...

<td style="text-align: right;">

Modified Out Time

</td>

<td style="text-align: left">

<input id="modified_out_time" class="col-lg-6" value="{{:modified_out_time}}" />

</td>

</script>

<div ej-grid id="Grid" e-editsettings-dialogeditortemplateid="#template"

...

</div>

Alternatively, if you are unwilling to set value attribute in template, then you can set the current record value to TimePicker Control in “actionComplete” Grid event using “value” TimePicker property. Please refer the following code snippets.

$scope.actionComplete = function actionComplete(args) {

...

var rec = this.model.currentViewData[args.rowIndex]; //Getting current record based on row Index

$("#modified_in_time").ejTimePicker({ timeFormat: "hh:mm tt", value: rec.modified_in_time });

}

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

[Tejaswini]

Thank you for your reply. I worked with above given solution and record edit is working correct. But there is error called 'Uncaught TypeError: Cannot read property 'modified_in_time' of undefined' while adding the record.

How can i fix this error?