jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › click on image does not fire action
Tagged: angular grid, angularjs, Button, button with image, click, grid, image, img, jquery grid, jqxgrid, jqxinput, widget column
This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 8 years, 3 months ago.
-
Author
-
Hi,
I have a Grid with columns having two images (one for edit and one for delete). When I click on the images, I should be able to edit or delete the row in the grid.
But I don’t see any action when I click the images. On clicking the delete button, I should be able to see a window confirming for the delete with “OK” or “CANCEL” buttons. Please look into the following code and let me know where am going wrong.var demoApp = angular.module(“demoApp”, [“jqwidgets”]);
demoApp.controller(“demoController”, function ($scope) {
var imagerenderer = function (row, datafield, value) {return ‘<jqx-button jqx-on-click =”buttonclick()”/>‘;
};var rowId, buttonclick;
$scope.isDisabled = true;
// Grid data.
$scope.client = [{
ClientId: 1,
ClientName: “ClientCompany”
},{
ClientId: 2,
ClientName: “ClientCompanies”
}];
$scope.grid = {};
$scope.gridSettings =
{
altrows: false,
sortable: true,
width: 500,
height: 180,
theme: ‘energyblue’,// 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: ‘Edit’, columntype: ‘button’, dataField: ‘Edit’,cellsrenderer: function()
{
return ‘<jqx-button jqx-on-click =”buttonclick()”/>‘;
},
buttonclick: function(row){
alert(“buttonclick”);
$scope.isDisabled = !$scope.isDisabled;
editrow = row;
// get the clicked row’s data and initialize the input fields.
var data = $scope.gridSettings.jqxGrid(‘getrowdata’, editrow);
$scope.isDisabled = !$scope.isDisabled;
$scope.ClientIDInput.element.setAttribute(‘readonly’, ‘readonly’);
$scope.clientIdSettings.jqxInput(‘val’,data.ClientId);
$scope.clientNameSettings.jqxInput(‘val’,data.ClientName);
}
},
/* { text: ‘Delete’, columntype: ‘button’, dataField: ‘Delete’, cellsrenderer: function(){return “Delete”;},
buttonclick: 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);
}}
} */{ text: ‘Image’, dataField: ‘Image’,columntype: ‘button’, width: 10, cellsrenderer: function (row) {
return ‘<jqx-button jqx-on-click =”deleteRow(‘ + row + ‘)”/>‘;
},buttonclick: function(){
$scope.deleteRow = function(index){alert(“buttonclick”);
var id = $scope.gridSettings.jqxGrid(‘getrowid’, index);
$scope.gridSettings.jqxGrid(‘deleterow’, id);
}}
}
]};
$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 () {
/* $scope.clientNameSettings.jqxInput(‘focus’);
$scope.clientNameSettings.jqxInput(‘val’,”);
$scope.clientIdSettings.jqxInput(‘focus’);
$scope.clientIdSettings.jqxInput(‘val’,”); */
//rowId =”;$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 (row,event) {
$scope.isDisabled = !$scope.isDisabled;
$scope.clientIdSettings.jqxInput(‘val’,”);$scope.clientNameSettings.jqxInput(‘val’,”);
//}};
$scope.save = function()
{
var mode=””;
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=”addSettings” jqx-create=”addSettings” jqx-on-click=”add()”>New Client</jqx-button></div>
<br><div >
<jqx-grid jqx-instance=”grid” jqx-settings=”gridSettings”></jqx-grid>
<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” ng-disabled =”isDisabled” jqx-on-click=”save() “>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></body>
</html>Hi KBhima,
If you wish to implement a button column with images and a working click event, you can try the approach presented in the following demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light. We hope it is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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
BTW am using angularjs and jqwidgets to develop this.
Thanks
Hi KBhima,
- Your code represents a custom scenario we cannot provide further assistance with. If you wish, you can contact sales@jqwidgets.com to request custom support or development.
- The row attribute passed to createwidget contains the row data. The row’s bound index is stored in row.boundindex. You can use row and not call getrowdata or call getrowdata and pass row.boundindex to it.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.