Timepicker not displaying while editing records in dialog using syncfusion grid

10 Replies
2 Participants

Created by
TE Tejaswini

Platform
jQuery

Platform
jQuery

Control
ejGrid

Created On
Feb 25, 2015 05:56 AM UTC

Last Activity On
Mar 18, 2015 02:52 PM UTC

Want to subscribe?
SIGN IN

Hi,

I am using syncfusion grid for displaying leave records. There are fields- Attendance date, modified in time, modified out time, subject, reason for regularization of record. I have specified datatype, e-editType="datepicker" for attendance date and it is working correct on record edit and display. But, for modified in time and modified out time, i have specified e-editType="timepicker" and it is not rendering timepicker on record edit. I am using angularjs.Here is code in my .html file,

<div>

<h2>Regularisation Details

<button type="button" class="btn btn-default pull-right submit_button" ng-click="submit_regularize_details()">Regularize</button>

</div>

<div>

<div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowpaging="true" e-editsettings-enablerowhover="true" e-editsettings- allowadding="true" e-editsettings-allowediting="true" e-editsettings-rowposition="bottom"

e-editsettings-allowdeleting="true" e-editsettings-showconfirmdialog="false" e-editsettings-editmode="mode"

e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools">

</div>

Where am I wrong? Is there any solution. Please help.

Thank you.

10 Replies

SR Sellappandi Ramu Syncfusion Team February 26, 2015 12:30 PM UTC

Hi Tejaswini,

Thanks for using Syncfusion products.

We have analyzed your reported issue for “TimePicker not displayed while editing the record” and we have created a sample. The sample can be downloaded from following link:

Sample: http://www.syncfusion.com/downloads/support/directtrac/118320/AngularJS1666165861.zip

Based on your code snippet we found that you are using editType as timePicker, which is the cause of issue. For your information, timePicker is not a default editType in grid editing. To use timePicker column in dialog edit mode, use actionComplete event to render the time picker. Please refer the following code snippet.

<div ej-grid id="Grid" e-width="500px" e-datasource="dataManager" e-allowpaging="true" e-editsettings-enablerowhover="true" e-editsettings-allowadding="true" e-editsettings-allowediting="true" e-editsettings-rowposition="bottom"

e-editsettings-allowdeleting="true" e-editsettings-showconfirmdialog="false" e-toolbarsettings="toolbar" e-editsettings-editmode="dialog" e-actioncomplete="actionComplete">

</div>

angular.module('listCtrl', ['ejangular'])

.controller('regularization_controller', function ($scope) {

$scope.dataManager = window.gridData;

$scope.toolbar = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };

$scope.actionComplete = function actionComplete(args) {

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

$("#" + this._id + "OrderDate").ejTimePicker(); //GridId + Field name

}

});

</script>

Please try the above sample and get back to us if you have any queries.

Regards,
Sellappandi R

TE Tejaswini February 27, 2015 07:31 AM UTC

Thank you. The above solution is working correct. I am trying to store the user entered regularization details (grid records) to localstorage. I have stored static data in localstorage but not able to store the user input details in localstorage. How can do that in angularjs?

SR Sellappandi Ramu Syncfusion Team March 2, 2015 02:24 PM UTC

Hi Tejaswini,

Thanks for the update.

We have analyzed your requirement for “Need to store user entered details in localStorage” and created a sample. The sample can be downloaded from following link:

Sample: http://www.syncfusion.com/downloads/support/directtrac/118320/AngularJS.-922599284.zip

In the provided sample we have used actionComplete event to store the modified records in local storage. For your information, in local storage we must store the string value alone. So we are converting the modified records to string using stringify() method than we can convert this to object using parse(). Please refer the following code snippet.

<div ej-grid id="Grid" e-width="500px" e-datasource="dataManager"

e-editsettings-showconfirmdialog="false" e-toolbarsettings="toolbar" e-editsettings-editmode="dialog" e-actioncomplete="actionComplete" >

….

</div>

angular.module('listCtrl', ['ejangular'])

.controller('regularization_controller', function ($scope) {

$scope.dataManager = window.gridData;

$scope.toolbar = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };

$scope.actionComplete = function actionComplete(args) {

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

$("#" + this._id + "OrderDate").ejTimePicker();

}

else if (args.requestType == "save") {

window.localStorage.modifiedRecord = JSON.stringify(args.data); //Convert to string and Stored in localStorage

var modifiedRecord = JSON.parse(window.localStorage.modifiedRecord || '{}'); //Convert to object from local storage

} }

});

Please try the above sample and get back to us if you have any queries.

Regards,

Sellappandi R

TE Tejaswini March 9, 2015 06:11 AM UTC

Hi Sellappandi Ramu,

Thanks for your reply. I can now store the record in localstorage. But, my problem is when i edit the record in grid, a dialog appears for corresponding record. but the values(before editing) for attendance date, modified in time and modified out time does not appear in respective datepicker and timepicker. For attendance date field, it shows 'select date' in datepicker and modified in time and out time fields , it shows '12:00 AM' default time in timepicker when i edit a regularization record in grid. The original values for date and time(before editing) does not appear in respective fields. How can i fix this problem?

SR Sellappandi Ramu Syncfusion Team March 10, 2015 12:10 PM UTC

Hi Tejaswini,

Thanks for the update.

If we render the timePicker property, it will show the default value on editing time, so we need to set the current value to the timePicker property before editing.

Based on your requirement we have created a sample and the same can be downloaded from following link:

Sample: http://www.syncfusion.com/downloads/support/directtrac/118320/AngularJS_Sample-1073173167.zip

In the provided sample we have used actionComplete event to set the current grid value to time picker property. We have used getTime() method to get the time from UTC format. Please refer the following code snippet.

angular.module('listCtrl', ['ejangular'])

.controller('regularization_controller', function ($scope) {

$scope.dataManager = window.scheduleData;

$scope.toolbar = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };

$scope.actionComplete = function actionComplete(args) {

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

var time1 = getTime($("#" + this._id + "StartTime").val());

$("#" + this._id + "StartTime").ejTimePicker(); //GridId + Field name

$("#" + this._id + "StartTime").ejTimePicker('model.value', time1);//Set the value to TimePicker

var time2 = getTime($("#" + this._id + "EndTime").val());

$("#" + this._id + "EndTime").ejTimePicker(); //GridId + Field name

$("#" + this._id + "EndTime").ejTimePicker('model.value', time2);//Set the value to TimePicker

}

else if (args.requestType == "save") {

window.localStorage["modifiedRecord"] = JSON.stringify(args.data); //Convert to string and Stored in localStorage

var modifiedRecord = JSON.parse(window.localStorage["modifiedRecord"] || '{}'); //Convert to object from local storage

}

});

function getTime(currentDate) { // Get the time alone from UTC

var date = new Date(currentDate);

ampm = 'AM',

h = date.getHours(),

m = date.getMinutes();

if (h >= 12) {

if (h > 12) h -= 12;

ampm = 'PM';

}

if (m < 10) m = '0' + m;

var time = h + ':' + m + ' ' + ampm;

return time.toString();

}

</script>

Please try the above sample and get back to us if you have any queries.

Regards,

Sellappandi R

TE Tejaswini March 13, 2015 12:57 PM UTC

Hi Sellappandi R,

Thank you for your answer. I have updated my js file as given above. But the problem is, the values(before editing) for modified in time and modified out time does not appear in respective timepicker.It is still showing default time as '12:00 AM' in timepicker while editing the record. Here is my updated js file,

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

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

$scope.tools = [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel];

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

$scope.actionComplete = function actionComplete(args) {

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

var time1 = getTime($("#Gridmodified_in_time").val());

alert(JSON.stringify($scope.time1));

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

$("#Gridmodified_in_time").ejTimePicker('model.value', time1);//Set the value to TimePicker

var time2 = getTime($("#Gridmodified_out_time").val());

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

$("#Gridmodified_out_time").ejTimePicker('model.value', time2);//Set the value to TimePicker

}

else if (args.requestType == "save") {

window.localStorage.regularizationRecord = JSON.stringify(args.data); //Convert to string and Stored in localStorage

var regularizationRecord = JSON.parse(window.localStorage.regularizationRecord || '{}'); //Convert to object from local storage

}

});

function getTime(currentDate) { // Get the time alone from UTC

var date = new Date(currentDate);

ampm = 'AM',

h = date.getHours(),

m = date.getMinutes();

if (h >= 12) {

if (h > 12) h -= 12;

ampm = 'PM';

}

if (m < 10) m = '0' + m;

var time = h + ':' + m + ' ' + ampm;

return time.toString();

}

And the html file is,

<div>

<h3>Regularisation Details</h3>

</div>

<div>

<div ej-grid id="Grid" e-datasource="data" e-columns="columns" e-allowpaging="true" e-editsettings-enablerowhover="true" e-editsettings-allowadding="true" e-editsettings-allowediting="true" e-editsettings-rowposition="bottom"

e-editsettings-allowdeleting="true" e-editsettings-allowresizing="true" e-editsettings-showconfirmdialog="false" e-editsettings-editmode="dialog" e-actioncomplete="actionComplete"

e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools" e-locale="es-ES">

</div>

Can you please suggest where am I wrong and how can i fix this problem?

Thanks in advance.

SR Sellappandi Ramu Syncfusion Team March 16, 2015 12:20 PM UTC

Hi Tejaswini,

Sorry about the inconvenience caused.

The reported issue is because of missing to add the condition getTime() method and after we save the record the element value set as time only, if we are not able to convert it in to date format. So it will return “NaN” and display the default value again if we edit the record. Please add the following condition in getTime() method to resolve the reported issue.

function getTime(currentDate) { // Get the time alone from UTC

var date = new Date(currentDate);

if ($(date.getDate()).length != 0) {

ampm = 'AM',

h = date.getHours(),

m = date.getMinutes();

if (h >= 12) {

if (h > 12) h -= 12;

ampm = 'PM';

}

if (m < 10) m = '0' + m;

var time = h + ':' + m + ' ' + ampm;

return time.toString();

}

return currentDate;

}

We have also prepared a sample and it can be downloaded from following link:

Sample Link: http://www.syncfusion.com/downloads/support/forum/118497/JSAngularSample136090164.zip

Please let us know if you have any concerns.

Regards,
Sellappandi R

TE Tejaswini March 17, 2015 02:06 PM UTC

Thank you for your answer. But the syncfusion glyphicon for datepicker not visible in dialog in above solution.How can show glyphicon for datepicker?

TE Tejaswini March 18, 2015 04:56 AM UTC

Hi Sellappandi Ramu,

Thank you. I am trying to store the user entered regularization details (multiple grid records) to localstorage. I have stored a user entered record to localstorage but when the user enters multiple records, it overwrites with previous record also I am trying to bind the data stored in localstorage to grid. How can i store the array of records to localstorage in angularjs and bind those records to grid?

SR Sellappandi Ramu Syncfusion Team March 18, 2015 02:52 PM UTC

Hi Tejaswini,

Thanks for the update

Please find the response.

Query #1: How can showglyphicon for datepicker?

We have the default property showPopupButton in ejDatePicker. Please use this property to enable the date picker icon in dialog editor.

Refer the following code snippet to set the icon on datePicker.

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

var time1 = getTime($("#" + this._id + "StartTime").val());

$("#" + this._id + "StartTime").ejTimePicker();

$("#" + this._id + "StartTime").ejTimePicker('model.value', time1);

$("#" + this._id + "EndTime").ejDatePicker({showPopupButton:true});

}

Query #2: How can i store the array of records to localstorage in angularjs and bind those records to grid?

We have created a sample based on your requirement and same can be downloaded from following link:

Sample: http://www.syncfusion.com/downloads/support/forum/118320/Sample_118320298492311.zip

In the above attached sample we have stored the data in local storage without overwrites in stored data. It will append the modified record in local storage. Please refer the following code snippet.

else if (args.requestType == "save") {

var modifiedRecord = [];

if (window.localStorage["modifiedRecord"] != undefined)

modifiedRecord = JSON.parse(window.localStorage["modifiedRecord"] || '{}');

modifiedRecord.push(args.data);

window.localStorage["modifiedRecord"] = JSON.stringify(modifiedRecord);//Stored modified records in string format

}

Please try the above sample and get back to us if you have any concerns.

Regards,Sellappandi R

10 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
TE Tejaswini
Platform
jQuery
Control
ejGrid
Created On
Feb 25, 2015 05:56 AM UTC
Last Activity On
Mar 18, 2015 02:52 PM UTC

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Timepicker not displaying while editing records in dialog using syncfusion grid

Enterprise Solutions

Free Products

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

Timepicker not displaying while editing records in dialog using syncfusion grid