dropdownlist on explorer issue

[aldo86Participant]

Hi,
I’ve added dropdowns to header column in jqxGrid this way:

columnrenderer : function (value) {                
        return '<div class="columnH" data-id="'+value+'" style="margin:0 auto"></div>';
    }

and then i run them into ready function in jqxGrid like this:

ready: function(){
            	var i=0;
            	var selInd=0;
            	$(".columnH").each(function(){
        			i++;
        			if(i>=_this.dropdownH.length)
        				selInd = 0;
        			else selInd = i;
        				
        			$(this).jqxDropDownList({ source: _this.dropdownH, selectedIndex: selInd, width: ($('#dgrid_def_fields').get(0).checked == true ? _this.defWidths[i] : _this.allWidths[i]), height: '25', dropDownHorizontalAlignment: 'left', dropDownWidth: 170, theme: _this.theme});
			
            	});

And everything works very well except in explorer when i click on the dropdown i see a behave something like a double click so i can’t open a select an option in a dropdown.

Best Regards

[Peter StoevKeymaster]

Hi aldo86,

The Grid handles internally the mouse events of the column headers and custom content within column headers should be added by implementing the column’s rendering and rendered functions. rendering for placing the HTML, rendered for initializing the HTML and telling the Grid that it uses custom content. Here’s a sample with DropDownList in a Column header implemented correctly: http://jsfiddle.net/d8t4zmtk/

JS:

var data = new Array();
  var firstNames = [
      "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
  var lastNames = [
      "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
  var productNames = [
      "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
  var priceValues = [
      "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
  for (var i = 0; i < 100; i++) {
      var row = {};
      var productindex = Math.floor(Math.random() * productNames.length);
      var price = parseFloat(priceValues[productindex]);
      var quantity = 1 + Math.round(Math.random() * 10);
      row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
      row["productname"] = productNames[productindex];
      row["price"] = price;
      row["quantity"] = quantity;
      row["total"] = price * quantity;
      data[i] = row;
  }
  var source = {
      localdata: data,
      datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}
  });
  $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      altrows: true,
      sortable: true,
      width: 500,
      source: dataAdapter,
      columns: [{
          text: 'First Name',
          datafield: 'firstname',
          width: 100,
          sortable: false,
          menu: false,
          renderer: function () {
              return "<div>";
          },
          rendered: function (element) {
              $(element).jqxDropDownList({
                  width: 98,
                  height: 23,
                  theme: 'energyblue',
                  source: ['1', '2', '3']
              });
              return true;
          }
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: 100
      }, {
          text: 'Product',
          datafield: 'productname',
          width: 180
      }, {
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          text: 'Unit Price',
          datafield: 'price',
          width: 90,
          cellsalign: 'right',
          cellsformat: 'c2'
      }, {
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }]
  });

Best Regards,
Peter Stoev

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

[Author]

Posts