javascriptjqxgridjqxwidgets

dropdown for Year not showing unless I click on each cell

I am using jqwidgets JS library and having one issue in displaying the dropdown under Year column. As can be seen in the code below, the Year column is not displaying the jqxDropdownList unless I click on it. For example, when I clicked on the first cell of Year column, it showed me the list as shown below:

enter image description here

Can anyone tell me what am I doing wrong here? Please find my code below:

  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 < 10; 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["available"] = !!(i % 2);
      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',
      width: 500,
      autoheight: true,
      editable: true,
      source: dataAdapter,
      columns: [{
          text: 'Available',
          datafield: 'available',
          width: 100,
          columntype: 'checkbox'
      }, {
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          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: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
          createeditor: function (row, column, editor) {
                    var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
                  
                   
                     
                    editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
                }
       
      },
      
      {
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }]
  });
  $("#jqxgrid").bind('cellendedit', function (event) {
    if (event.args.value) {
        $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
    }
    else {
        $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
    }
});
  
   $('#jqxbutton').click(function () {
    var rows = $('#jqxgrid').jqxGrid('getrows');
    //console.log(rows);
     var selectedRows = rows.filter(x => x.available)
     
    console.log(selectedRows)
   
     //alert(rows);
 });
  
 
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />

Testing cellsrenderer function based on the Muzaffer Galata'sanswer:

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 < 10; 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["available"] = !!(i % 2);
      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) {}
  });
  var cellsRendererForCombo = function (row, columnfield, value, defaulthtml, columnproperties) {
            return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">'
                + value + '<img src="https://www.jqwidgets.com/public/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
        }
        
        
  $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      width: 500,
      autoheight: true,
      editable: true,
      source: dataAdapter,
      columns: [{
          text: 'Available',
          datafield: 'available',
          width: 100,
          columntype: 'checkbox'
      }, {
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          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: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
          createeditor: function (row, column, editor) {
             var list =                  ['2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021'];
            editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
           },
          cellsrenderer: cellsRendererForCombo,

       
      },
      
      {
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }]
  });
  $("#jqxgrid").bind('cellendedit', function (event) {
    if (event.args.value) {
        $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
    }
    else {
        $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
    }
});
  
   $('#jqxbutton').click(function () {
    var rows = $('#jqxgrid').jqxGrid('getrows');
    //console.log(rows);
     var selectedRows = rows.filter(x => x.available)
     
    console.log(selectedRows)
   
     //alert(rows);
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />

Solution

  • You may use cellsrenderer option:

            var cellsRendererForCombo = function (row, columnfield, value, defaulthtml, columnproperties) {
            return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">'
                + value + '<img src="../../Scripts/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
        }
    
    ........
    {
        text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
        createeditor: function (row, column, editor) {
            var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
            editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
        },
        cellsrenderer: cellsRendererForCombo,
    },
    .......