How to make a Grid row clickable and pass the id in a custom URL

[webwiredMember]

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);
                $("#jqxgrid").jqxGrid(
                {
                    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' }
                  ]
                }); 
            });
        </script>

[webwiredMember]

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;
});

[DimitarParticipant]

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

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

[webwiredMember]

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 9 years, 7 months ago by  webwired.

[Author]

Posts