I would like to know how to iteratively create picklists (dropdowns) from a json collection.
I have two desired columns, one representing the 'primary' category, and the other representing the 'secondary' category.
I'd like for the right column to have just a string for every 'primary' category and then the left column will have a picklist with options for secondary category. What i'm also trying to do is group this by type. So there will essentially be sections of picklists grouped by type. One section with two columns of 'string', and then another section below that one with two columns of 'number', etc.
--Numbers--
Column 1 || Column 2
Label || picklist
--Strings--
Column 1 || Column 2
Label || picklist
--Booleans--
Column 1 || Column 2
Label || picklist
function MyCtrl($scope) {
$scope.players = [
{type: 'String', org: 'primary', name: 'something__c', label: 'Something'},
{type: 'Number', org: 'primary', name: 'something_else__c', label: 'Something Else'},
{type: 'String', org: 'primary', name: 'obscure__c', label: 'Obscure'},
{type: 'String', org: 'primary', name: 'else__c', label: 'Else'},
{type: 'String', org: 'secondary', name: 'some__c', label: 'Some'},
{type: 'Number', org: 'secondary', name: 'thing__c', label: 'Thing'},
{type: 'Number', org: 'secondary', name: 'sanity_check__c', label: 'My Sanity'}
];
}
Using the tutorials i was only able to get as far as what is in this fiddle: http://jsfiddle.net/GV7KZ/5/
Thank you for any and all guidance.
I'm assuming you mean 'org' instead of category, given that org is the only node with the values of 'primary' and 'secondary'. I thing perhaps you want to use 'filter' rather than your custom 'group by' filtering.
I've made some changes to your fiddle separating out the two. Let me know if this gets you closer to what you want.
<tr ng-repeat="player in players|filter:'primary'">
<td>
{{player.label}}
</td>
<td>
<select>
<option ng-repeat="player in players|filter:'secondary'" value="{{player.name}}">{{player.label}}</option>
</select>
</td>
http://jsfiddle.net/GV7KZ/6/
Related
I have a Series model which $hasMany RainLab\Blog\Models\Posts and when I display this model with 'type' => 'relation', in Posts form it looks perfectly fine:
So, I can select one Series and assign it to a Post. What I wanted to do is to be able to create new series while being on Posts page. To do this I tried to use 'type' => 'partial' for Series field. Partial itself contains just:
<?= $this->relationRender('series', ['readOnly' => false]) ?>
config_relation.yaml contents:
series:
label: Series
view:
list: $/plugin/models/series/columns.yaml
form: $/plugin/models/series/fields_simple.yaml
toolbarButtons: link|unlink|create|add|remove
manage:
form: $/plugin/models/series/fields_simple.yaml
columns.yaml contents:
# ===================================
# List Column Definitions
# ===================================
columns:
title:
label: Title
searchable: true
post_count:
label: Posts
sortable: false
created_at:
label: Created At
type: date
invisible: true
updated_at:
label: Updated At
type: date
invisible: true
fields_simple.yaml:
# ===================================
# Form Field Definitions
# ===================================
fields:
title:
label: Title
span: left
required: true
slug:
label: Slug
span: right
placeholder: Slug
required: true
preset:
field: title
type: slug
So, basically, nothing special here. But:
As you see, it looks terrible by default. And one more issue - when deleting the series (or unlinking, I tried both) it does not refresh the form, values remain there, though the relation is removed in DB.
Am I doing anything wrong here? What is the proper way to nicely display this relation with ability to edit it?
I know that this is a simple question, but I got stuck looking for a solution.
First, I got the FormPanel, that obtains data passed by JSON that looks like:
var formPanel = new Ext.FormPanel({
....
[
{name: 'country', mapping: 'country'}
]
...
Then, I populate the store with data from an external file that has a list of countries
var countryStore = new Ext.data.SimpleStore({
fields: ['vcountry', 'vcountrydesc'],
data : Ext.ms.data.countries,
id:1,
});
What I want to do is to set a default value in a Ext.form.ComboBox, which is defined as name: 'country', precisely, I want to do something like this:
var countryFld = new Ext.form.ComboBox({
store: countryStore,
.....
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select Country',
value: 'country', **<---I WANT TO DO THIS, BUT TO DISPLAY A VALUE, NOT A STRING!**
....
}
});
I assume that solution is very simple, but I got stuck on it.
SIMPLE, very stupid of me to ask...
Solution is just like for any other form
dataIndex: 'country',
instead of
value:'country',
How to have correctly formated data in columns when row template is used?
I'm creating a grid with knockout-kendo where I define columns and row template:
<div data-bind="kendoGrid: {
data: Entries,
sortable: true,
selectable: true,
useKOTemplates: true,
rowTemplate: 'rowTemplate',
columns: [
{
title: 'Created on',
field: 'Timestamp',
format: '{0:d}'
},
{
title: 'The Mighty Value',
field: 'Value'
},
{
title: 'I.D.',
field: 'Id'
},
{}
]}"></div>
If I do so my first column's display format will be lost because of custom template. How to overcome this issue?
JSFiddle example: http://jsfiddle.net/cXDcm/7/
Because you are using a custom row template you are responsible to format your column values.
However you can you use the built in kendo.format method also in your template to manually apply your formatting:
<td data-bind="text: kendo.format('{0:d}',Timestamp())"></td>
Demo JSFiddle.
I've trouble with my Combobox. I've build a simple combobox which is configured with a JsonStore to provide remote data. The combobox opens at the first click without problems, the JSON data is requested and Ext shows me the full dropdown list.
But sporadly at the second (sometimes third) click, the combobox neither open nor load any remote data.
Here's my config:
var config = {
autoLoad: true,
fields: [{
name: 'name',
type: 'string'
}, {
name: 'count',
type: 'int'
}, {
name: 'created_at',
type: 'int'
}, {
name: 'updated_at',
type: 'int'
}],
root: 'result',
idProperty: 'id',
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: '/myHandler/loadDropDownList'
})
};
The combobox itself is loaded in a toolbar:
var config = {
height: 27,
items: [{
xtype: 'tbtext',
text: 'Your preference?:',
// #todo inline style -> CSS
style: {
'font-weight': 'bold',
'color': '#15428B',
'font-family': 'tahoma,arial,verdana,sans-serif',
'font-size': '11px'
}
},
'->',
// align the following items on the right side of the toolbar
{
xtype: 'combo',
itemId: 'table-combobox',
store: new myStore(),
valueField: 'name',
displayField: 'name',
value: ' - Please Choose - '
}]
}
Many thanks in advance!
The combobox may be running into trouble querying the database everytime you select it. If you don't need the combobox data to be updated throughout a user's session (i.e. the dropdown values don't change in between the times the user clicks the combobox), you can add this config to the combobox:
mode:'local',
(ExtJS4: queryMode:'local')
It will take the data that the remote store has autoLoaded and will not requery the database store every time it is dropped down.
For internal reasons, I have to send back from the server to the combo the following json string:
{"root":[{"employeeId":1,"user":{"userName":"admin"}}]}
As you can see, the user is actually an object, any way that the combobox will be able to read it?
the combo is configured as the following:
,displayField:'user.userName'
,title:'Manager'
,xtype: 'numberfield'
,hiddenName: 'employeeId'
,valueField : 'employeeId'
this is the store:
var store = new Ext.data.JsonStore({
autoLoad: true,
url: "/some_data",
root: 'root',
methos:'POST',
fields:[{name:"employeeId"},{name:"user.userName"}] });
the ext wont render it, any solution for that?
Use the 'mapping' property on fields in your store to remap the "deep" values to simple names the ComboBox can then reference:
new Ext.form.ComboBox({
fieldLabel: 'Manager',
hiddenName: 'employeeId',
store: new Ext.data.JsonStore({
root: 'root',
url: '/some_data',
method: 'POST',
fields: [
{name: 'employeeId'},
{name: 'userName', mapping: 'user.userName'}
]
}),
displayField: 'userName',
valueField: 'employeeId'
});