Author Topic: cellDblClick Sample Codes  (Read 799 times)

STEVE

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
cellDblClick Sample Codes
« on: September 21, 2022, 08:43:27 pm »
Hello paramvir?

I want to know how to go to the target URL when the cell were double clicked.

I guess below code will be answered to my question. 

But, I don't understand it at all.  I need good examples.   

Would you help me to get the good sample codes?

Code: [Select]

cellDblClick( event, ui )Type: pqGrid:cellDblClick

Triggered when a cell is double clicked in pqGrid.

event
Type: Event
ui
Type: Object
rowData
Type: Object
Reference to 1-dimensional array or object representing row data.
rowIndx
Type: Integer
Zero based index of the row.
dataIndx
Type: Integer or String
Zero based index in array or key name in JSON.
colIndx
Type: Integer
Zero based index of the column corresponding to cell.
Code examples:

Initialize the pqGrid with the cellDblClick callback specified:

1
2
3
$( ".selector" ).pqGrid({
    cellDblClick: function( event, ui ) {}
});

Bind an event listener to the pqGrid:cellDblClick event:

1
$( ".selector" ).on( "pqGrid:cellDblClick", function( event, ui ) {} );

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Re: cellDblClick Sample Codes
« Reply #1 on: September 22, 2022, 05:57:48 am »
cellDblClick is a simple event which is fired when a cell is double clicked.

Sample code to open a url upon dblclick is given below:

Code: [Select]
    $(function () {
        var data = [
            { rank: 1, url: 'http://www.google.com', revenues: 339938.0, profits: 36130.0 },
            { rank: 2, url: 'http://www.apple.com', revenues: 315654.0, profits: 11231.0 }
        ];

        var obj = {
            width: "80%",
            height: 400,
            resizable: true,
            title: "Grid From JSON",
            showBottom: false,
            scrollModel: { autoFit: true },
            dataModel: { data: data },
cellDblClick: function(evt, ui){
var url = ui.rowData[ ui.dataIndx ];
var win = window.open(url, '_blank');
  win.focus();
}
        };
        $("#grid_json").pqGrid(obj);
    });   
   

STEVE

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
Re: cellDblClick Sample Codes
« Reply #2 on: October 13, 2022, 07:41:11 am »
Thank you for your response.

By the way, I want to know how to fix the column to double-click,
Or when only the PID column was clicked, new windows would pop up.

How to change the below code with two column values?
Code: [Select]

var url = ui.rowData[ ui.dataIndx ];


Quote
{ title: "패키지", width: 200, dataType: "string", dataIndx: "pkg" },
{ title: "프로그램ID", width: 200, dataType: "string", dataIndx: "pid" },

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Re: cellDblClick Sample Codes
« Reply #3 on: October 13, 2022, 02:28:09 pm »
column of interest can be checked with if condition.

Code: [Select]
cellDblClick: function(evt, ui){
   if(ui.dataIndx == 'pid'){
var url = ui.rowData[ ui.dataIndx ];
var win = window.open(url, '_blank');
win.focus();
   }
}

STEVE

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
Re: cellDblClick Sample Codes
« Reply #4 on: October 13, 2022, 05:47:48 pm »
Thank you~

By the way, I need two columns like the below code.

Code: [Select]
var url = "HTTP://xxx.xxx.xxx.:9090/" + ui.rowData[ ui.dataIndx('pkg') + "/" + ui.dataIndx('pid')] ;

 Is it able to use this way?

 Or is there any other way?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Re: cellDblClick Sample Codes
« Reply #5 on: October 14, 2022, 03:23:31 pm »
I understand that you have been trying to concatenate strings from 2 columns to create complete url

Code: [Select]
var url = "HTTP://xxx.xxx.xxx.:9090/" + ui.rowData[ 'pkg' ] + "/" + ui.rowData[ 'pid' ] ;