I'm using Handsontable with objects as the data backing. The data looks something like this:
[
{ productId: 1, productName: "Shirt", productType: "Clothing" }
{ productId: 2, productName: "Pants", productType: "Clothing" }
]
The Handsontable columns configuration looks like this:
columns: [
{ data: "productName" },
{ data: "productType" }
]
So the productId field is not included in the table, or in other words, the productId column is hidden.
When the user highlights a row in the table and presses Ctrl+C, then Ctrl+V in another row, only productName and productType are transferred to the new row. productId is not copied, but I want it to be. How can I make Handsontable copy the hidden data in addition to the visible data?
I have looked into including the productId field in the table, but hiding it with css. This used to be the only way to have hidden data in Handsontable, as you can see in this thread. But none of those solutions seem to work very well. I have also considered modifying what gets copied using a beforeCellCopy event, as in this thread. But that is a very hacky and ugly way to solve this problem. Any other ideas?
So you want to copy paste it outside of Handsontable, I presume. That means you want to add content to your clipboard beyond what a CTRL+C event would normally do. This means you have to get nasty regardless so a beforeCellCopy event sounds like a perfect idea.
The only other thing you could do is to capture the key strokes event yourself, stop propagation, and use the clipboard plugin to send it whatever data you want. This one may be cleaner but it involves working with the clipboard plugin.
Related
I have a w2ui popup form with a field definition is like this:
{ field: 'step', type: 'html', html: { label: '', column: 'before', span: 0, html: "xx" } },
On runtime I want to change the content of that field. It is not (directly) based on a record, I would say it is an arbitrary html div. For the sake of simplicity let's say let replace the value "xx" with "coucou"
in the onOpen event ot the popup I'v tried the followings:
w2ui.DocForm.set('step', {html: {html: "coucou"}});
It didn't work, so I tried this:
w2ui.DocForm.fields[0].html.html = "coucou"
with and without w2ui.DocForm.refresh(); after that
The content didn't change. Any idea?
Finally I've found a solution.
Once I've modified the html field like this: w2ui.DocForm.fields[0].html.html = "coucou", instead of calling refresh(), I had to call
w2ui.DocForm.formHTML = w2ui.DocForm.generateHTML();
That was the trick.
I do not understand why it working this way, while for all the other record based fields on the other way, but at least it's working now.
I'm currently working on a sidebar component. This sidebar contains multiple cards, like one with input and a list, one with input and buttons and one with only buttons. Now it should be as modifiable as possible. I thought of passing arrays with the needed types and labels in a card to the sidebar component.
So for a view like in the first card:
It could be like this:
const data=[
{
label:"Systems",
type: "heading"
},
{
label:"",
type: "input",
onChange: "search"
},
{
label: "",
type: "ul",
elements: [
"Item#1",
"Item#2",
"Item#3",
"Item#4",
]
}
]
<Sidebar card={data} />
I don't know if it's better style to do it like this and have a hard time processing all possibilites or better just focus on these hardcoded layouts and let them fill with data (i did this with ~6 types of other card-elements before).
Or is there a completely other way to create customizable elements like this?
We are using Tablulator v4.6.3 for creating an interface in one page with the table and having one field is to make a selection by the user from the list of values like below.
editor: "select", editorParams: { values: ["Start", "Draft", "Save", "Submit", "Close"] }
In another page, we are displaying these saved data to allow modifications for these earlier selected values, how do we make these selected values are selected automatically in the column and allowed for further selection (to modify existing selection).
As a test , we are setting this values statically using below
rowFormatter: function (row) { row.getCell("status").setValue('Draft'); },
but if fails some way and shows errors in browser with this test code.
Can anyone please help us on this.
Thank you.
I created those two columns.
var columns = [
{id: "Fclass", name: "Class", field: "Fclass", minWidth:100,width:150, options:["10000","Dallas","10002","10003","10004","10005","10006","10007","10008","10009","10010"], editor: Slick.Editors.Auto},
{id: "subclass", name: "Subclass", field: "subclass", minWidth:100,width:150, dependency:"Fclass", editor: Slick.Editors.Auto}
];
The column with field named "subclass" depends on the column with field "Fclass". So what happens is, in onBeforeEditCell function, the cell in "subclass" is populated according to the value selected in the cell in "Fclass" column. So far everything goes fine.
However, I'm trying to figure if cell in "Fclass" is cleared after edit, how to clear the cell in "subclass" as well. That's why I'm looking for a function like "onAfterEditCell" but I believe there is no such function in SlickGrid API.
Note: I don't want to touch "applyValue" function in Slick.Editors.js file because of maintaining consistency. However, if you say there is no way around other than editing applyValue function, please provide some information.
Any suggestions would be gratefully appreciated.
Thank you
You can use the onBeforeCellEditorDestroy event callback to catch this. This event is triggered when the cell you are editing loses focus. This actually destroys the editor associated with the cell.
I am trying to create a custom container but can't figure just how to do it.
I need it to look like this:
(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.
Questions:
1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?
basically any advice will be good as I need a start point.
thanks
There are lots of ways of doing this, but this is what I would do.
I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.myform',
layout:{
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
//overridden setTitle
setTitle:function(title){
Ext.getCmp(this.id + "_search_combo").setText(title)
},
defaults:{
xtype:"combo",
//rest of combo config here
},
items:[{
//...
}],
initComponent:function(config){
this.tbar = tbar:[{
xtype:"combo",
//...
id:this.id + "_search_combo"
},{
xtype:"tbfill"
},{
xtype:"tbText",
cls:"my_form_title",
value:this.title||""
}]
//prevent default title behavior
delete this.title
this.callParent(arguments);
}
})
I would suggest you to just extend from Ext.panel.Panel itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff from Ext.panel.Panel, you can also extend it from Ext.Component, or Ext.container.Container (to contains more components), and even the lowest Ext.util.Observable.
It seems like you might need to extend a few Ext.menu.Menu and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend from Ext.Component and build your own customized component, or even lower, Ext.util.Observable.
The setter? It will be in the extended component in (1) then :)
All of these serve as rough opinions. They could be different depends on your requirement.