Custom Event and Row event in Jquery JTable

Question

I am using Jquery Jtable Below is the structure $('#RequestTableContainer').jtable({ paging: true,

    pageSize: 5,
    sorting: true,
    actions:
    {
        listAction: '/Admin/UserAdmin/GetUserDetailsForAdminList'

    },
    fields: {
        FullName: {
            title: 'FullName',
            key: true,
            width: '7%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        Email: {
            title: 'Email',
            width: '9%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        Region: {
            title: 'Region',               
            width: '11%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },          
        UserLevelName: {
            title: 'UserLevelName',
            //width: '13%'
            width: '10%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        ADID: {
            title: 'ADID',//'Bank Country',
            key: true,
            width: '8%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        Roles: {
            title: 'Roles',//'Bank Country',
            //width: '9%'
            width: '19%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        Edit: {
            title: 'MyButton',
            width: '10%',
            display: function (data) {
                return '<button type="button" >create PDF</button> ';
            }
        },


    },
    recordsLoaded: function (event, data) {
        $('.jtable-data-row').click(function () {
            debugger;
            alert(event);
            alert('event');
            alert(data);
            alert('data');
            var ADID = $(this).attr('data-record-key');
            alert(ADID);
            roleId = $("#role").val();
            //window.location.href = '/BAM/BankAccountOpen/BankAccountOpenApproverView?RequestSystemNumber=' + RequestSystemNumber + '&RoleCode=' + roleId;
        });
    }
});
$('#RequestTableContainer').jtable('load');
});

I want custome Edit and Delete event as well as row click.How can this be achieved?

Answer 1

To create a fully custom delete button on a row by row basis, you will need to create your own column that is not part of the record structure. For example

customDelete: {
    title: 'Delete',
    create: false,
    edit: false,
    display: function (data) {
        var $img = $('<span class="ui-icon ui-icon-trash"  title="Delete"></span>');
        $img.click(function () {
             // your custom code goes here
             // data.record has all the fields of the record for you to use
        });
        return $img;
    }
}

same for edit.

Your recordsLoaded is a good place to apply a row click handler. Your function has coding error, the event and data arguments are those set for the recordsLoaded event. Use $('.jtable-data-row').click(function (event, data) { To have row click event data.