row selection

[larksys]

I'm not understanding row selection.  In my code I need to bind row selection to a function that displays data based on the contents of cell(0), indiv.  The following returns a grid list of individual names to select from.  Cell(0) is an href to view individual details.  It doesn't HAVE to be an href.


      var Vnamesuggest = '';

   function initSBScript() {

      $(document).ready(function() {

      CloseGrid = function() {
         $("##userslistdiv").pqGrid('destroy');
         $('##userslistdiv').hide;
      }
      $('.namesuggestselector').on('change', function() {
         Vnamesuggest = this.value;
         //alert(Vnamesuggest);
         $('##userslistdiv').show();
         var colM = [{title: "IndivID", width: 60, dataType: "integer", editable: false },
         {title: "Name", width: 150, dataType: "string", editable: false   },
         {title: "Company", width: 200, dataType: "string", editable: false },
         {title: "City", width: 150, dataType: "string", editable: false }];
         var dataModel = {location: "remote",   dataType: "JSON", method: "GET", paging: 'local', rPP: 15, rPPOptions: [15, 30, 45], getUrl: function() {
               return {
                  url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
               };
            },
            getData: function(response) {
               return {
                  data: response.DATA
               };
            }
         }
         $.extend(colM[0], {
            render: function(ui) {
               var rowData = ui.rowData;;
               return "<a href='#request.controlUrl#individuals/index.cfm?fa=viewIndiv&indivnum=" + rowData[0] + "' target='_blank'>" + rowData[0] + "</a>";
            }
         });
         $("##userslistdiv").pqGrid({
            width: 560, height: 470, title: "Select Participant", dataModel: dataModel, colModel: colM, scrollModel: {horizontal: false   },
            flexHeight: true, selectionModel: { type: 'cell'}
         });
         //alert("it worked-" + emid);
      });
      });
   };

[paramvir]

you need to subscribe to rowSelect event http://paramquery.com/api#event-rowSelect


This demo shows how to use rowSelect event http://paramquery.com/demos/master_detail

[larksys]

The documentation is just not clear enough for me.  I don't understand "subscribe" and it doesn't appear to be in the documentation.  I added the function but I don't see it happening and I don't get an error.  Well, that's not entirely true.  I did get "Resource interpreted as Image but transferred with MIME type text/css: https://dev.t.net/control/js/paramQuery/themes/office/pqgrid.CSS". 

      $(document).ready(function() {

      CloseGrid = function() {
         $("##userslistdiv").pqGrid('destroy');
         $('##userslistdiv').hide;
      }

      $('.namesuggestselector').on('change', function() {
         Vnamesuggest = this.value;
         //alert(Vnamesuggest);
         $('##userslistdiv').show();
         var colM = [{title: "IndivID", width: 60, dataType: "integer", editable: false },
         {title: "Name", width: 150, dataType: "string", editable: false   },
         {title: "Company", width: 200, dataType: "string", editable: false },
         {title: "City", width: 150, dataType: "string", editable: false }];
         var dataModel = {location: "remote",   dataType: "JSON", method: "GET", paging: 'local', rPP: 15, rPPOptions: [15, 30, 45], getUrl: function() {
               return {
                  url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
               };
            },
            getData: function(response) {
               return {
                  data: response.DATA
               };
            }
         }
         $.extend(colM[0], {
            render: function(ui) {
               var rowData = ui.rowData;;
               return "<a href='#request.controlUrl#individuals/index.cfm?fa=viewIndiv&indivnum=" + rowData[0] + "' target='_blank'>" + rowData[0] + "</a>";
            }
         });
         $( ".selector" ).pqGrid({
             rowClick: function( event, ui ) {}
         });
         $("##userslistdiv").pqGrid({
            width: 560, height: 470, title: "Select Participant", dataModel: dataModel, colModel: colM, scrollModel: {horizontal: false   },
            flexHeight: true, selectionModel: { type: 'cell'},
            rowSelect: function (evt, obj) {
               alert(obj.data[obj.rowIndxPage][2]);
               var orderID = obj.data[obj.rowIndxPage][2];
            }
         });
      });
      });
   };