Javascript function on jqxgrid

[Nitin KarandeParticipant]

Hi,
am trying to fire my external removeUser function on jqxgrid, am not getting proper response.

        function myGrid(){
            // prepare the data
            console.log("data");
            console.log(data);
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields:
                [
                    { name: 'id', type: 'number' },
                    { name: 'Type', type: 'string' },
                    { name: 'Name', type: 'string' },
                    { name: 'Description', type: 'string' },
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
           
            $("#grid").jqxGrid(
            {
                width: '100%',
                theme: 'dark',
                source: dataAdapter,
                columnsresize: true,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                autoheight: true,
                columnsheight: 60,
                rowsheight: 50,
                columns: [
                    {
                        text: 'Sr No',sortable: false, filterable: false, editable: false,
                        groupable: false, draggable: false, resizable: false,
                        datafield: '', columntype: 'number',align: 'center',cellsalign: 'center', width: '12%' ,
                        cellsrenderer: function (row, column, value) {
                            return "<div  class='text-center' style='margin-top:15px'>" + (value + 1) + "</div>";
                        }
                    },
                        { text: 'Name', datafield: 'Type',align: 'center', width: '22%' },
                        { text: 'Last Name', datafield: 'Name',align: 'center', width: '22%' },
                        { text: 'Product', datafield: 'Description',align: 'center', width: '22%' },
                        {
                            text: 'Edit', cellsAlign: 'center', align: "center",width: '22%', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                            // render custom column.
                            return '<div class="text-center" style="padding:5px;"> <button style="margin-right:5px" data-row="' + row + '" class="editButtons btn btn-primary" onclick="removeUser()">Edit </button><input type="button" data-row="' + row + '" class="editButtons btn btn-danger" onclick="removeUser()" value="Delete" /> </div>';
                            }
                        }
                ]
            });

            }
//other settings
            function removeUser() {
                alert("fired event");

            }

[MartinParticipant]

Hello Nitin Karande,

You should just bind to the click event of the buttons after creating the grid.
Add this: $(".editButtons").click(removeUser); after the grid creation, instead of the ‘onclick’ in the cellsRenderer function.

Please, check this Demo.

Best Regards,
Martin

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

[Nitin KarandeParticipant]

Hello Martin,

Thanks for reply !
i need one more help, i want to pass row parameter onClick of button.
I have tried following, where i want to find the row data for following clicked button row.

 function myGrid(){
            // prepare the data
            console.log("data");
            console.log(data);
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields:
                [
                    { name: 'id', type: 'number' },
                    { name: 'Type', type: 'string' },
                    { name: 'Name', type: 'string' },
                    { name: 'Description', type: 'string' },
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
           
            $("#grid").jqxGrid(
            {
                width: '100%',
                theme: 'dark',
                source: dataAdapter,
                columnsresize: true,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                autoheight: true,
                columnsheight: 60,
                rowsheight: 50,
                columns: [
                    {
                        text: 'Sr No',sortable: false, filterable: false, editable: false,
                        groupable: false, draggable: false, resizable: false,
                        datafield: '', columntype: 'number',align: 'center',cellsalign: 'center', width: '12%' ,
                        cellsrenderer: function (row, column, value) {
                            return "<div  class='text-center' style='margin-top:15px'>" + (value + 1) + "</div>";
                        }
                    },
                        { text: 'Name', datafield: 'Type',align: 'center', width: '22%' },
                        { text: 'Last Name', datafield: 'Name',align: 'center', width: '22%' },
                        { text: 'Product', datafield: 'Description',align: 'center', width: '22%' },
                        {
                            text: 'Edit', cellsAlign: 'center', align: "center",width: '22%', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                            // render custom column.
                            return '<div class="text-center" style="padding:5px;"> <button style="margin-right:5px" data-row="' + row + '" class="editButtons btn btn-primary" onclick="editUser(' + row + ')">Edit </button><input type="button" data-row="' + row + '" class="deleteButtons btn btn-danger" onclick="deleteUser()" value="Delete" /> </div>';
                            }
                        }
                ]
            });

            }
//other settings
            function editUser(data) {
                alert("fired event"+data);
console.log(data);

            }

[MartinParticipant]

Hello Nitin Karande,

I updated the Demo to find the data row.
You should pass the event to the handle method and check the target’s attribute.

Best Regards,
Martin

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

[Nitin KarandeParticipant]

Hello Martin,

Thanks, for the reply.
can you provide solution in javascript as below code gives error on jquery 1.9

 $(".editButtons").click((e) => removeUser(e));

can you please let me know how to get row data of the table not the attribute.

[Dave_1Participant]

Hi Nitin Karande,

Try this, code added as an example

    $('.editButtons').click(function() {
      var id = $(this).attr('data-row');
      alert(id);
    });

[Nitin KarandeParticipant]

Hello Dave_1,

Thank you for the reply,

When we enable pagination using below code, Edit button clickable functionality not working on page 2 but page 1 has been working fine.

 $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      altrows: true,
      width: 600,
      source: dataAdapter,
      sortable: true,
      pageable: true,
      autoheight: true,
      columns: [{
}];
});

How we can perform click operation on page 2 as well.

[Nitin KarandeParticipant]

Hello Martin,
When we enable pagination using below code, Edit button clickable functionality not working on page 2 but page 1 has been working fine.

 $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      altrows: true,
      width: 600,
      source: dataAdapter,
      sortable: true,
      pageable: true,
      autoheight: true,
      columns: [{
}];
}); 

How we can perform click operation on page 2 as well.

[MartinParticipant]

Hello Nitin Karende,

This would be the solution for adding the click event in javascript.

Best Regards,
Martin

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

[Nitin KarandeParticipant]

Hello Martin,

When we adding pageable parameter then page number 2 is not performing click event.

    sortable: true,
      pageable: true,
  

I have set rows shows option has been 5 and trying perform click on item 7th position, we are getting error.

[MartinParticipant]

Hello Nitin,

I’ve updated the Demo again.
You should bind to the click event again when the page is changed.

Best Regards,
Martin

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

[Author]

Posts