while editing row in grid min date is not set with e-editparams-mindate

BM Balaji Marimuthu Syncfusion Team March 2, 2015 02:52 PM UTC

Hi Gomtesh,

Thanks for using Syncfusion Products.

We have analyzed your requirement and achieved by using the ej.Grid.prototype method in Grid. Please find the sample and code snippet.

. . . . . . .

</div>

ej.Grid.prototype._tags[0].attr.push("editParams.minDate");

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

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

$scope.selectedRow = 2;

$scope.page = 2;

$scope.data = window.gridData;

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

});

</script>

By using this method you can push the editparams properties in the Grid. Please find the sample for further details.

Sample: http://www.syncfusion.com/downloads/support/directtrac/118341/Angular-1335860692.zip

Please let us know if you have any queries.

Regards,

Balaji Marimuthu

GO Gomtesh March 5, 2015 04:40 AM UTC

Thanks Balaji for reply,
But i have to set today is min date for "from_date" and date selected from from_date datepicker that should be the min date for "to_date" in angular

BM Balaji Marimuthu Syncfusion Team March 6, 2015 02:22 PM UTC

Hi Gomtesh,

Based on your requirement we have created the sample using angular. Please find the sample and code snippet.

Sample: Grid-angular.zip

<div id="Grid" ej-grid e-datasource="data" e-columns="col" e-toolbarsettings-showtoolbar='true' e-toolbarsettings-toolbaritems='toolbar' e-editsettings-allowdeleting=' true'

e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowpaging="true"

e-editsettings-editmode='inlineformtemplate' e-editsettings-inlineformtemplateid="#template" e-selectedrowindex="selectedRow" e-allowsorting="true" e-actioncomplete="complete">

</div>

By using the template form in Grid we have set the today date to the minDate for FromDate column and the value selected in the FromDate is set into minDate for the ToDate column. Please find the below code snippet.

From Date

</td>

</td>

</tr>

<tr>

To Date

</td>

</td>

Please let us know if you have any queries.

Regards,

Balaji Marimuthu

GO Gomtesh March 7, 2015 05:15 AM UTC

Thanks Balaji ,

For calculating no of days between from date and to date, and that days are set into no of days textbox

i have write code, but not working in firefox and IE

how to resolve this,

$scope.todate_close = function () {

$scope.leave_days = (((new Date($scope.date).getTime()) - (new Date($scope.dateVal).getTime())) / (1000 * 60 * 60 * 24)) + 1;

}

<tr>

..........

......

...

</tr>

<tr>

From Date

</td>

</td>

</tr>

<tr>

To Date

</td>

</td>

</tr>

<tr>

No. of Days

</td>

<input id="numeric" e-size="large" value="{{: no_of_days}}" class="e-field ejinputtext " e-change="noofdays()" e-value="leave_days" e-incrementstep="0.5" e-decimalplaces="1"

e-minvalue="0.5">

</td>

</tr>

</script>

<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="complete" e-toolbarsettings-showtoolbar="true"

e-toolbarsettings-toolbaritems="tools">

</div>

BM Balaji Marimuthu Syncfusion Team March 9, 2015 03:37 PM UTC

Hi Gomtesh,

We have created the sample based on your requirement to calculating the number of days between from date and to date columns . Please find the sample and code snippet.

Sample: Angular.zip

EmployeeID

</td>

<input id="EmployeeID" type="text" value="{{: EmployeeID}}"

ej-numerictextbox e-change="noofdays()" e-value="leave_days" e-incrementstep="0.5" e-decimalplaces="1"

e-minvalue="0.5">

</td>

<tr>

To Date

</td>

</td>

</tr>

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

.controller('PhoneListCtrl', function ($scope, $compile) {

$scope.selectedRow = 2;

. . . . . . . . . . .

$scope.todate_close = function () {

$scope.leave_days = (((new Date($scope.date).getTime()) - (new Date($scope.dateVal).getTime())) / (1000 * 60 * 60 * 24)) + 1;

}

});

We suggest you to use the ej-numerictextbox directives in the input text box to update the calculating values to the textbox. Please let us know if you have any queries.

Regards,

Balaji Marimuthu

GO Gomtesh March 10, 2015 07:34 AM UTC

Thank you Balaji,

In your sample

1.If i select record for edit and if select from date and to date and press cancel button after that if you select another record for edit or add another record it give error in console

2.Also if i add new record the all textboxes and datepicker are not empty some values are present in that.

so,i have chaned your sample sending back to you because i have to do following functionality:

1 while editing if todate is greater than the current date then that record should not allowed for edit .

2 if i change no of days in textbox then "todate" should also change according to no of days according to from_date i.e if i put 3 in no_of_days textbox then date in "todate" should be 3 days from "from_date"

I have attached sample with changes...

Attachment: Angular_4864f368.rar

BM Balaji Marimuthu Syncfusion Team March 11, 2015 02:17 PM UTC

Hi Gomtesh,

We are sorry for the inconvenience caused.

Please find the response.

If i select record for edit and if select from date and to date and press cancel button after that if you select another record for edit or add another record it give error in console

We considered the requirement “Issue with editing while perform cancel” as a bug. We have logged a report on this and will fix the issue internally, also the fix will be included in Vol 1, 2015 service pack 1 release, which has been scheduled to be rolled out in the month of Apr 2015.

We have also created an incident internally to have a follow up with this issue.

Also if i add new record the all textboxes and datepicker are not empty some values are present in that.

In provided sample, you have changed the textbox and datepicker value as empty value while adding the new record. So its working properly as you expect in your provided sample

while editing if todate is greater than the current date then that record should not allowed for edit .

We have achieved your requirement in the Grid “beginedit” event. Please find the sample and the code snippet.

Sample: Angular-118341.zip

$scope.disableedit = function (args) {

var obj = $("#Grid").ejGrid("instance");

var index = obj.model.selectedRowIndex();

var date = obj.model.currentViewData[index].to_date;

var selectItems = obj.model.currentViewData[index].leave_id;

if (new Date(date) > new Date)

args.cancel = true;

}

In this sample we have disabled the editing to the row, when the today is greater than the current date.

if i change no of days in textbox then "todate" should also change according to no of days according to from_date i.e if i put 3 in no_of_days textbox then date in "todate" should be 3 days from "from_date"

We considered this requirement “Change event not triggered when changing the values in the numerictextbox” as bug and we have already fixed the issue internally. The fix will be included in our Vol 1, 2015, which has been scheduled to be rolled at the end of this month.

Please let us know if you have any queries.

Regards,

Balaji Marimuthu

GO Gomtesh March 12, 2015 06:44 AM UTC

Hi Balaji,

as you send sample in that if i edit record in dialog the changes made to record is not reflected in view, it shows blank record

If changes made while editing record all changes should reflect in grid view including "dropdown value- applied or discard"and "leavedays"

So, I have changed your sample as per requirement i send you back.

GO Gomtesh March 12, 2015 07:11 AM UTC

Attachment ....

GO Gomtesh March 12, 2015 07:34 AM UTC

Problem occurred while attaching file so i uploading file with new question on forum

GO gomtesh March 12, 2015 10:43 AM UTC

Chnages made while editing record in grid that not reflecting on view with no of days and status valus in dropdownlist

<!DOCTYPE html>

<head>

</head>

<div id="Grid" ej-grid e-datasource="data1" e-toolbarsettings-showtoolbar='true' e-toolbarsettings-toolbaritems='tools' e-editsettings-allowdeleting=' true'

e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowpaging="true" e-beginedit="disableedit"

e-editsettings-editmode='dialogtemplate' e-editsettings-inlineformtemplateid="#template" e-selectedrowindex="selectedRow" e-allowsorting="true" e-actioncomplete="complete">

</div>

<tr>

Order ID

</td>

</td>

</tr>

<tr>

From Date

</td>

</td>

</tr>

<tr>

To Date

</td>

</td>

</tr>

<tr>

No. of Days

</td>

</td>

</tr>

<tr>

Reason

</td>

</tr>

<tr>

Status

</td>

</td>

</tr>

</table>

</script>

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

.controller('PhoneListCtrl', function ($scope, $compile) {

$scope.data1 = [{ "leave_id": 9, "from_date": "11-Mar-2015", "to_date": "11-Mar-2015", "no_of_days": 1, "reason": "gfhfgh", "status": "Applied" },

{ "leave_id": 8, "from_date": "11-Mar-2015", "to_date": "11-Mar-2015", "no_of_days": 1, "reason": "fhfgh", "status": "Applied" },

{ "leave_id": 7, "from_date": "19-Mar-2015", "to_date": "21-Mar-2015", "no_of_days": 2.5, "reason": "test reason", "status": "Applied" },

{ "leave_id": 6, "from_date": "24-Mar-2015", "to_date": "26-Mar-2015", "no_of_days": 3, "reason": "reason one", "status": "Applied" },

{ "leave_id": 5, "from_date": "10-Mar-2015", "to_date": "14-Mar-2015", "no_of_days": 4.5, "reason": "Reason test", "status": "Applied" },

{ "leave_id": 4, "from_date": "18-Mar-2015", "to_date": "18-Mar-2015", "no_of_days": 1, "reason": "test test", "status": "Applied" },

{ "leave_id": 3, "from_date": "19-Mar-2015", "to_date": "19-Mar-2015", "no_of_days": 1, "reason": "Family function", "status": "Applied" },

{ "leave_id": 2, "from_date": "10-Mar-2015", "to_date": "10-Mar-2015", "no_of_days": 1, "reason": "test test test", "status": "Applied" },

{ "leave_id": 1, "from_date": "24-Mar-2015", "to_date": "28-Mar-2015", "no_of_days": 4.5, "reason": "function test", "status": "Applied" }];

$scope.from_min_date = new Date();

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

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

$scope.selectedRow = 2;

$scope.select = function (args) {

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

$scope.dateVal = args.value;

$scope.date = args.value;

$scope.leave_days = 1;

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

}

$scope.todate_close = function () {

$scope.leave_days = ((((moment($scope.date, "DD-MMM-YYYY").toDate()).getTime()) - ((moment($scope.dateVal, "DD-MMM-YYYY").toDate()).getTime())) / (1000 * 60 * 60 * 24)) + 1;

}

$scope.compile = function (el) {

$compile(el)($scope);

}

$scope.noofdays = function () {

if (($scope.leave_days).length != 0) {

if ($scope.leave_days % 1 != 0.5) {

$scope.date = (new Date(((moment($scope.dateVal, "DD-MMM-YYYY").toDate()).getTime()) + ((1000 * 60 * 60 * 24) * ($scope.leave_days - 1))));

}

else {

$scope.date = (new Date(((moment($scope.dateVal, "DD-MMM-YYYY").toDate()).getTime()) + ((1000 * 60 * 60 * 24) * ($scope.leave_days))));

}

else {

$scope.date = null;

}

$scope.disableedit = function (args) {

var obj = $("#Grid").ejGrid("instance");

var index = obj.model.selectedRowIndex();

var date = obj.model.currentViewData[index].to_date;

var selectItems = obj.model.currentViewData[index].leave_id;

if (new Date(date) < new Date)

args.cancel = true;

}

$scope.complete = function (args) {

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

$scope.dateVal = null;

$scope.date = null;

$scope.leave_days = "";

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

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

}

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

$scope.dateVal = args.model.currentViewData[args.rowIndex].from_date;

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

$scope.leave_days = args.model.currentViewData[args.rowIndex].no_of_days;

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

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

var flag = 1;

}

});

</script>

</body>

</html>

BM Balaji Marimuthu Syncfusion Team March 13, 2015 01:05 PM UTC

Hi Gomtesh,

Sorry about the inconvenience caused.

We suggest you to use the name attribute in the jsrender template and the attribute name value should be same as the field of the column value.

Please find the sample and code snippet.

Sample: Sample-118341.zip

</div>

. . . . . . .

<tr>

No. of Days

</td>

</td>

</tr>

<tr>

Reason

</td>

</tr>

<tr>

Status

</td>

</td>

</tr>

</table>

</script>

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

.controller('PhoneListCtrl', function ($scope, $compile) {

. . . . . .

$scope.endedit = function (args) {

if (args.data.status=="")

args.data.status = $("#leave_status").val();

}

});

</script>

Either you can specify the template id value should be same as the column field instead of the name attribute. Please find the below code snippet as follows.

<tr>

No. of Days

</td>

</td>

</tr>

<tr>

Status

</td>

</td>

</tr>

Based on the attribute value only the records saved in the grid otherwise it will not be reflected in the grid view. Please let us know if you have any queries.

Regards,

Balaji Marimuhtu

GO Gomtesh March 16, 2015 11:33 AM UTC

Thanks Balaji its working..

BM Balaji Marimuthu Syncfusion Team March 18, 2015 04:12 AM UTC

Hi Gomtesh,

Thank you for the update.

Please let us if you have any queries.

Regards,

Balaji Marimuthu

BM Balaji Marimuthu Syncfusion Team March 18, 2015 04:22 AM UTC

Hi Gomtesh,

Please ignore the previous update.

Thanks for the response.

Please get back to us if you need any further assistance.

Regards,

Balaji Marimuthu

GO gomtesh March 19, 2015 04:54 AM UTC

I have to provide required field validation for all fields while add and editing records in grid in above your sent sample

GO gomtesh March 20, 2015 09:04 AM UTC

In Sample-118341.zip i have make some changes and while adding new record i have set ID value as autoincreamented,

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

//here i have set

$scope.leave_id = (JSON.parse(localStorage.getItem('leaveList')).length) + 1;

$scope.dateVal = null;

$scope.date = null;

$scope.leave_days = "";

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

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

}

all functionality works fine but

as while editing record in grid ID will not allowed to edit in the same manner while adding record i have to not allow that auto incremented value from ID text box

i.e. i have disable that field

GO gomtesh replied to gomtesh March 20, 2015 10:49 AM UTC

In Sample-118341.zip i have make some changes and while adding new record i have set ID value as autoincreamented,

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

//here i have set
$scope.leave_id = (JSON.parse(localStorage.getItem('leaveList')).length) + 1;

$scope.dateVal = null;
$scope.date = null;
$scope.leave_days = "";
var scope = angular.element($("#Grid")).scope();
scope.compile($(".gridform"));
}
all functionality works fine but

as while editing record in grid ID will not allowed to edit in the same manner while adding record i have to not allow that auto incremented value from ID text box
i.e. i have disable that field

Also in editing and adding record in grid

there is reason field is there i have tried to that as text area of two rows but it not working for text area
bcoz it not fetching therecord value while editing record

PK Prasanna Kumar Viswanathan Syncfusion Team March 23, 2015 02:08 PM UTC

Hi Gomtesh,

Thanks for the update,

Query 1 : “provide required field validation for all fields”

Your requirement have been achieved by using e-validationrules-required property of columns in angular grid. Please find the below code snippet

<div id="Grid" ej-grid e-datasource="data1" e-toolbarsettings-showtoolbar='true' e-toolbarsettings-toolbaritems='tools' e-editsettings-allowdeleting=' true'

e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowpaging="true" e-beginedit="disableedit"

e-editsettings-editmode='dialogtemplate' e-editsettings-inlineformtemplateid="#template" e-selectedrowindex="selectedRow" e-allowsorting="true" e-endedit="endedit" e-actioncomplete="complete">

</div>

For your convenience we have created a sample and sample can be downloaded from the below link

Query 2 : “ Have to disable the field while adding record with auto – incremented value”

Your requirement have been achieved by the use {{if}} and {{else}} jsrender template tag. While adding new record we set ID value as autoincremented by using ng –model directive and jquery addClass we disable the ID value.

Please find the below code snippet :

</td>

------------------------------------------------------------------------------------

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

$scope.leave = ($scope.data1).length + 1;

$($(args.target).find(".e-addedrow").find('input')[0]).addClass("e-disable");

$scope.dateVal = null;

$scope.date = null;

$scope.leave_days = "";

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

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

}

For your convenience we have created a sample and sample can be downloaded from the below link

Sample Link : http://www.syncfusion.com/downloads/support/forum/118341/Sample-118341-1128883569.zip

Query 3 : “it not fetching the record value while editing record”

While using textarea field we suggest to define the value in the inner html. Then only the data can be binded while editing or adding record. Please find the below code snippet

<textarea id="reason" name="reason" class="e-field ej-textarea valid col-lg-12 col-md-12 col-xs-12 col-sm-12 " rows="2" >{{: reason}}</textarea>

For your convenience we have created a sample and sample can be downloaded from the above link

If we misunderstand your query please get back to us, we will happy to assist you,

Regards,

Prasanna Kumar N.S.V

GO gomtesh March 24, 2015 07:34 AM UTC

Hi Prasanna,

thanks for reply as your sample code works properly for query 3

but in query 1::

e-validationrules-required="true"

works with only from_date and to_date but not with reason,no_of_days and statusfield while add and editing record in grid.

alson in query 2::

it show disabled field then also it is editable field

please check it in your sample

BM Balaji Marimuthu Syncfusion Team March 25, 2015 01:27 PM UTC

Hi Gomtesh,

We are sorry about the inconvenience caused.

Query: works with only from_date and to_date but not with reason,no_of_days and statusfield while add and editing record in grid.

We have modified the sample and please find the sample and code snippet.

Sample: Sample-118341.zip

We suggest you to use the field name as id attribute for the input template. Because validation is worked based on id attribute only. And please refer the sample for further details.

<tr>

No. of Days

</td>

</td>

</tr>

Query: it show disabled field then also it is editable field

Your requirement is achieved by using the actionComplete event in Grid and set the disabled attribute to the “leave_id” column for disabled the column value and also as non-editable.

$scope.complete = function (args) {

if (args.requestType == "save")

debugger

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

$scope.leave = ($scope.data1).length + 1;

$($(args.target).find(".e-addedrow").find('input')[0]).addClass("e-disable").attr("disabled","disabled");

$scope.dateVal = null;

$scope.date = null;

$scope.leave_days = "";

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

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

}

Please let us know if you have any queries.

Regards,

Balaji Marimuthu

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

Enterprise Solutions

Free Tools

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

while editing row in grid min date is not set with e-editparams-mindate