jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton click on image does not fire action

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 8 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • click on image does not fire action #85993

    KBhima
    Participant

    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>

    click on image does not fire action #86000

    Dimitar
    Participant

    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,
    Dimitar

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

    click on image does not fire action #86037

    KBhima
    Participant

    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

    click on image does not fire action #86039

    KBhima
    Participant

    BTW am using angularjs and jqwidgets to develop this.

    Thanks

    click on image does not fire action #86056

    Dimitar
    Participant

    Hi KBhima,

    1. 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.
    2. 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,
    Dimitar

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.