Disable/Enable input and jqx buttons not working on clicking edit button

[KBhimaParticipant]

Hi,

Am creating a webpage using angularJS and jqwidgets, with a grid having columns EDIT and DELETE buttons, a INPUT FORM and ADD, SAVE, CANCEL Buttons.
The input form, save and cancel buttons are disabled initially. They should be enabled when ADD button or the EDIT button are clicked.
They are enabled when I click the ADD button but the same is not working with the EDIT button. when I click the EDIT button to edit something, they are still in disable mode and not enabled on the click. Could you please look into the following code and let me know where am going wrong.

Also if I remove this piece of code

$scope.isDisabled = !$scope.isDisabled; and ng-disabled from the code and edit the row data, it doesn’t update the row instead it is adding a new row to the grid.

var demoApp = angular.module(“demoApp”, [“jqwidgets”]);
demoApp.controller(“demoController”, function ($scope) {
$scope.jqxWindowSettings = {
maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3
};

$scope.isDisabled = true;
var rowId;
// Grid data.
$scope.client = [{
ClientId: 1,
ClientName: “ABC”
},
{
ClientId: 2,
ClientName: “DEF”
}];
$scope.grid = {};
$scope.gridSettings =
{
altrows: false,
sortable: true,
//width: 500,
//height: 200,

// disabled: false,
columnsresize: true,
ready: function () {
source: datatype: “array”;
dataFields: [
{ name: ‘ClientId’, type: ‘int’
},
{ name: ‘ClientName’, type: ‘String’ }
],
$scope.grid.selectrow(0);
},
source: $scope.client,
columns: [
{ text: ‘ClientId’, columntype: ‘textbox’, dataField: ‘ClientId’ },
{ text: ‘ClientName’, columntype: ‘textbox’, dataField: ‘ClientName’ },
{ text: ”, columntype: ‘button’, dataField: ‘Image’, width: 150, cellsrenderer: function () { return “Edit”; },
buttonclick: function (row) {
editrow = row;
$scope.isDisabled = !$scope.isDisabled;
// get the clicked row’s data and initialize the input fields.
var data = $scope.gridSettings.jqxGrid(‘getrowdata’, editrow);
$scope.ClientIDInput.element.setAttribute(‘readonly’, ‘readonly’);
$scope.clientIdSettings.jqxInput(‘val’, data.ClientId);
$scope.clientNameSettings.jqxInput(‘val’, data.ClientName);

}
},
{text: ”, columntype: ‘button’, dataField: ‘Delete’, width: 150, cellsrenderer: function () {
return “Delete”;
},
// show button click handler.
buttonclick: function (row) {

$scope.jqxWindowSettings.jqxWindow(‘open’);
$scope.Ok= function(row){
deleterow =row;
var selectedrowindex = $scope.gridSettings.jqxGrid(‘getselectedrowindex’);
var rowscount = $scope.gridSettings.jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $scope.gridSettings.jqxGrid(‘getrowid’, selectedrowindex);
var commit = $scope.gridSettings.jqxGrid(‘deleterow’, id);
}
$scope.jqxWindowSettings.apply(‘close’);
}
$scope.Cancel= function(){
$scope.jqxWindowSettings.apply(‘close’);
}
}
}
]

};

$scope.clientIdSettings = { width: 150, height: 30 };
$scope.clientNameSettings = {
width: 150, height: 30
};

$scope.addSettings =
{
height: 30, width: 80

};

$scope.btnSettings = { height: 30, width: 80 };

$scope.add = function () {
//$(‘#input’).jqxInput(‘focus’);
$scope.isDisabled = !$scope.isDisabled;
$scope.ClientIDInput.element.removeAttribute(‘readonly’);
$scope.clientNameSettings.jqxInput(‘focus’);
$scope.clientIdSettings.jqxInput(‘val’,”);
$scope.clientIdSettings.jqxInput(‘focus’);
$scope.clientNameSettings.jqxInput(‘val’,”);
rowId =”;
};
$scope.cancel = function () {

$scope.clientIdSettings.jqxInput(‘val’, ”);
$scope.clientNameSettings.jqxInput(‘val’, ”);
$scope.isDisabled = !$scope.isDisabled;
};

$scope.save = function () {

var data = {
ClientId: $scope.clientIdSettings.jqxInput(‘val’),
ClientName: $scope.clientNameSettings.jqxInput(‘val’)
};
if(rowId == ”){
$scope.gridSettings.jqxGrid(‘addrow’, null, data);
var rows = $scope.gridSettings.jqxGrid(‘getrows’);
$scope.gridSettings.jqxGrid(‘selectrow’, rows.length – 1);
$scope.clientIdSettings.jqxInput(‘val’, ”);
$scope.clientNameSettings.jqxInput(‘val’, ”);
}else{
var rowID = $scope.gridSettings.jqxGrid(‘getrowid’, editrow);
$scope.gridSettings.jqxGrid(‘updaterow’, rowID, data);
$scope.clientIdSettings.jqxInput(‘val’, ”);
$scope.clientNameSettings.jqxInput(‘val’, ”);
}

};
});

</script>
</head>
<body ng-controller=”demoController”>
<div>
<jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” jqx-on-click=”add()”>New Client</jqx-button>

</div>
<br>

<div>
<jqx-grid jqx-instance=”grid” jqx-settings=”gridSettings”></jqx-grid>
</div><br>

<div>
<p>

ClientID:
<jqx-input jqx-instance=”ClientIDInput” jqx-settings=”clientIdSettings” jqx-create=”clientIdSettings” ng-disabled =”isDisabled”></jqx-input>
</p>
<p>Client Name:<jqx-input jqx-settings=”clientNameSettings” jqx-create=”clientNameSettings” ng-disabled =”isDisabled”></jqx-input></p>
</div><br>

<div>
<jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” jqx-on-click=”save()” ng-disabled =”isDisabled”>Save</jqx-button>
<jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” jqx-on-click=”cancel()” ng-disabled =”isDisabled” style=”margin-left: 5px;”>Cancel</jqx-button>
</div>
<jqx-window jqx-settings=”jqxWindowSettings”>
<div>
Confirm
</div>
<div>
<div>Are you sure you want to delete this client?
</div>
<div>
<div style=”float: right; margin-top: 15px;”>
<jqx-button jqx-on-click=”Ok()” style=”margin-right: 10px”>Ok</jqx-button>
<jqx-button jqx-on-click=”Cancel()”>Cancel</jqx-button>
</div>
</div>
</div>
</jqx-window>
<!– <jqx-button jqx-on-click=”showWindow()”>confirm</jqx-button> –>

</body>
</html>

Could you please provide me working examples to make my code work. Thanks in advance.

[DimitarParticipant]

Hi KBhima,

Instead of using ng-disabled, please try setting the jqxButton property disabled (through jqx-settings) and updating it dynamically when necessary.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[KBhimaParticipant]

Hi Dimitar,

Thanks for the response, Could you please provide me a sample in jqwidgets and angularjs as to how to do this dynamically.

Thanks,

[DimitarParticipant]

Hi KBhima,

A disabled button is shown in the following demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/angular-buttons/angularjs-button-defaultfunctionality.htm?light.

And here is how you can change the property dynamically:
$scope.clientNameSettings.jqxInput({ disabled: true });

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts