jqxGrid add new rows during clipboard operation

[frostyParticipant]

In my POC, I used clipboard property to true to enable copy paste to a grid. If the rows in clipboard buffer exceed the number of rows from my current position, I’d like to add rows and copy the clipboard value. How can I do that?

[MartinParticipant]

Hello frosty,

Could you, please, clarify what would you like to achieve, as I am not sure that I fully understand it?
What do you mean by ‘clipboard buffer exceed the number of rows from my current position’?
Thank you!

Best Regards,
Martin

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

[frostyParticipant]

Thanks for looking at this. I have a jqxGrid with 5 rows and 4 columns. My clipboard has 4 rows and 4 columns. If my focus is on the last row and first column of jqxGrid, I’d like jqxGrid to add 3 additional rows to copy the entire clipboard content. HTH.

Thanks.

[MartinParticipant]

Hello frosty,

Thank you for the clarification. You could bind to the paste event of the document to get the pasted data
and add the needed rows to the grid. Please, look at the following example:

<template>
  <JqxGrid ref="myGrid"
    :theme="'material'"
    :width="getWidth"
    :source="dataAdapter"
    :columns="columns"
    :columnsresize="true"
    :selectionmode="'multiplecellsadvanced'"
    :autoheight="true"
  ></JqxGrid>
</template>

<script>
import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";

export default {
  components: {
    JqxGrid
  },
  data: function() {
    return {
      getWidth: 500,
      dataAdapter: new jqx.dataAdapter(this.source),
      columns: [
        { text: "Name", datafield: "firstname", width: 120 },
        { text: "Last Name", datafield: "lastname", width: 120 },
        { text: "Product", datafield: "productname", width: 180 },
        {
          text: "Quantity",
          datafield: "quantity",
          width: 80,
          cellsalign: "right"
        }
      ]
    };
  },
  beforeCreate: function() {
    
    this.generatedata = (rowscount, hasNullValues) => {
    // prepare the data
    var data = new Array();
    if (rowscount == undefined) rowscount = 100;
    var firstNames =["Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
    var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
    var productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
    var priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" ];

    for (var i = 0; i < rowscount; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);

        row["id"] = i;
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["productname"] = productNames[productindex];
        row["quantity"] = quantity;       
        data[i] = row;
    }
    return data;
    }

    this.source = {
      localdata: this.generatedata(5),
      datatype: "array",
      datafields: [
        { name: "firstname", type: "string" },
        { name: "lastname", type: "string" },
        { name: "productname", type: "string" },
        { name: "quantity", type: "number" }
      ]
    };
  },
  mounted: function() {
    const myGrid = this.$refs.myGrid;

    document.addEventListener("paste", function(e) {
      setTimeout(() => {
        const value = e.srcElement.value;
        const copiedRows = value.split("\n");

        const rowsCount = myGrid.getrows().length;
        const topSelectedRow = myGrid.getselectedcells()[0].rowindex;

        for (let i = rowsCount - topSelectedRow; i < copiedRows.length; i++) {
          const cells = copiedRows[i].match(/\S+/g);

          const newRow = {
            firstname: cells[0],
            lastname: cells[0],
            productname: cells[0],
            quantity: cells[0]
          };

          myGrid.addrow(null, newRow);
        }
      });
    });
  }
};
</script>

Best Regards,
Martin

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

[frostyParticipant]

Thank you. This will work for me.

[Author]

Posts