Does anyone know how to make the nested headers plugin for Handsontable collapse a specific set of columns by default (i.e. when the table initially loads up)?
Specifically I have the following appearing:
And I would like the following to appear:
Here is my current code:
var hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(8, 8)
, rowHeaders: true
, colHeaders: true
, columnSorting: true
, hiddenColumns: true
, afterRender: function () {
console.log("render");
}
, nestedHeaders: [
['Key', {label: 'Design Data', colspan: 7}]
, ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
]
, collapsibleColumns: [
{row: -2, col: 1, collapsible: true}
]
});
I have created a fiddle showing this below.
https://jsfiddle.net/JoshAdams/4bcgdfxL/
var plugincollaps = hot.getPlugin'collapsibleColumns');
plugincollaps.collapseAll();
Related
I am creating a presentation using pptgenjs however i can't seems to create a table border as i wants it to be.
here is the data that i'm trying to use:
let rows = [
["data1","data2"],
["data3","data4"],
["data5","data6"],
]
here is what i tried so far:
let arrBorder = [null,null,{color:'DA70D6'},null]
slide.addTable(rows,{rowH:1,border:arrborder})
in the method i tried, to make a null on the top, left and right of the table, while the bottom are having a line which resulted in this:
However what i wanted the following:
Any advice on how to make it works?
Based on their table documentation, I believe it goes together like this:
const col2cellstyle = {border: [null, null, {color:'DA70D6'}, null]};
const table = rows.map(row => row.map((value, col) => ({
text: value,
options: col == 1 ? col2cellstyle : null;
})));
slide.addTable(table, {rowH: 1});
The resulting data structure that's fed into .addTable would look like:
[
[
{text: "data1", options: null},
{text: "data2", options: {border: [null, null, {color:'DA70D6'}, null]}},
],
[
{text: "data3", options: null},
{text: "data4", options: {border: [null, null, {color:'DA70D6'}, null]}},
],
[
{text: "data5", options: null},
{text: "data6", options: {border: [null, null, {color:'DA70D6'}, null]}},
],
]
I have a bootstrapTable that is utilizing the x-editable plugin for dropdowns.
There is a method per the documentation to prepend values to a dropdown with a value of '' and text of Not Defined. This works just fine, except when another option in my dropdown has a value of 0. If that is the case, that value shows as the prepended value of Not Defined, when it should show as False.
My Code:
var data = [{"Bool": 1},{"Bool": 0}];
$('#table').bootstrapTable({
columns: [
{
field: 'Bool',
title: 'Bool',
editable: {
type: 'select',
'prepend': 'Not defined',
'source': [{'value': 1,
'text': 'True'},
{'value': 0,
'text': 'False'}]
}
}
],
data: data
});
http://jsfiddle.net/t6pg9yg9/2/
I am trying on this demo in jsbin to have some events with scheduler and restrict to move some of them to specific resources.
$('#calendar').fullCalendar({
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,agendaDay'
},
defaultView: 'agendaDay',
defaultDate: '2017-05-09',
navLinks: true, // can click day/week names to navigate views
editable: true,
nowIndicator: true,
allDaySlot: false,
fixedWeekCount: false,
eventLimit: true, // allow "more" link when too many events
slotLabelFormat: "HH:mm",
slotLabelInterval: "00:60:00",
events: [
{
title: 'Long Event',
start: '2017-05-09T16:00:00',
end: '2017-05-09T17:00:00',
resourceId: 'b',
constraint: {
resourceIds: ['c', 'd']
}
},
{
id: 999,
title: 'Test Event',
start: '2017-05-09T16:00:00',
end: '2017-05-09T18:00:00',
resourceId: 'a',
constraint: {
resourceIds: ['b', 'c', 'd']
}
}
],
resources: [
{id: 'a', title: 'Auditorium A'},
{id: 'b', title: 'Auditorium B'},
{id: 'c', title: 'Auditorium C'},
{id: 'd', title: 'Auditorium D'}
]
})
Now If you follow the instructions here you will notice that inside the resourcesIds you specify the ids that you want the event NOT to go. But in the jsbin you can see that the reverse is happening.
Also if you switch on the month or week view you cannot drag and drop from one day to the other. Is restricting you due to the eventConstraint.
I am doing something wrong or is this something faulty?
Got around the problem with this solution for the moment but i think that the above is a bug. You can try my solution here.
What i did is to pass the constraints in a custom field on the event and to check on the drop if its correct.
Now If you follow the instructions here you will notice that inside
the resourcesIds you specify the ids that you want the event NOT to
go.
No, the article says precisely the opposite of that:
Additional properties can be applied to force an event to stay within
specific resources
(I added the bold.)
This means you give a list of the resources that the event can be dragged to. It cannot therefore be dragged to any resources not named within the constraint property.
As per the example given in the link you posted:
constraint: {
resourceIds: [ 'a', 'b', 'c' ] // constrain dragging to these
}
The event with this property will only be allowed to be dragged onto resources 'a', 'b', and 'c'.
I think you have mis-understood the documentation.
I have a dojo(v1.6) data grid which have checkbox to select rows as left most column. I need to have header column of these checkbox as delete button instead of Select All checkbox. On clicking the delete button all selected rows gets deleted.
Please find the Data grid Demo.
I don’t know how to bring the header column of checkbox as button. Please help me to customize the widget.
Here is grid js code
dojo.ready(function(){
/*set up data store*/
var data = {
identifier: 'id',
items: []
};
var data_list = [
{ col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
{ col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
{ col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
];
var rows = 10;
for(var i=0, l=data_list.length; i<rows; i++){
data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
}
var store = new dojo.data.ItemFileWriteStore({data: data});
/*set up layout*/
var layout = [
{ type: "dojox.grid._CheckBoxSelector" },
[
{'name': 'Column 1', 'field': 'id', 'width': '20%'},
{'name': 'Column 2', 'field': 'col2', 'width': '20%'},
{'name': 'Column 3', 'field': 'col3', 'width': '25%'},
{'name': 'Column 4', 'field': 'col4', 'width': '20%'}
]
];
/*create a new grid:*/
var grid = new dojox.grid.DataGrid({
id: 'grid',
store: store,
structure: layout,
cellOverClass: 'cellover'
},
document.createElement('div')
);
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
grid.startup();
});
HTML
<div id="gridDiv"></div>
You can implement your own CheckBoxSelector from the existing one. I discovered the methods by looking at the _Selector.js source. The interesting methods to override were generateHtml and doclick.
See updated fiddle.
dojo.declare('my.grid._CheckBoxSelector', [dojox.grid._CheckBoxSelector], {
_headerBuilderClass: dojo.extend(function (view) {
dojox.grid._HeaderBuilder.call(this, view);
}, dojox.grid._HeaderBuilder.prototype, {
generateHtml: function () {
var w = this.view.contentWidth || 0;
return '<table style="width:' + w + 'px;" ' +
'border="0" cellspacing="0" cellpadding="0" ' +
'role="presentation"><tr><th style="text-align: center;">' +
'<button data-dojo-type="dijit.form.Button" type="button">x</button><div class="dojoxGridCheckSelector dijitReset dijitInline dijitCheckBox" style="display:none"></div></th></tr></table>';
},
doclick: function (e) {
this.view.grid.removeSelectedRows();
return true;
}
})
});
And
/*set up layout*/
var layout = [{
type: "my.grid._CheckBoxSelector"
},
...
}]];
To delete the rows
this.view.grid.removeSelectedRows();
You can parse the grid after startup to create the dijit widgets.
grid.startup();
// Not the best practice here but it should give you a starting point
// on where to find the header node.
dojo.parser.parse(grid.views.views[0].headerContentNode);
Given data in the form:
var grid_data = [ {Hello: 'World'}, {Jesus:'Navas'} ]
I wish to draw a grid like so:
The grid shows with 2 rows but with no data, I can't find the problem in the following code:
var grid_store = Ext.create('Ext.data.Store', {
fields: [
{name: 'Property'},
{name: 'Value'}
],
data: grid_data
});
// create the Grid
var grid_view = Ext.create('Ext.grid.Panel', {
store: grid_store,
renderTo: 'info_panel',
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Property',
width : 100,
sortable : true,
dataIndex: 'Property'
},
{
text : 'Value',
width : 80,
sortable : false,
dataIndex: 'Value'
}
],
height: 350,
width: 600,
title: 'Array Grid',
viewConfig: {
stripeRows: true
}
});
Renders to:
<div id="info_panel"></div>
If you're wondering how I got the example image, I changed the store to an ArrayStore and re-formatted the data into arrays, but I'd prefer to miss out that step and insert the data as-is.
edit:
I think what I'm really asking for is a way to alert extjs to use the JSON keys as values, as opposed to most of the grid examples out there that take the form:
{value: 'Hello'}, {property: 'World'}
As one of the commenters and your edit suggested, your grid is built to consume a json with 'Property' and 'Value' being the keys for the json objects. I don't know if it's possible for you to change the source of the data to send in the reformatted json, but if not, you can always just run a quick loop to do so after receiving the data:
var new_data = [];
Ext.each(grid_data, function(obj) {
for (var prop in obj) {
new_data.push({
Property: prop,
Value: obj[prop]
});
}
}, this);