Currently I am using handsontably 6.2.2 and I am trying to load a data set I get from a database but it will not render if I have an included table in the query that may or may not be there. I have tried to use custom rendering but it errors out before those are called and the only function that will log anything before erroring out is the beforeGetCellMeta but I cannot successfully change the value in this function. I may be doing that part wrong.
Here is my obj I am passing into Handsontable
data: [
{id: 1, name: "Test Name", includedTable: null},
{id: 2, name: Test Name 2", includedTable: {
id: 1,
name: "IncludedTableRowName"
}},
];
Below is the handsontable I am calling.
hot1 = new Handsontable(container, {
data: data,
colHeaders: ['id', 'Name', 'Table Row Name'],
columns: [
{data: 'id'},
{data: 'name'},
{data: 'includedTable.name'}
]
});
All I get is TypeError: Cannot read property 'name' of null on the includedTable.name. I get that it is undefined in the first but shouldnt it just render null in that case? If not I need help getting this to work with a customer render function or something else because I have tried custom renders, custom types, all the function within handsontable before to get the values to work and nothing has let me do this.
Related
I am trying to search and filter data in datatable based on two columns.
Below is the code that I am using for search and redrawing the datatable.
(http://live.datatables.net/hapijuri/1/edit)
$(document).ready( function () {
var table = $('#example').DataTable({
"columns": [
{ title: 'title0', name: 'name0'},
{ title: 'title1', name: 'name1'},
{ title: 'title2', name: 'name2'},
{ title: 'title3', name: 'name3'},
{ title: 'title4', name: 'name4'},
{ title: 'title5', name: 'name5'},
]
});
table.column(1).search('Software Engineer')
.column(0).search('Bradley Greer').draw();
} );
The problem with this code is that it works on the column number (or index) and not on column name, however I have the column names on which I want to search.
Is there any way to search based on column name instead of index in datatables jquery?
Edit: Providing additional details to make sure I am able to present the question well.
So I have a datatable shown on UI and I am building a pivot table (using pivottable.js) in another tab using the datatable data.
On clicking the numbers in the pivot, I want the datatable data on the UI to be filtered so that it shows only those rows which are relevant to the number being clicked in pivot.
I am getting the column name and value corresponding to that number from pivot. I just need to search those column values in the datatable and show the filter the datatable accordingly.
As pointed in the example link that I shared, I am able to search through the data based on column index and the same is getting reflected on the UI.
What I am looking for is searching based on column name instead of column value.
For preventing a column being searched from table you have to add searchable:false. by default value of searchable & orderable is true.
var table = $('#example').DataTable({
"columns": [
{ title: 'title0', name: 'name0', "searchable": true},
{ title: 'title1', name: 'name1'},
{ title: 'title2', name: 'name2'},
{ title: 'title3', name: 'name3'},
{ title: 'title4', name: 'name4'},
{ title: 'title5', name: 'name5'},
]
});
no need to add below code unless you have server side data processing.
table.column(1).search('Software Engineer')
.column(0).search('Bradley Greer').draw();
Search a datatable using the column name
var table = $('#datatable-name').DataTable();
table.column('columnname:name').search("keyword").draw();
I am trying to implement the "RowSelectors" feature on the iggrid, but it will not change to a the next row.
On further inspection, i have got the selected row method and each row shows the same id. I am returning my data via ajax, if i use static json in a variable and use that as a datasource, it works as expected so not sure what the issue is..
$("#selector").igGrid("selectedRow");
I can only acheive a row change when holding control and clicking..
Object {element: n.fn.init(1), index: 0, id: 3407751001}
then next row is
Object {element: n.fn.init(1), index: 1, id: 3407751001}
Settings..
features: [
{
name: "Sorting",
columnSettings: [
{
columnIndex: 4,
allowSorting: true,
firstSortDirection: "ascending",
currentSortDirection: "descending"
}
]
},
{
name: 'RowSelectors',
enableCheckBoxes: true,
checkBoxStateChanging: function (ui, args) {
return false;
},
multipleSelection: true,
rowSelectorClicked: function (evt, ui) {
// Handle event
},
},
{
name: 'Selection'
}
]
The issue is already resolved, but I'm adding the answer so it doesn't stay unanswered.
The primaryKey column the igGrid uses needs to be a column with unique identifiers for each record.
When I remove a comment on my HTML var {{selecionados}} selected from, and I click on the list of names is all fine, but when HTML retreat or comment on again no longer works.
<script async src="//jsfiddle.net/raphaelscunha/9cwztvzv/1/embed/"></script>
Vue.js will only update your view when a property within the data object is changed, not when a new property is added. (See Change Detection Caveats in the Vue.js guide)
If you want it to react when ativo is set to true, make sure the property exists beforehand.
Try something like this when you're initializing your Vue object:
atores: [
{ name: 'Chuck Norris', ativo: false},
{ name: 'Bruce Lee', ativo: false },
{ name: 'Jackie Chan', ativo: false },
{ name: 'Jet Li', ativo: false}
]
JSFiddle
I'm trying to use Google GeoChart library to display a map, and if I do it on a local HTML file or somewhere like JSFiddle, it works perfectly.
However, when I embed it in a JSP on my project and deploy it (using JBoss), calling chart.draw results in a JSON error:
Invalid JSON string: {":",":",":{":[",","]},":",":{":true}}
My complete Javascript method is as follows:
var data2 = google.visualization.arrayToDataTable([
[{label: 'Country', type: 'string'},
{label: 'description', type: 'string'},
{label: 'consistency', type: 'number'},
{type: 'string', role: 'tooltip'}],
['Canada', "CANADA", 2, "OK"],
['France', "FRANCE", 0, "KO"],
['USA', "USA", 1, "Other"]
]);
var options = {
displayMode: 'region',
backgroundColor: '#81d4fa',
colorAxis: {
colors: ['red', 'orange', 'green']
},
legend: 'none',
tooltip: {
showColorCode: true
}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data2, options);
So it's clearly picking up the "structure" of the JSON object (two simple objects, another object with an array inside, another simple object, another object with an array inside), but for some reason is not picking up the content, except for the 'true' value, so it looks like a problem with quotes...
In any case, I have tried simple and double quotes, removing the quotes from the identifiers, reducing the options object to a simple
var options = {
"legend": "none"
};
... but to no avail. Everything results in a Invalid JSON string error (in this last case, a Invalid JSON string: {":"} error, since there is only one object).
Last note: if I just use
var options = {};
it shows the map (but with the default options).
Any ideas as to why is this happening and/or how to solve it?
Thanks!
I'm looking for a best solution how to do this.
What I have:
// model
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
]
});
// store with data
var oStore = new Ext.data.Store({
model: "User",
data: [
{id: 1, name: {name:"John"}, description: "Fapfapfap"},
{id: 2, name: {name:"Danny"}, description: "Boobooboo"},
{id: 3, name: {name: "Tom"}, description: "Tralala"},
{id: 4, name: {name:"Jane"}, description: "Ololo"},
]
});
// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
columns: [
{dataIndex: "id", header:"ID"},
{
dataIndex: "name",
header: "Name",
renderer: function(value){return value.name;},
editor: "textfield"},
{dataIndex: "description", header: "Description", flex: 1, editor: "htmleditor"}
],
plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 2})],
store: store,
renderTo: document.body
});
When I doublecick on a cell I see [object] Object in editor's field, and when I enter valid value than I see empty cell in the grid.
So, the question is – how could I setup celleditor to get data not from record.name but from record.name.name?
You can override get and set methods on model, so the will support multi-level field names. Below is sample implementation.
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
],
get: function(key) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.callParent([ parts[0] ]);
return result[parts[1]];
}
return this.callParent(arguments);
},
set: function(key, value) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.get(parts[0]);
result[parts[1]] = value;
this.callParent([ parts[0], result ]);
return;
}
this.callParent(arguments);
}
});
I am not sure if store detects change made to name.name field. If no, you should also probably mark record as dirty.
Working sample: http://jsfiddle.net/lolo/dHhbR/2/
The editor accepts whatever value is provided in the "dataIndex" field of the column. Since "name" is an object, that's what you're getting. After entering a name in the editor, value is equal to a string (not an object) and your renderer is trying to get the name property of the string.
The easiest way to fix this is to make the "name" field of your store a string instead of an object. However, I'm assuming there's a reason you want to do it this way.
The CellEditing plugin has three events it can listen for: beforeedit, edit, and validateedit. You can implement a beforeedit listener to get the "name" object from the column, then get the "name" property of that object and fill the editor with that value. Then on validateedit, get the value from the editor and set the "name" property of the "name" object in the record with that value.
For quick reference, here's the event definition: CellEditing events
An easier way is to modify your User Model object to map the "name" property differently:
{name: "name", mapping:'name.name'}
then everything else stays the same.