Adding a new row and making it editable

[millhornParticipant]

I have a scenario where I need to add a new row to a grid, and leave it empty, but editable. I have achieved something, but it’s not quite what I’m looking for. In the example, I’ve provided a snippet of what’s happening.

I’m able to add a new row, but all the rows are editable. I only want the new row to be editable.

How can I achieve this?

Live Example

HTML

<div id="jqxWidget">
  <header>
    <h2 class="text-center">Example: How to change <code>something here</code></h2>
  </header>
  <div id="jqxgrid" class="auto-margin"></div>
</div>
<p class="notice"><strong>*All data is test data only.</strong></p>

<div style="margin-top: 10px;">
    <input id="addrowbutton" type="button" value="Add Row" />
</div>

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
    },
    {
      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
    },
    {
      id: "2",
      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
    },
    {
      id: "2",
      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
    },
    {
      id: "2",
      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
    },
    {
      id: "2",
      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
    }
  ];
  // prepare the data
  var source = {
    datatype: "json",
    datafields: [
      { name: "legalName" },
      { name: "agencyName" },
      { name: "agencyAddress" },
      { name: "phone" },
      { name: "hireDate", type: "date" },
      { name: "has401k", type: "bool" }
    ],
    localdata: data
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  var source = {
    localdata: data,
    datatype: "array",
    loadComplete: function (data) {},
    loadError: function (xhr, status, error) {}
  };

  $("#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,
    columns: [
      { text: "Legal Name", datafield: "legalName", width: "20%" },
      {
        text: "Agency Name",
        datafield: "agencyName",
        filtertype: "checkedlist",
        width: "20%"
      },
      { text: "Agency Address", datafield: "agencyAddress", width: "20%" },
      { text: "Phone", datafield: "phone", width: "20%" },
      {
        text: "Hire Date",
        datafield: "hireDate",
        cellsformat: "d",
        filtertype: "range",
        width: "10%"
      },
      {
        text: "Has 401K",
        datafield: "has401k",
        width: "10%",
        columntype: "checkbox",
        filtertype: "checkedlist"
      }
    ]
  });

  // $("#jqxgrid").jqxGrid('hidecolumn', 'legalName');
});

$("#addrowbutton").jqxButton({
  theme: "energyblue",
  height: 30
});

$("#addrowbutton").on("click", function () {
  var commit = $("#jqxgrid").jqxGrid("addrow", null, {editable: true});
});

[millhornParticipant]

It would be great if someone from jQWidgets could reply to this.

[svetoslav_borislavovParticipant]

Hi,

Could you, please look at this demo and see if this is okay for you? https://codepen.io/r3hab/pen/mdLYXXN
If not you can play with the events and the editable property to enable and disable the editing in the grid

I hope this helps!

Best regards,
Svetoslav Borislavov

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

[millhornParticipant]

Hi Svetoslav,

The demo you posted is the same one I posted in my original post. Did you fork mine and post the wrong link?

[svetoslav_borislavovParticipant]

Hi,

Unfortunately yes, I am very sorry!
Here you are: https://codepen.io/svetoslavb04/pen/gOKOVMp

Best regards,
Svetoslav Borislavov

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

[millhornParticipant]

Svetoslav,

That was perfect! Thank you for the assistance!

Jared

[Author]

Posts