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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

118445 Mar 9,2015 01:13 PM UTC Mar 18,2015 04:33 AM UTC JavaScript 4
loading
Tags: ejGrid
Tejaswini
Asked On March 9, 2015 01:13 PM UTC

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 [Syncfusion]
Replied On March 10, 2015 12:05 PM UTC

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
Replied On March 13, 2015 11:52 AM UTC

 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 [Syncfusion]
Replied On March 16, 2015 12:00 PM UTC

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
Replied On March 18, 2015 04:33 AM UTC

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?



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.

Warning Icon 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.Close Icon

;