[millhornParticipant]

That worked out perfectly Svetoslav. Thanks!

[millhornParticipant]

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

[millhornParticipant]

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

[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.

[millhornParticipant]

Svetoslav,

That was perfect! Thank you for the assistance!

Jared

[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?

[millhornParticipant]

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

[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]

Thanks Svetoslav!

[millhornParticipant]

I am working with a grid and filtered table. If I search something that doesn’t exist in the data source, then a message displays: No data to display.

If that string is present, I want to replace it with HTML in place of it.

const emptyData = document.querySelector('.jqx-grid-cell span')
if (emptyData.textContent.includes('No data to display')) {
  emptyData.innerHTML = "This person doesn't exist in our database. <button>Create them!</button>";
}

…but, unfortunately, this doesn’t work. Is there a better or easier way to do this within jQWidgets?

[millhornParticipant]

It turns out I wasn’t able to hide the column with the single line, but if I embed the property in an if/else, inside a function… then it works fine. Seems counter-intuitive as I might not want to run another function, but it is what it is.

I’ve updated the above codepen with the solution to this: View Codepen

//hiding a column or two
var adaptivewidth = function () {
  if (window.innerWidth < 768) {
    $("#jqxgrid").jqxGrid("hidecolumn", "phone");
    $("#jqxgrid").jqxGrid("hidecolumn", "hireDate");
  } else {
    $("#jqxgrid").jqxGrid("showcolumn", "phone");
    $("#jqxgrid").jqxGrid("showcolumn", "hireDate");
  }
};

//allows the above function to run whether window is loaded or resized
["load", "resize"].forEach((e) =>
  window.addEventListener(e, adaptivewidth, false)
);

[millhornParticipant]

I know this question is quite aged, but I asked the question recently and the response was:

You don’t need to use the cellsRenderer of the grid, but the renderer of the jqxDropDownList.

Here is a demo: https://codepen.io/r3hab/pen/gOeQOrX Look at the has401k column.

[millhornParticipant]

That is spectacular Ivan! Thank you!

[millhornParticipant]

I know this post is a bit old, but I think jQWidgets has been updated quite a bit in the last 8 years. If anyone is looking for an example on mixing filtertype within individual columns, I put up an example here: https://codepen.io/r3hab/pen/poLOXao

[millhornParticipant]

For my situation, I was trying to return an address and display it in a cell in the following format:

Market Square, 1355 Market St
#900
San Francisco, CA 94103

However, I just learned that I can parse the JSON with <br> tags in it.

To the jqxgrid properties, I added:

autoheight: true,
autorowheight: true,

…and everything displays great!

** Although, I should add that there should be a way to add multiple or concatenate datafields.

[Author]

Posts