jQuery UI Widgets Forums Grid How to make a Grid row clickable and pass the id in a custom URL

This topic contains 3 replies, has 2 voices, and was last updated by  webwired 10 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • webwired

    Hello everyone again… I’m trying to figure out how to make a Grid row clickable to where it passes that row’s ‘id’ along in a custom URL…

    Does anyone know how to do that or can point me to some documentation that outlines it?

    Here’s my code:

            <link rel="stylesheet" href="../jqwidgets-ver3.0.3/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver3.0.3/scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // prepare the data
    var theme = 'classic';
    var source =
    datatype: "json",
    datafields: [
    { name: 'OrderTicketID', type: 'string'},
    { name: 'ClientName', type: 'string'},
    { name: 'AgencyName', type: 'string'},
    { name: 'AgentName', type: 'string'},
    { name: 'InsuranceCarrier', type: 'string'},
    { name: 'OrderTicketDateReceived', type: 'date'},
    { name: 'OrderTicketDateCompleted', type: 'date'}
    id: 'OrderTicketID',
    url: 'data.php',
    cache: false,
    root: 'Rows',
    pager: function (pagenum, pagesize, oldpagenum) {
    // callback called when a page or page size is changed.
    sort: function()
    // update the grid and send a request to the server.
    $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
    beforeprocessing: function(data)
    if (data != null)
    source.totalrecords = data[0].TotalRows;
    var dataAdapter = new $.jqx.dataAdapter(source);
    width: 900,
    source: dataAdapter,
    theme: theme,
    autoheight: true,
    pageable: true,
    virtualmode: true,
    sortable: true,
    rendergridrows: function()
    return dataAdapter.records;
    columns: [
    { text: '', datafield: 'OrderTicketID', width: 0},
    { text: 'Client Name', datafield: 'ClientName', width: 150},
    { text: 'Agency', datafield: 'AgencyName', width: 175 },
    { text: 'Agent', datafield: 'AgentName', width: 100 },
    { text: 'Carrier', datafield: 'InsuranceCarrier', width: 225 },
    { text: 'Date Received', datafield: 'OrderTicketDateReceived', width: 125, cellsformat: 'MM-dd-yyyy' },
    { text: 'Date Completed', datafield: 'OrderTicketDateCompleted', width: 125, cellsformat: 'MM-dd-yyyy' }


    I think I’m getting close… I have gotten it to work with ‘rowselect’, but I cannot get it to work with ‘rowdoubleclick’ … would anyone be able to help me figure the rest of this out?

    Here’s the code that I added…

    $('#jqxgrid').bind('rowselect', function (event) 
    var row = event.args.row.OrderTicketID;
    window.location = 'orderticket.php?orderticketid=' + row;


    Hello webwired,

    To achieve this, bind to the rowdoubleclick event:

    $('#jqxgrid').on('rowdoubleclick', function (event) {
    var args = event.args;
    var row = args.rowindex;
    window.location = "http://www.jqwidgets.com/";
    // or:
    // window.location = 'orderticket.php?orderticketid=' + row;

    Best Regards,

    jQWidgets team


    That did not work, it threw errors, plus, I didn’t want the rowindex, I wanted the row’s ID…

    Here’s the code that ultimately worked…

                    var row;
    $('#jqxgrid').bind('rowselect', function (event)
    row = event.args.row.OrderTicketID;
    $('#jqxgrid').bind('rowdoubleclick', function (event) {
    window.location = 'orderticket.php?orderticketid=' + row;
    • This reply was modified 10 years, 7 months ago by  webwired.
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.