jQWidgets Forums
Forum Replies Created
-
Thanks, the demo you provided helped me to fire the action on button click. However it did not provide me the complete solution.
Following are the issues.
1) When I click on the delete image, it deletes a row only for the first time I click the button , next time when I try to perform the same action, it just opens the confirm window and on clicking “OK”, it closes the confirm window but does not delete the row.
2) Clicking the Edit image does not perform any action. It gives me following error: TypeError: data is undefined
$scope.clientIdSettings.jqxInput(‘val’,data.ClientId);Following is the piece of code for both the EDIT and DELETE columns.
{ text: ”, datafield: ‘Edit’,
createwidget: function (row, column, value, htmlElement) {
var datarecord = value;
var imgurl = ‘images/edit.png’;
var img = ‘
‘;
var button = $(“<div style=’border:none;’>” + img + “<div class=’buttonValue’>” + value + “</div></div>”);
$(htmlElement).append(button);
button.jqxButton({ template: “success”, height: ‘100%’, width: ‘100%’ });
button.click(function (event) {
editrow = row;
$scope.isDisabled = !$scope.isDisabled;
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);
});
},
initwidget: function (row, column, value, htmlElement) {
var imgurl = ‘images/edit.png’;
$(htmlElement).find(‘.buttonValue’)[0].innerHTML = value;
$(htmlElement).find(‘img’)[0].src = imgurl;
}
},
{
text: ”, datafield: ‘delete’, width: 100,
createwidget: function (row, column, value, htmlElement) {
var datarecord = value;
var imgurl = ‘images/remove.png’;
var img = ‘
‘;
var button = $(“<div style=’border:none;’>” + img + “<div class=’buttonValue’>” + value + “</div></div>”);
$(htmlElement).append(button);
button.jqxButton({ template: “success”, height: ‘100%’, width: ‘100%’ });
button.click(function (event) {
$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’);
}});
},
initwidget: function (row, column, value, htmlElement) {
var imgurl = ‘images/remove.png’;
$(htmlElement).find(‘.buttonValue’)[0].innerHTML = value;
$(htmlElement).find(‘img’)[0].src = imgurl;
}
}If you want to test it I have the complete code on the top of this page, you can just replace the above code in the EDIT and DELETE columns.
Thanks