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?
Related
I am trying to figure out how to load data dynamically in react.
I made a example where I am loading all the parents as div.cards. Each parent do have a checkbox. Whenever you press a checkbox, you should get the chosen parents children.
The problem I am facing right now:
Whenever I press a checkbox, I load all childrens to all parents. I just want to load the children to the chosen parent(clicked checkbox div).
Since I am loading the data dynamically, all checkboxes seems to get the same ID, any suggestions on how to fix this aswell?
Can I somehow also destroy the div of the children if I uncheck the checkbox?
I made a example here:
https://jscomplete.com/playground/s504328
Help is appreciated, and if you see something I could Improve, please let me know.
You are rendering childData based on this.state.childData which will be referenced by both the parents.
I suggest you change the structure to something like
this.state = {
parentData: [{
"title": "ParentTitle",
"id": 1,
"childData": [{
"title": "child1",
"id": 1
}]
}],
loading: true,
id: '',
};
I have created a fiddle with the solution you require.
https://jsfiddle.net/8w0o5a2m/1/
I have removed the async functions from code for simplicity
I am implementing keyboard navigation functionality on agGridReact,
I am using cellRendererFramework property of colDef to render bespoke react component as below
const columnDefs = [{ headerName: 'Athlete', field: 'athlete', cellRendererFramework: InputRenderer }, ...]
component looks something like below, each columns have their own renderer component
class InputRenderer extends React.Component {
render() {
<input value={this.props.value} />
}
}
Grid looks like
<AgGridReact>
columnDefs={this.state.columnDefs}
singleClickEdit={true}
onGridReady={onGridReady}
rowData={this.state.rowData}
suppressCellSelection={true}
</AgGridReact>
I need to navigate from only to these tabable elements, i.e. from input displaying value of column 1 when I press tab it should focus to input field of cellRendererComponent of column 1, bit lost here.
There are examples on ag-grid site (https://www.ag-grid.com/javascript-grid-cell-editing/) but they are not using custom react component, it navigates on their example but uses built in editor fields, columns with editable property set to true, I instead have custom react components.
below is what out put I am getting, focus is neither on button nor on input , What I am looking for is when I tab focus should be on button of next column, pressing tab on that button should move focus to input field next to it and so on.
add a componentdidmount() and in there add an explicit focus using a ref. That worked for me
The v-select v-model value is broken into new lines at spaces when user clicks to open dropdown.
I have tried styling (white-space) to solve the issue. I've also tried changing the string to an array and looping through the array but that seems like overkill. I am using JS, https://vue-select.org/ and Vue. I am not using Vuetify's v-select.
My data:
data: () => ({
selectedTitle: "Job Title"
}),
The v-select:
<v-select
class="job-title-select"
:options="titles"
v-model="selectedTitle"
#change="(entry) => this.updateCriteria(entry, 'Job Title')"
taggable/>
Note: updateCriteria() is sending data to the store. It doesn't affect the v-select display or local value changes. v-model does.
Expected: I should see the value as "Job Title", "Director of Stuff", on one line when the user clicks on the v-select.
Outcome: When user expands/clicks on dropdown, this is what appears as the title for the dropdown element (these are not dropdown items):
Job
Title
Director
Of
Stuff
It turns out that vue-select has conflicts with Bulma. I removed Bulma as a dependency and everything was fine.
https://github.com/sagalbot/vue-select/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+bulma
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.
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.