jQuery UI Widgets Forums Grid How to add a delete row button outside of a newly created row?

This topic contains 7 replies, has 2 voices, and was last updated by  svetoslav_borislavov 10 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • millhorn
    Participant

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


    millhorn
    Participant

    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 Borislavov

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


    millhorn
    Participant

    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 Borislavov

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


    millhorn
    Participant

    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 Borislavov

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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.