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?
$(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,
editable: 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
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqx-all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.base.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.energyblue.min.css" rel="stylesheet"/>
<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>
Hope I'm still in time to lend you a hand.
You can use the 'cellbeginedit' property of 'columns' as shown by the editableNewRow() function and adding a new field lock to control the editability (you can use whatever condition as long as it suit for your edit locking purpose, here I demonstrate using lock field).
In jqxGrid API Reference, try search for 'columns' and have a look into cellbeginedit property.
Hope it helps !