I'm working with the Handsontable nested rows.
I’m trying to set a new dataset for the table with the nestedRows=true but the data remains the same.
import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';
import "./styles.css";
let data = [
{a:'', b:'Tesla', c:'Volvo', d:'Toyota', e:'Ford'},
];
const container = document.getElementById('example');
const btn = document.getElementById('btn');
btn.addEventListener("click", doTest);
const hot = new Handsontable(container, {
data: data,
width: '100%',
height: '100%',
rowHeaders: true,
colHeaders: true,
nestedRows: true,
licenseKey: 'non-commercial-and-evaluation'
});
function doTest(){
hot.updateData([
{a:'1', b:'2', c:'3', d:'4', e:'5'},
]);
}
Please check the example
here
click on “Test” button to update the dataset. For nestedRows=false - works fine, for nestedRows=true - does nothing.
Please help me to understand what is wrong here.
Related
I would like to use the Tabulator JavaScript library as part of an observablehq notebook, but for some reason I can't make it work. Below is an example. Works fine in browser, but I could not make it work in observablehq. Here is my naive attempt at observablehq. I also tried to load the css and JavaScript urls using require, but to no avail.
<html>
<script src="https://unpkg.com/tabulator-tables#5.3.0/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#5.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
<div id="table"></div>`
<script>
var tableData = [
{name:"Bob"},
{name:"Steve"},
{name:"Jim"},
]
//Example Table
var table = new Tabulator("#table", {
data:tableData, //load data into table
height:200, //enable the virtual DOM
columns:[
{title:"Name", field:"name", width:200, editor:"input"},
]
});
</script>
</html>
Here's an example https://observablehq.com/#fil/hello-tabulator
you can use, in different cells:
Tabulator = require("tabulator-tables#5")
to load the library
#import url("https://unpkg.com/tabulator-tables#5/dist/css/tabulator.min.css")
to load the css
And, finally:
viewof t = {
const data = penguins;
const table = new Tabulator(document.createElement("DIV"), {
data,
height: 400,
layout: "fitColumns",
autoColumns: true,
autoColumnsDefinitions: (columns) =>
columns.map((d) => ({ ...d, editor: true })),
editor: true,
pagination: "local"
});
table.element.value = data;
table.on("dataChanged", (data) => {
table.element.value = data;
table.element.dispatchEvent(new CustomEvent("input"));
});
return table.element;
}
Multiple Webdatarocks pivots gives exception
"is not a constructor at displaygrids"
script is included properly but no resolution.. There is also & issue on how to differentiate export of data for both grids separately when on the same page.
Following is the code :
'''
function displaygrids(parsed_data,parsed_data_2) {
var pivot = new webdatarocks({
container: "#d1-component",
//toolbar: true,
// beforetoolbarcreated: customizeToolbar,
//height: 295,
report: {
dataSource: {
data: parsed_data,
}
}
});
var p1= new webdatarocks({
container: "#d2-component",
//toolbar: true,
// beforetoolbarcreated: customizeToolbar,
//height: 295,
report: {
dataSource: {
data: parsed_data_2,
}
}
});
}
'''
here is a reference to the WebDataRocks thread with a similar question - https://www.webdatarocks.com/question/how-to-put-pivottable-in-bootstrap-grid/ .
They placed 2 WebDataRocks in a row with a help of Bootstrap.
I want to achieve：
One user creates handsontable using client browser: to insert or delete some columns, edit column headers, fix some rows or columns by context menu for other users to fill. So I need to save handsontable structure to server.
The following code initialize a 3*3 handsontable with contextMenu: true
var
$$ = function(id) {
return document.getElementById(id);
},
container = $$("example"),
hot;
Handsontable.dom.addEvent(createtable, "click", function() {
hot = new Handsontable(container, {
rowHeaders: true,
colHeaders: true,
dropdownMenu: true,
startRows: 3,
startCols: 3,
contextMenu: true,
licenseKey: 'non-commercial-and-evaluation',
})
})
Then I set column A readonly by context menu.
Using following code get columns option. I expect the result is [{readonly: true},{},{}], but it is undefined
Handsontable.dom.addEvent(gettablesetting, "click", function() {
console.log(hot.getSettings().columns)
})
how to dump all options of handsontable instance and save to server for other users to fill.
jsfiddle code
In my dojo.xhrGet I have specified this load::
load: function (data) {
// reset data display containers
dojo.addClass("search_results", "hide_on_load");
dojo.byId("search_results_found").innerHTML = "";
// populate table with new results.
dojo.byId("search_results_found").innerHTML = "" + data.length + " search result(s) found.";
// when data is from an XHR request, you must transform it into a store.
// See: http://stackoverflow.com/questions/2423459/datagrid-in-dojo-with-json-data-from-a-servlet
var items = dojo.map(data, function (res_row) {
return {
'Id': res_row.Id,
'Name': res_row.Name,
'VisitType': res_row.VisitType,
'VisitDate': res_row.VisitDate
};
});
var store = new dojo.data.ItemFileReadStore({
data: {
items: items
}
});
var res_layout = [
{field: 'Id', name: 'ID', width: '10%'},
{field: 'Name', name: 'Site Name', width: '50%'},
{field: 'VisitType', name: 'Visit Type', width: '20%'},
{field: 'VisitDate', name: 'Visit Date', width: '20%'}
];
// create a new grid:
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10
}, document.createElement('div'));
// append the new grid to the div "search_results_table":
dojo.byId("search_results_table").appendChild(res_grid.domNode);
// Call startup, in order to render the grid:
res_grid.startup();
dojo.removeClass("search_results", "hide_on_load");
standby.hide();
},
And, the html is:
<!-- Search Results Table -->
<div id="search_results" class="hide_on_load">
<div id="search_results_found"></div>
<div id="search_results_table"></div>
</div>
At the end of this script, the grid does not show.
I removed the hide_on_load css class selector so that I could exclude it as being the issue. But, that did not help.
Looking at the console, there are no errors logged.
Also, writing the various objects (res_grid, store, etc.) all produce output that looks to be correct.
Can somebody provide some help on how to get it to show?
Thanks!
Update:
When I inspect the DOM after this code has run, I see the tabler created with the headers but then when I go to find the actual table with the search results (under div class=dojoxGridContent), it isn't there.
Update 2:
I have the styles specified too:
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table { margin: 0; }
</style>
Make sure you set a size through the style property on the div where you place your grid, and don't forget to import the CSS files for your grid, like :
<style type="text/css">
#import "dojoroot/dojox/grid/resources/Grid.css";
#import "dojoroot/dojox/grid/resources/soriaGrid.css";
.dojoxGrid table {
margin: 0;
}
</style>
Note : Replace soria by whatever theme you are using...
... and don't forget to set a size to your grid's dom node :
<div id="gridnode" style="width:100%; height:500px;"></div>
If you don't want a fix height you can declare the grid withautoHeight: true.
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10,
autoHeight: true
}, document.createElement('div'));
With This attribute you don't need to add style to the parent container for it to display.
The below code uses Ext.data.Store to retrieve a JSON with table metadata (for the column headings) and the table's data. The backend PHP script is working correctly and the Ext.data.Store contains valid records for the data - I just can't get them to go "into" the Grid itself.
The API Documentation makes it seem as if I just define a store property for Ext.grid.GridPanel and it will handle the rest.
Note: The code below is a separate from the rest of the application. We have pulled this portion out to see if we can just get a grid working, without the influence of the rest of the application.
Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';
Ext.onReady(function() {
var columns = [];
var fields = [];
var tabPanel = new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: 0,
height: 700
});
var queryHeaders = Ext.data.Record.create([
{name: 'id'},
{name: 'table'},
{name: 'field'},
{name: 'title'}
]);
var applicationStore = new Ext.data.Store({
autoLoad: true,
reader: new Ext.data.JsonReader({root: 'fields'}, queryHeaders),
url: 'http://localhost/aargh/index.php/applications/hardware',
listeners: {
'load': function() {
console.info(applicationStore);
applicationStore.each(function(r) {
this_column = [];
this_column['header'] = r.data['title'];
this_column['dataIndex'] = r.data['id'];
columns.push(this_column);
this_column = []
this_column['name'] = r.data['id'];
fields.push(this_column);
});
console.info(fields);
var queryFields = Ext.data.Record.create([fields]);
var queryStore = new Ext.data.Store({
autoLoad: true,
reader: new Ext.data.JsonReader({root: 'fields'}, queryFields),
url: 'http://localhost/aargh/index.php/query/execute/applications/hardware',
listeners: {
'load': function() {
console.info(queryStore);
tabPanel.add(new Ext.grid.GridPanel({
title: 'Hardware',
store: queryStore,
columns: columns,
autoHeight: true,
frame: true
}));
tabPanel.doLayout();
}
}
});
}
}
});
});
As I review the applicationStore and queryStore objects in Firebug I can see the expected data results perfectly in applicationStore.data.items.#.json and queryStore.data.items.#.json (of course, replacing # with the record number).
Any ideas?
Wow - this has been giving us trouble for three days. Turns out I was making an array within an array at var queryFields = Ext.data.Record.create([fields]);
Changing that to: var queryFields = Ext.data.Record.create(fields); fixed the issue.