Dropdown list not working in dynamically added new row

[millhornParticipant]

Hello,

In my application, I’m adding a new row. The new row is an editable row. The final column of that row (Coffee Flavor), when being completed is supposed to be a dropdown list of items. I found inspiration with this post, but when I tried implementing it into my application, something is wrong and the dropdown list is not displaying.

You can find an example of my project here: https://codepen.io/r3hab/pen/eYKJxKr

HTML

  <div id="jqxgrid" class="auto-margin"></div>
  <button type="button" id="addNewPerson">Add Row</button>

JavaScript

$(document).ready(function () {
  var data = [
    {
      id: "1",
      legalName: "Agrawal, Parag",
      agencyName: "Social Services",
      agencyAddress:
        "Market Square, 1355 Market St<br>#900<br>San Francisco, CA 94103",
      phone: "(415) 222-9670",
      hireDate: "04-3-2022",
      has401k: true,
      coffeePreference: "Hazelnut"
    },
    {
      id: "2",
      legalName: "Zuckerberg, Mark",
      agencyName: "Defense Advocates Office",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 456-1234",
      hireDate: "01-30-2019",
      has401k: true,
      coffeePreference: "Vanilla"
    },
    {
      id: "3",
      legalName: "Walker, Johnny",
      agencyName: "Prosecutor's Office",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 329-0124",
      hireDate: "10-03-2016",
      has401k: false,
      coffeePreference: "Mocha"
    },
    {
      id: "4",
      legalName: "Daniels, Jack",
      agencyName: "Prosecutor's Office",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 856-5309",
      hireDate: "07-28-2011",
      has401k: false,
      coffeePreference: "Mocha"
    },
    {
      id: "5",
      legalName: "Fonda, Jane",
      agencyName: "Social Services",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 456-1234",
      hireDate: "06-14-2021",
      has401k: true,
      coffeePreference: "Cinnamon"
      
    },
    {
      id: "6",
      legalName: "Bauer, Jack",
      agencyName: "National Defense",
      agencyAddress: "24 Bauer Way<br>Menlo Park, CA 94025",
      phone: "(123) 242-4242",
      hireDate: "11-10-2008",
      has401k: false,
      coffeePreference: "Hazelnut"
    }
  ];
  // prepare the data
  var source = {
    datatype: "json",
    datafields: [
      { name: "legalName" },
      { name: "agencyName" },
      { name: "agencyAddress" },
      { name: "phone" },
      { name: "hireDate", type: "date" },
      { name: "has401k", type: "bool" },
      { name: "coffeePreference" }
    ],
    localdata: data
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  var source = {
    localdata: data,
    datatype: "array",
    loadComplete: function (data) {},
    loadError: function (xhr, status, error) {}
  };

  var coffees = [
    "French Vanilla",
    "Hazelnut",
    "Mocha",
    "Caramel",
    "Cinnamon"
  ];

  $("#jqxgrid").jqxGrid({
    source: dataAdapter,
    sortable: true,
    theme: "energyblue",
    width: "98%",
    height: "630px",
    pageable: false,
    columnsresize: true,
    selectionMode: "none",
    filterable: true,
    showfilterrow: true,
    autoheight: true,
    autorowheight: true,
    groupable: true,
    editable: true,
    columns: [
      {
        text: "Legal Name",
        datafield: "legalName",
        width: "15%"
      },
      {
        text: "Agency Name",
        datafield: "agencyName",
        filtertype: "checkedlist",
        width: "20%"
      },
      {
        text: "Agency Address",
        datafield: "agencyAddress",
        width: "20%"
      },
      {
        text: "Phone",
        datafield: "phone",
        width: "15%"
      },
      {
        text: "Hire Date",
        datafield: "hireDate",
        cellsformat: "d",
        filtertype: "range",
        width: "10%"
      },
      {
        text: "Has 401K",
        datafield: "has401k",
        width: "10%",
        columntype: "checkbox",
        filtertype: "checkedlist"
      },
      {
        text: "Coffee Flavor",
        datafield: "coffeePreference",
        width: "10%",
        columntype: "input",
        filtertype: "dropdownlist",
        createEditor: function (row, cellvalue, editor, cellText, width, height) {
          editor.jqxDropDownList({
            autoDropDownHeight: true,
            source: coffees
          })
        }
      }
    ]
  });
});

const newRowsIds = [];
$("#addNewPerson").on("click", function () {
  const commit = $("#jqxgrid").jqxGrid("addrow", null, {});
  const rows = $("#jqxgrid").jqxGrid("getboundrows");
  console.log(rows[rows.length - 1]);
  newRowsIds.push(rows[rows.length - 1].boundindex);
});

$("#jqxgrid").on("cellclick", function (event) {
  if (newRowsIds.includes(event.args.rowindex)) {
    $("#jqxgrid").jqxGrid({
      editable: true
    });
  } else {
    $("#jqxgrid").jqxGrid({
      editable: false
    });
  }
});

• This topic was modified 4 months, 3 weeks ago by  millhorn.

[svetoslav_borislavovParticipant]

Hi,

The columntype of column should be set to ‘dropdownlist’.
In the cell click handler, you are changing the editable property every time even though it is set to true and the grid refreshes itself.
To avoid this you can make a check if the grid is editable and if it is, do not change the property.
Here is the sample: https://codepen.io/svetoslavb04/pen/vYrGEmR

I hope this helps!

Best regards,
Svetoslav Borislavov

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

[Author]

Posts