Title sounds a bit weird but let me explain.
I made a component that allows me to generate dynamic input fields based on a json list.
Only some fields I would like to have next to each other and that is not possible in the current construction. So I came up with an idea to make a JSON "layout template" with rows and columns and which ID field belongs where.
For example "layout template":
{
"row": {
field: {id:"ID-FIELD-1",type:"text"}
},
"row": {
field: {id:"ID-FIELD-2",type:"phone"},
field: {id:"ID-FIELD-3",type:"email"}
},
"row": {
field: {id:"ID-FIELD-4",type:"text"}
}
etc...
}
Now I can make a JSON "layout template" and put an "input component" in each field. This "input component" then loops to the correct type of input field. Only this seems a bit too much to go through the input list every time looking for the right type for each field.
So I've been looking for ways in javascript to setup/format the whole template in a "string" like way and have it picked up by Vuejs as if it were a standard ....
Then I dont have to loop the whole field section every time.
I don't know if this is possible or if there are other ways to do this?
Related
I would like to use 2 values in a Vega Text Mark, but there is little documentation for this old version of Vega (Vega 1.5.0).
I would like it to show up something resembling: Name: Value, but I cant find a way to get it to work.
This is my current definition JSON implementation, and it shows the text fine, I just can't get it to show another
"text": { "field": "data.name" },
I have tried something like this to no avail, any advice?
"text": {"field": "data.name", "field": "data.value" },
Have now also tried using the transform calculate as suggested, using it as such within the transform block. And referring to tooltip in the text field. This has also not worked.
{
"calculate": "data.name + ':' + data.value", "as": "tooltip"
}
Conclusion: In Vega 1.5.0 this is seemingly not possible, Following suggestions has not resulted in the desired solution. If you are looking to do this in such an old version of Vega, I would recommend you update Vega to a newer version.
Use a calculate transform to concat your text values and use that new field.
In a sample project, I placed the "Flexbox Wrapper" code sample here (picking from the drop-down list)
The code below is meant to create 2 columns for the children form components of cheese options and toppings:
...preceding code...
{
"component": "div",
"class": "flex-wrapper",
"children": [
....
However it shows both as one column (see image attached.) I have absolutely no other styling asides the header link pointing to the default snow.min.css at by CDN.
This is so basic, surprised it's not working as documented. Is there any implicit step I have missed to get this working?
Also not sure why the heading, represented by an 'h3' component in the schema, is appearing as a different font.
I am building a "filter component" that displays all available filters for that "product type".
Pretty standard pretty much just think of bestbuy, amazon, craiglist style filter.
Right now I am focusing on how to generate the filter options(not how to handle once a user clicks on a filter option and it must then go off and filter the results down).
So I created a json object that has something like this,
which will create each header section(HardDrive,Ram Size, Number of CPU Cores), what type is it(checkboxes, textboxes),
should the section be opened,
should it have a search box in it.
{
type: "", // this is what type of filter it will be (textbox, checkboxes and etc)
header: "Filter Header",
property: "", // this maps it back to the column name in db used when filter is actually triggered.
hasSearchBox: false, // some filter options are long so search box can be shown.
isOpen: true, // controls if this filter should be in an open or closed state.
for: ["What Products this filter applies to. Some of these filters are common between all products"]
},
Now I need to figure out if I should store the above as is or if I should break it into a column format.
Ie
Filters Tbl
Id
ProductTypeId
type
header
property
hasSearchBox
isOpen
This does make it easier to add a new filter in the future, but I am bit concerned if some new option comes in that might only be for some filters and not others(ie lots of null columns) or if I need a more complex objects in the future(like setting the placeholder name for the textbox).
or if I should store it like this
ProductTypeTable
Id
FilterOptions <--- json from above gets store in here.
I have to refresh an Enhanced List as i have a "quick search" input field
that should update the list while you type. It does work fine, until I select one of the result rows. Then I move back to the input field and start typing but at that moment, the focus is lost and after every letter I have to click back to the input field.
Any method I found refreshing the grid sets the focus to the first header
cell. This means of course that my input field
looses focus. I cannot type more than 1 char without refocusing the field
:-(
Any idea how to re-render a grid (or enhanced grid) without changing focus?
gridtoc = new dojox.grid.EnhancedGrid({
id: 'gridtocsearch',
store: storetoc,
structure: layout,
class: 'grid',
align: 'center',
keepSelection: true,
plugins: {
filter: true
}
});
Thanks a lot, Monika
can you try like
keepSelection:false
official document says
keepSelection
Defined by dojox.grid.EnhancedGrid
Whether keep selection after sort, filter, pagination etc.
***************** updated answer*****************
take a look at this jsfiddle
http://jsfiddle.net/bnqkodup/520/
In my Dojo application, I had a tree with nodes sorted by their name. Like this :
I already built a New form addition, and it can add a new node to this tree, but always at the bottom. Is there a way to insert this newly added node to the store in a correct sorted position? So if I am about to add 000-011 - Biaya Teknis Pengacara to this tree, it should be ended up this way :
To achieve this, currently I must refresh my browser. Surely, this is not what all user wanted.. :)
For the code addition of node itself, here it is:
//TOFIX : add in a sorted way
akunStore.newItem(
{"id":data.id.toString(),"name":data.name},
{"parent": groupsModel.root, "attribute":"groups"}
);
akunStore.save();
akunStore.fetch();
I add the fetch() as shown above, but it didn't work, currently.
Use the sort attribute in your call to the fetch() method of your data store. Try something like :
akunStore.fetch({
sort: [
{ attribute: "youFirstSortField" },
{ attribute: "aSecondSortField" }
]
});
You can also specify a descending order by adding "descending : true" in your sort params... more on that here : http://dojotoolkit.org/reference-guide/quickstart/data/usingdatastores/sorting.html#quickstart-data-usingdatastores-sorting