jQuery UI Widgets › Forums › Grid › How to add a delete row button outside of a newly created row?
Tagged: delete button, editable row
This topic contains 7 replies, has 2 voices, and was last updated by svetoslav_borislavov 10 months, 3 weeks ago.
-
Author
-
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 }); } });
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.htmAnother option is to manually add a button somewhere in the HTML upon clicking add new row
Best regards,
Svetoslav BorislavovjQWidgets Team
https://www.jqwidgets.com/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.
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 BorislavovjQWidgets Team
https://www.jqwidgets.com/That’s exactly what I was thinking. Thank you for the assistance.
Hi,
Here is an example of this: https://codepen.io/svetoslavb04/pen/wvXgmVG
Best regards,
Svetoslav BorislavovjQWidgets Team
https://www.jqwidgets.com/When I start scrolling your pen, the table grows by width and height. Any idea what’s causing that?
Hi,
Could you, please look at this demo: https://codepen.io/svetoslavb04/pen/wvXgmVG
Best regards,
Svetoslav BorislavovjQWidgets Team
https://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.