Make change request datetime field disabled based on other enum

Martin_Strbavy

Hi Guys,
I am little bit struggling with probably easy task for someone I am trying to make Scheduled Start Date and Scheduled End date in Change requests disabled if Change request Stage field (custom field which is linked to Activity stage enum) has value not equal Initial.

I prepared some code, but it is not working correctly (see picture, Start date is disabled by Custom.js and End date by Change request.js), because I am still able to click on calendar icon or time.

Script:

<div>app.custom.formTasks.add('ChangeRequest', null, function (formObj, viewModel) {
</div><div>	formObj.boundReady(function () {
</div><div>		var StageID = '111a0276-72df-38a9-f629-4c0e337c1739';
<span style="background-color: transparent; color: inherit; font-size: inherit;">                </span><span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;">if (pageForm.viewModel.Stage.Id == StageID) {</span></div><div>
</div><div>			$('.control-label[for="ScheduledStartDate"]').parent().parent().find('input').attr('disabled','true')
<span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;">		                </span><span style="background-color: transparent; color: inherit; font-size: inherit;"><font face="Helvetica Neue, Helvetica, Arial, sans-serif">}</font>
</span><span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;">                })
</span><span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> })</span></div>

Can someone help me with this? Maybe I am doing that absolutely wrong

Thanks
Martin

Martin_Strbavy

So, maybe it will simplify life to someone... this is what is working for me:

app.custom.formTasks.add('ChangeRequest', null, function (formObj, viewModel) {

formObj.boundReady(function () {

var StageID = '111a0276-72df-38a9-f629-4c0e337c1739';

if (pageForm.viewModel.Stage.Id == StageID) {

$('.control-label[for="ScheduledStartDate"]').parent().parent().find('input').attr('disabled','true')

$('input[name="ScheduledStartDate"]').parent().find('.k-select span[role="button"]').off('click');

$('input[name="ScheduledStartDate"]').parent().find('.k-select span[role="button"]').off('mousedown');

$('input[name="ScheduledStartDate"]').parent().parent().find('.k-picker-wrap').addClass('k-state-disabled');

$('input[name="ScheduledStartDate"]').parent().parent().find('.k-picker-wrap').removeClass('k-state-default');

}

})

})

Martin

Geoff_Ross

Martin

Here we go...

$('input[name="ScheduledStartDate"]').attr('disabled','true');
$('input[name="ScheduledStartDate"]').next().hide();
$('input[name="ScheduledStartDate"]').parent().css('padding-right','0px');

The first line adds the disbaled attribute
The second line hides the date and time buttons
The third does a bit of styling so the grey disabled ask covers the whole control.

Add this in with the custom task as per above and ensure you load the whole lot into custom.js with the script loader.

Geoff

Geoff_Ross

Martin_Strbavy 

I think you are on the right lines. But the control's state does not effect the buttons, so you will need to also hide these buttons.

Geoff

Martin_Strbavy

So, maybe it will simplify life to someone... this is what is working for me:

app.custom.formTasks.add('ChangeRequest', null, function (formObj, viewModel) {

formObj.boundReady(function () {

var StageID = '111a0276-72df-38a9-f629-4c0e337c1739';

if (pageForm.viewModel.Stage.Id == StageID) {

$('.control-label[for="ScheduledStartDate"]').parent().parent().find('input').attr('disabled','true')

$('input[name="ScheduledStartDate"]').parent().find('.k-select span[role="button"]').off('click');

$('input[name="ScheduledStartDate"]').parent().find('.k-select span[role="button"]').off('mousedown');

$('input[name="ScheduledStartDate"]').parent().parent().find('.k-picker-wrap').addClass('k-state-disabled');

$('input[name="ScheduledStartDate"]').parent().parent().find('.k-picker-wrap').removeClass('k-state-default');

}

})

})

Martin

Geoff_Ross

Martin

Here we go...

$('input[name="ScheduledStartDate"]').attr('disabled','true');
$('input[name="ScheduledStartDate"]').next().hide();
$('input[name="ScheduledStartDate"]').parent().css('padding-right','0px');

The first line adds the disbaled attribute
The second line hides the date and time buttons
The third does a bit of styling so the grey disabled ask covers the whole control.

Add this in with the custom task as per above and ensure you load the whole lot into custom.js with the script loader.

Geoff

Rob_Simon

I'm trying to do something similar but based on one of our review activity statuses but as I'm not really a coder, hoping for some guidance

app.custom.formTasks.add('ChangeRequest', null, function (formObj, viewModel) {

formObj.boundReady(function(){

var vm = pageForm.viewModel;

if (vm.Activity[i].Title == "CM-Manager Review" && vm.Activity[i].Status.Name == "Completed") {

$('input[name="ScheduledStartDate"]').attr('disabled','true');

$('input[name="ScheduledStartDate"]').next().hide();

$('input[name="ScheduledStartDate"]').parent().css('padding-right','0px');

$('input[name="ScheduledEndDate"]').attr('disabled','true');

$('input[name="ScheduledEndDate"]').next().hide();

$('input[name="ScheduledEndDate"]').parent().css('padding-right','0px');

}

});

});