1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. How to enable the button model in js for particular condition on dialog box

How to enable the button model in js for particular condition on dialog box

Hi ,

This is the code for my dialog box button

function getDialogButtons(action) {
        var primaryButtonClass = action === 'Delete' ? 'e-dialog-yes' : action === 'Add' ? 'e-dialog-add' : 'e-dialog-edit';
        var flatButtonClass = action === 'Delete' ? 'e-dialog-no' : 'e-dialog-cancel';
        var dialogButtons = 
        [
        {
            buttonModel: {
                cssClass: 'e-flat ' + primaryButtonClass, isPrimary: true,
                content: action === 'Add' || action === 'Edit' ? 'Save' : 'Yes',
                disabled:true,
            },
            type: action === 'Add' || action === 'Edit' ? 'submit' : 'button',
            click: dialogButtonClick.bind(this)
        }, {
            buttonModel: {
                cssClass: 'e-flat ' + flatButtonClass, isPrimary: false,
                content: action === 'Add' || action === 'Edit' ? 'Cancel' : 'No'
            },
            click: dialogButtonClick.bind(this)
        }
        ];
        
        return dialogButtons;

So here i need to make the primary button to enable when their is change in the value on the dialog box.So,kindly help me to figure it out.

5 Replies
PM Pandiyaraj Muniyandi Syncfusion Team April 20, 2020 10:21 AM UTC

Hi Arshad, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement and it can be achievable by changing buttons -> buttonModel -> disabled property dynamically and updating the buttons property in application end. 
 
 
In the above sample, we configure keyup event to password input field which placed inside the dialog. On keyup event callback, we call getDialogButtons() method and assigned the result value into buttons API. 
 
Sample code block 
 
 
// Additional argument passed to perform button disable 
function getDialogButtons(action, enable) { 
    var primaryButtonClass = action === 'Delete' ? 'e-dialog-yes' : action === 'Add' ? 'e-dialog-add' : 'e-dialog-edit'; 
    var flatButtonClass = action === 'Delete' ? 'e-dialog-no' : 'e-dialog-cancel'; 
    var dialogButtons = 
      [ 
        { 
          buttonModel: { 
            cssClass: 'e-flat ' + primaryButtonClass, isPrimary: true, 
            content: action === 'Add' || action === 'Edit' ? 'Save' : 'Yes', 
            disabled: (enable == true) ? false : true      // Enable/Disable the button based on condition 
          }, 
          type: action === 'Add' || action === 'Edit' ? 'submit' : 'button', 
          click: dialogButtonClick.bind(this) 
        }, { 
          buttonModel: { 
            cssClass: 'e-flat ' + flatButtonClass, isPrimary: false, 
            content: action === 'Add' || action === 'Edit' ? 'Cancel' : 'No' 
          }, 
          click: dialogButtonClick.bind(this) 
        } 
      ]; 
   
    return dialogButtons; 
} 
 
passwordInputElement.addEventListener('keyup', function () { 
    if (passwordInputElement.value != "") { 
      // Reassign new buttons value 
      dlgObj.buttons = getDialogButtons(dialogType, true); 
      dlgObj.dataBind(); 
    } 
}); 
 
 
 
If you still facing any other issue, kindly revert to us. 
 
Regards, 
Pandiyaraj 


AR Arshad replied to Pandiyaraj Muniyandi May 1, 2020 03:53 AM UTC

Hi Arshad, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement and it can be achievable by changing buttons -> buttonModel -> disabled property dynamically and updating the buttons property in application end. 
 
 
In the above sample, we configure keyup event to password input field which placed inside the dialog. On keyup event callback, we call getDialogButtons() method and assigned the result value into buttons API. 
 
Sample code block 
 
 
// Additional argument passed to perform button disable 
function getDialogButtons(action, enable) { 
    var primaryButtonClass = action === 'Delete' ? 'e-dialog-yes' : action === 'Add' ? 'e-dialog-add' : 'e-dialog-edit'; 
    var flatButtonClass = action === 'Delete' ? 'e-dialog-no' : 'e-dialog-cancel'; 
    var dialogButtons = 
      [ 
        { 
          buttonModel: { 
            cssClass: 'e-flat ' + primaryButtonClass, isPrimary: true, 
            content: action === 'Add' || action === 'Edit' ? 'Save' : 'Yes', 
            disabled: (enable == true) ? false : true      // Enable/Disable the button based on condition 
          }, 
          type: action === 'Add' || action === 'Edit' ? 'submit' : 'button', 
          click: dialogButtonClick.bind(this) 
        }, { 
          buttonModel: { 
            cssClass: 'e-flat ' + flatButtonClass, isPrimary: false, 
            content: action === 'Add' || action === 'Edit' ? 'Cancel' : 'No' 
          }, 
          click: dialogButtonClick.bind(this) 
        } 
      ]; 
   
    return dialogButtons; 
} 
 
passwordInputElement.addEventListener('keyup', function () { 
    if (passwordInputElement.value != "") { 
      // Reassign new buttons value 
      dlgObj.buttons = getDialogButtons(dialogType, true); 
      dlgObj.dataBind(); 
    } 
}); 
 
 
 
If you still facing any other issue, kindly revert to us. 
 
Regards, 
Pandiyaraj 


Thank you for u r reply Pandiyaraj,
how would I check for multiple data instead of single data u given above?
I cant get the element id form the x-template.

GK Gunasekar Kuppusamy Syncfusion Team May 1, 2020 12:46 PM UTC

 Hi Arshad, 
 
We have prepared a sample for your requirements. In the below sample, we have rendered multiple input fields and enabled the dialog buttons, if all input fields have a value. 
Could you please check the above sample and confirm whether it meets your requirement? 
 
Regards, 
Gunasekar K 


AR Arshad May 1, 2020 04:52 PM UTC

I can't get the element from x-template so I cant valid the data with function kindly help me.

PM Pandiyaraj Muniyandi Syncfusion Team May 4, 2020 06:22 AM UTC

Hi Arshad, 
 
Good day to you. 
 
We have validated your query and you can access x-template inside placed elements, once it rendered inside the Dialog control by using its created event callback as follows 
 
 
// Bind created event 
var dlgObj = new ej.popups.Dialog({ 
  created: dialogCreated 
}); 
dlgObj.appendTo("#dialog"); 
 
 
// Bind keyup event to dialog inside placed input elements 
function dialogCreated() { 
    var textEle = dlgObj.element.querySelectorAll(".e-dlg-content .e-input"); 
    for (var i = 0; i < textEle.length; i++) { 
        textEle[i].addEventListener("keyup", onKeyUp); 
    } 
} 
 
 
We have modified the sample for your reference, check the below link 
 
If you still facing any other issue, kindly modify the sample to replicate the issue and revert to us. 
  
Regards,  
Pandiyaraj 


Loader.
Up arrow icon