How to add a delete row button outside of a newly created row?

[millhornParticipant]

I have an application set up where I can add a new editable row on click. But, I would also like the ability to delete that row if needed. How can I add a delete button to the right of the new row created?

Can this be added outside the row? I’m not sure where to even start with this request. Below is what I have so far, and here is a demo.

HTML

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

JS

$(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: "dropdownlist",
        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) {
  
  const editable = $('#jqxgrid').jqxGrid('editable');
  
  if (newRowsIds.includes(event.args.rowindex)) {
    
    if(!editable) {
      $("#jqxgrid").jqxGrid({
        editable: true
      });
    }
  } else if(editable){
    
    $("#jqxgrid").jqxGrid({
      editable: false
    });
  }  
});

[svetoslav_borislavovParticipant]

Hi,

Could you, please look at the toolbar option?
You can use it and add a delete button to it: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/toolbar.htm

Another option is to manually add a button somewhere in the HTML upon clicking add new row

Best regards,
Svetoslav Borislavov

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

[millhornParticipant]

Thank you Svetoslav!

I have done what you suggested in this codepen.

Any additional thoughts here? Ideally, I would like to add it inline with each new row. If you have any advice on that, it would be great.

[svetoslav_borislavovParticipant]

Hi,

You cannot add a button next to the row inside the grid element because its internal elements have overflow set to hidden.
Additionally, you can use a column for this but the column will be present for every row.

Best regards,
Svetoslav Borislavov

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

[millhornParticipant]

That’s exactly what I was thinking. Thank you for the assistance.

[svetoslav_borislavovParticipant]

Hi,

Here is an example of this: https://codepen.io/svetoslavb04/pen/wvXgmVG

Best regards,
Svetoslav Borislavov

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

[millhornParticipant]

When I start scrolling your pen, the table grows by width and height. Any idea what’s causing that?

[svetoslav_borislavovParticipant]

Hi,

Could you, please look at this demo: https://codepen.io/svetoslavb04/pen/wvXgmVG

Best regards,
Svetoslav Borislavov

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

[Author]

Posts