I am trying to mimic Excel's copy/paste within Tabulator. Simply put, I want to copy (ctrl+c) a couple of cell values and then paste them somewhere else in the table.
My idea is to:
copy a couple of cells
click on the cell where I want to start pasting from.
Store that cell's object somewhere so I can reference it when I paste the data
Ctrl+v or right click paste
Using the clicked cell I have stored as well as clipboardPasteParser callback, I would like to build a rowData object to return from that callback (as described in the docs).
Using the clipboardPasteAction callback, I will take that rowData object and use it to update the cells.
However, as far as I understand, Tabulator's clipboard functionality does not facilitate this kind of copy/paste action. In the below code snippet you will see that I console.log out the result of paste in the clipboardPasteParser(clipboard) callback. clipboard is just a concatenated string of the copied values.
For example, copying "Mary May", "1", "female", "2", and "blue", results in the string "Mary May1female2blue" in the clipboard callback variable.
Here is the code if you would like to try it out.
var data = [
{
id: 1,
name: 'Mrs. Rafaela Barton',
progress: 50,
gender: 'male',
height: 4,
col: 'GhostWhite',
dob: '02/10/1986',
driver: false
},
{
id: 2,
name: 'Grant Kunze',
progress: 16,
gender: 'female',
height: 4,
col: 'DarkViolet',
dob: '05/07/1993',
driver: true
},
{
id: 3,
name: 'Marilou Morar',
progress: 30,
gender: 'female',
height: 2,
col: 'Turquoise',
dob: '14/10/1984',
driver: true
},
{
id: 4,
name: 'Nathan Fadel Jr.',
progress: 78,
gender: 'female',
height: 4,
col: 'SkyBlue',
dob: '01/11/1921',
driver: false
},
{
id: 5,
name: 'Mrs. Amya Eichmann',
progress: 44,
gender: 'female',
height: 3,
col: 'Aquamarine',
dob: '20/02/1937',
driver: false
}
];
var table = new Tabulator("#example-table", {
height:"311px",
data: data,
columns:[
{title:"Name", field:"name", width:150},
{title:"Height", field:"height", bottomCalc:"sum"},
{title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
{title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
],
clipboard:true,
clipboardPasteParser: function(clipboard) {
console.log(clipboard);
},
});
<!DOCTYPE HTML>
<html>
<head>
<link href="https://unpkg.com/tabulator-tables#4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>
Is there any way that I can get the callback parameter to somehow separate the values so I can parse it in the clipboardPasteParser callback? Is that possible? Am I perhaps missing something?
I have sneaking suspicion that this problem has less to do with Tabulator and more about how the browser handles copy. It would still be a nice feature if Tabulator was able to handle this natively.
Thank you!!
This is currently not possible, but cell selection will be coming in the 5.0 release in a couple of months
Related
to make things clear... I want to explain the basis first.
I have a PRODUCT.
a PRODUCT has different VARIANTS (id, code, price).
VARIANTS have ATTRIBUTES (id, type[select, radio], name).
ATTRIBUTES have VALUES (id, label).
I have a REACT APP to handle variant selecting in product detail (where u add the product into the cart).
It's functioning is this:
All attributes are printed by ID and their selecting html input type is made according to their type (I've specified above).
So... WHAT I WANT TO ACCOMPLISH is THIS.
EXAMPLE:
I have 2 attributes: COLOR, SIZE.
COLOR has 2 values: WHITE, BLACK.
SIZE HAS 3 VALUES: M, L, S.
Product "A" has 2 variants:
#1 VARIANT - COLOR: WHITE; SIZE: M
#2 VARIANT - COLOR: BLACK; SIZE: L,
in a react APP.. I want to filter out ALL options that aren't available to select an existing variant. User CAN NOT select COLOR WHITE; SIZE L variant because it doesn't exist. So, I want to disable the option for him/her.
My REACT STATE structure is the following...
{
"attributes": [
{
"id": 1,
"type": "select",
"name": "size",
"values": [{id: 1, value: "M", selected: true}, {id: 2, value: "L", selected: false}, {id: 3, value: "S", selected: false}],
},
{
"id": 2,
"type": "radio",
"name": "color",
"values": [{id: 1, value: "WHITE", selected: false}, {id: 2, value: "BLACK", selected: false}],
}
],
"variants": [
{
id: 1,
values: [
{
attribute_id: 1,
id: 1
},
{
attribute_id: 2,
id: 1
}
]
},
{
id: 2,
values: [
{
attribute_id: 1,
id: 2
},
{
attribute_id: 2,
id: 2
}
]
}
]
}
so...when I select color WHITE and the size stays unselected... only the option "M" should be displayed. But when I select color BLACK... the size option should be "L" only.
but when NOTHING is selected => EVERYTHING should be visible.
This check should happen EVERYTIME any ATTRIBUTE VALUE Changes. (when I select a SIZE = FILTER OTHER ATTRIBUTES etc...) and it should work dynamically no matter how many attributes are available for a variant.
Any ideas on how to do this please?
THANKS FOR YOUR HELP :)
In the examples in the documentation, I'm told I can use
table.selectRow(1);
to select row with data.id = 1 in the table.
But what if I don't know what the table object is - how do I access the table object from the containing div?, i.e.
$('#divMyTabulatorDiv).someMethod().someOtherMethod().table
What are the methods/properties I need to use to access the table component for the Tabulator grid from the HTML element's id?
You can lookup a table using the findTable function on the Tabulator prototype, passing in either a query selector or DOM node for the table:
var table = Tabulator.prototype.findTable("#example-table")[0]; // find table object for table with id of example-table
The findTable function will return an array of matching tables. If no match is found it will return false
Full details can be found in the Tabulator Options Documentation
table is the object you create, its pure Javascript driven no Html selection needed
const tabledata1 = [{
id: 1,
name: "Oli ",
money: "0",
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: "0",
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine ",
money: "0",
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret ",
money: "0",
col: "yellow",
dob: "31/01/1999"
},
];
const col1 = [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150
},
{
title: "money",
field: "money",
align: "left",
formatter: "money"
},
{
title: "Favourite Color",
field: "col"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
},
];
const table = new Tabulator("#example-table", {
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: col1,
selectable: true,
});
$('#selectRow').click(function() {
table.selectRow(1);
});
<!DOCTYPE html>
<html lang="en">
<script src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="example-table"></div>
<button id="selectRow">Select Row 1</button>
</body>
</html>
You can use Tabulator.prototype.findTable(querySelector) (I don't know what version this was added in, but it exists in 4.5 and 4.6) to get an array of tablulators that match the querySelector.
querySelector is any valid string for document.querySelectorAll.
https://jsfiddle.net/s60qL1hw/2/
const myTable = new Tabulator("#example-table1");
const findTable = Tabulator.prototype.findTable("#example-table1");
alert('Tables are the same?\n' + (myTable === findTable[0])); // true
Once you have the table object in the variable, you can use it as the document shows.
As of v5, tabulator has a more direct way to get the table object using css selector.
If your tabulator div was like:
<div id="tabulator1"></div>
then you can get the tabulator obj into a variable by:
let table = Tabulator.findTable("#tabulator1")[0];
after this i'm able to fetch data, do changes etc:
let data = table.getData();
Ref: http://tabulator.info/docs/5.0/options#find-table
I have prepared a jsFiddle which simulates to load data into jqGrid from an echo page. This is the example:
jqGrid Paging Example (click to run)
$(function() {
var gridSampleData = [
{ id: 10, firstName: "Jane", lastName: "Doe1"},
{ id: 20, firstName: "Justin", lastName: "Time1" },
{ id: 30, firstName: "Jane", lastName: "Doe2"},
{ id: 40, firstName: "Justin", lastName: "Time2" },
{ id: 11, firstName: "Jane", lastName: "Doe3"},
{ id: 21, firstName: "Justin", lastName: "Time3" },
{ id: 31, firstName: "Jane", lastName: "Doe4"},
{ id: 41, firstName: "Justin", lastName: "Time4" }
];
var rowsPerPage = 4;
var numRows = gridSampleData.length;
var pagedData = {
page:1, total:numRows/rowsPerPage, records: numRows, rows: gridSampleData
}
// simulate AJAX request: use echoUrl instead of real web service
var jsonData = JSON.stringify(pagedData);
var echoUrl = '/echo/js/?js=' + jsonData;
$("#Grid4").jqGrid({ scroll: false, gridview: true,
pager: '#pagerGrid4', rowNum: rowsPerPage, viewrecords: true,
height: 90, width: 400,
colNames: ['First name', 'Last name'],
colModel: [{name: "firstName"}, {name: "lastName"}],
datatype: "json",
jsonReader: {
page: "page",
total: "total",
records: "records",
root: "rows",
repeatitems: false
},
mtype: 'POST',
url: echoUrl
});
});
HTML:
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>
<table id="Grid4"></table>
<table id="pagerGrid4"></table>
Everything looks fine, until you click on the navigation buttons - it will not show you the 2nd page. Why is this? If you load data statically, as grid #4 in this example, it works fine.
Note: I had to use jsFiddle, because StackOverflow currently does not support an echo page in the snippet editor.
It is because in your example you are returning all rows of data but always sending page: 1. Each request the grid makes it's told that it is getting data for page 1 it never gets data for page 2. To make your example work you can set the property loadonce to true as I have done in a fork of your original code.
Example Fiddle
Or you could rework your code to send the first 4 rows and page: 1 and when the request comes for page 2 send the last 4 rows and page: 2
If you want really simulate loading the data from the server without loadonce: true then I'd recommend you to use serializeGridData, which send json parameter (see the documentation of Echo service) with the corresponding page of data. One can use slice on the array of source data.
serializeGridData: function (request) {
var start = (request.page - 1) * request.rows;
return {
json: JSON.stringify({
page: request.page,
total: gridSampleData.length/request.rows,
records: gridSampleData.length,
rows: gridSampleData.slice(start, start + request.rows)
})
}
}
See the corresponding modified demo https://jsfiddle.net/OlegKi/bny6h1nz/2/. One should remark, that the server should typically return sorted data based on sidx and sord parameters (request.sidx and request.sord). One can implement the feature too using sort method of array, which has callback function, but I suppose, you don't want to implement full simulation of server behavior required for jqGrid in JSFiddle.
I have this following code for ui-grid column Definition:
{ name: "carrier_influence_group", displayName: "Carrier influence group", enableCellEdit: true, showSortMenu: false,
editableCellTemplate: 'ui-grid/dropdownEditor', editDropDownOptionsArray: [ { id: 11, value: 'Medium' }, { id: 12, value: 'Large' }],
editDropdownIdLabel: 'id',editDropdownValueLabel: 'name'}
I am binding the name of these object to the column.
Every thing is fine normally. The grid as such renders correctly. But when I dbl click to edit this row, the text in this row disappears. A dropdown appears but it has no option to select from.
I tried changing my array to:
[ { id: 11, name: 'Medium' }, { id: 12, name: 'Large' }]
What is missing here. I have seen this official code. Seems like all is similar except for a filter. I do not need any such filter. Is it necessary to have one. The official docs do not mention anything about it.
Already referred http://stackoverflow.com/questions/28323540/showing-readable-data-in-ui-grid-with-editable-drop-down-cell
First thing to try - it should be editDropdownOptionsArray not editDropDownOptionsArray (note the case).
Handsontable really fits my needs when it comes to UI interaction. But was wondering if it can also pivot data.
I have Json data that looks like this:
var objectData = [
{id: 1, name: "Ted Right", gender: "male"},
{id: 2, name: "Bill Allan", gender: "male"},
{id: 1, name: "Joan Well", gender: "female"},
{id: 2, name: "Jane Doe", gender: "female"}
];
where id value should be the row name and the gender value should be the column header and the name is the value in the table.
I'm not sure it's possible natively within the framework, but it looks like you can dynamically pass an array containing the column definitions to the table instance while creating it, so you could potentially handle it that way in javascript - you might want to check out this example.
How to create dynamic columns for Handsontable?
Old thread I know, but it's the first one that comes up for handsontable pivot table, so hopefully this helps someone.
To set custom row/column headers, have a look here:
http://handsontable.com/demo/renderers_html.html#header
Portion from above page:
$container.handsontable({
colHeaders: [
"<b>Bold</b> and <em>Beautiful</em>",
"Some <input type='checkbox' class='checker'> checkbox"
]
})