I created Vue application and I have simple store:
const paginationStore = {
data: {
entitiesDisplayOptions: [
{ value: '1', text: '1' },
{ value: '2', text: '2' },
{ value: '4', text: '4' },
{ value: '999999', text: 'All' },
],
paginationLimits: {
bottom: 0,
top: paginationStore.data.entitiesDisplayOptions[0].value
}
}
}
I'm getting error:
Uncaught TypeError: Cannot read property 'data' of undefined
Why I can't set value from entitiesDisplayOptions to paginationStore.data.paginationLimits.top? What should I do to make it works?
You could store it in a variable outside the definition:
const newEntitiesDisplayOptions = [
{ value: '1', text: '1' },
{ value: '2', text: '2' },
{ value: '4', text: '4' },
{ value: '999999', text: 'All' },
];
const paginationStore = {
data: {
entitiesDisplayOptions: newEntitiesDisplayOptions ,
paginationLimits: {
bottom: 0,
top: newEntitiesDisplayOptions[0].value
}
}
}
There is lot of possibilities. Everything you have to do is to remember you can't reference the other object properties at the moment of creation of object in the form of object literal.
const entitiesDisplayOptions = [
{ value: '1', text: '1' },
{ value: '2', text: '2' },
{ value: '4', text: '4' },
{ value: '999999', text: 'All' },
]
const paginationLimits = {
bottom: 0,
top: paginationStore.data.entitiesDisplayOptions[0].value
}
const paginationStore = {
data: {
entitiesDisplayOptions,
paginationLimits
}
}
Related
I am facing an issue where I want to display more radio buttons upon selection of the the first radio buttons.
What I want to achieve is that I need to show the first three radio buttons, A,Band C. And when I select C, I want to display D and E radio buttons together.
Currently all the radio buttons are displaying
Here is the code for it:
<b-form-radio-group
id="radio-group-1"
v-model="selected"
:options="options"
name="radio-options"
>
</b-form-radio-group>
And the script:
data () {
return {
selected: null,
options: [
{ value: '1', text: 'A' },
{ value: '2', text: 'B' },
{ value: '3', text: 'C' },
{ value: '4', text: 'D' },
{ value: '5', text: 'E' },
]
}
}
Any suggestions?
Not sure what the value of selected will be however if its the integer.
data () {
return {
selected: null,
}
},
computed: {
options() {
let defaults = [
{ value: 1, text: 'A' },
{ value: 2, text: 'B' },
{ value: 3, text: 'C' },
];
if (this.selected >= 3) {
return [
...defaults,
{ value: 4, text: 'D' },
{ value: 5, text: 'E' },
];
}
return defaults;
}
},
Might be a better idea to make a seperate group however and only show it if the value of selected is c..
How do I change the 'items' from a 'RNCPickerSelect' when I've selected a value from another 'RNCPickerSelect'?
For example, when I select a value called 'brand' from a RNCPickerSelect, the other RNCPickerSelect displays the 'models' associated with that specific 'brandName'. Basically, I want the 'items' from the other RNCPickerSelect to be influenced by the first RNCPickerSelect.
Here's the code:
================================Brands===================================
<RNPickerSelect
pickerProps={{ style: {overflow: 'hidden' } }}
onValueChange={(value) => console.log(value)}
placeholder={brandplaceholder}
// style={styles.dropbox}
items={[
{ label: 'brand1', value: 'brand1' },
{ label: 'brand2', value: 'brand2' },
{ label: 'brand3', value: 'brand3' },
]}
onValueChange={(val) => setBrand(val)}
/>
==========================================================================
=================================Models===================================
<RNPickerSelect
pickerProps={{ style: {overflow: 'hidden' } }}
onValueChange={(value) => console.log(value)}
placeholder={brandplaceholder}
// style={styles.dropbox}
items={[
{ label: 'model1', value: 'model1' },
{ label: 'model2', value: 'model2' },
{ label: 'model3', value: 'model3' },
]}
onValueChange={(val) => setModel(val)}
/>
==========================================================================
===============================Model Ideas================================
items={[
{ label: 'model4', value: 'model4' },
{ label: 'model5', value: 'model5' },
{ label: 'model6', value: 'model6' },
]}
**and**
items={[
{ label: 'model7', value: 'model7' },
{ label: 'model8', value: 'model8' },
{ label: 'model9', value: 'model9' },
]}
==========================================================================
Thanks!
With the codes provided by #FreakyCoder, I've successfully fixed and improved the 'RNCPickerSelect'. I have adjusted the code to fit my project and have added some extra lines of codes as well. Thanks again #FreakyCoder!
The Sample Codes:
export default function MainPage() {
//===============Example Selections===============//
const firstPick = [
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
];
const secondPick = [
{ label: 'Football2', value: 'football2' },
{ label: 'Baseball2', value: 'baseball2' },
{ label: 'Hockey2', value: 'hockey2' },
];
const thirdPick = [
{ label: 'Football3', value: 'football3' },
{ label: 'Baseball3', value: 'baseball3' },
{ label: 'Hockey3', value: 'hockey3' },
];
//================================================//
const [dynamicPickerArr, setDynamicPickerArr] = useState(HondaModel)
return(
<RNPickerSelect
onValueChange={(value) => { setModel(value)
// Magic here
// Your changed value logic should be here
if(value=='football')
return Football=setDynamicPickerArr(thirdPick)
else if(value=='baseball')
return Baseball=setDynamicPickerArr(secondPick)
else if(value=='hockey')
return Baseball=setDynamicPickerArr(firstPick)
}
}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
/>
<RNPickerSelect
onValueChange={(value) => console.log(value)}
items={dynamicPickerArr}
/>
)
}
you can do that with a simple state logic. When the first picker selects, it will update the other picker's predefined items array.
import React from "react";
import RNPickerSelect from 'react-native-picker-select';
const firstPick = [
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]
const secondPick = [[
{ label: 'Football2', value: 'football2' },
{ label: 'Baseball2', value: 'baseball2' },
{ label: 'Hockey2', value: 'hockey2' },
]
export const Dropdown = () => {
const [dynamicPickerArr, setDynamicPickerArr] = useState(firstPick)
return (
<RNPickerSelect
onValueChange={(value) => {
// Magic here
// Your changed value logic should be here
setDynamicPickerArr(secondPick)}
}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
/>
<RNPickerSelect
onValueChange={(value) => console.log(value)}
items={}
/>
);
};
How can I reset the value of my constant variable in vue? Here is what I meant:
data(){
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:[],
}
}
After that, I access it using the following:
<tr>
<th v-for="(col, index) in columns" :key="index.id">
<ui-select
:options="hdrList"
v-model="headercbo[index][hdrList[index]['label']]"
></ui-select>
</th>
</tr>
The output of this one is like this:
And when I click the clear button, this combo lists are not reverting back to default which it displays an empty or no selected value. Here's how I do it.
clearFields(){
this.columns = [];
this.headercbo = [];
}
But this one does not clear the fields, they still have the previous selected value with them. How can I totally clear them up and set backs to default.
Move the constant out of data.
During reset, you've reassign the default headercbo value with the constant value.
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
export default {
data(){
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:[],
}
},
clearFields() {
this.columns = [];
this.headercbo = _cboList;
}
}
Put what you have in your data function into a method named initialData, then use that function in your data function and in your clearFields method.
data() {
return this.initialData();
},
methods: {
initialData() {
const _hdrList = [{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [{
start_time: ''
},
{
name: ''
},
{
another: ''
},
];
return {
hdrList: _hdrList,
headercbo: _cboList,
columns: [1,2],
}
},
clearFields() {
this.columns = [];
this.headercbo = this.initialData().headercbo;
}
}
Example
I've been looking into getting this to work but so far instead of a dropdown I get and empty textbox which doesn't do anything.
Below is my present code:-
#section js {
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="external">Show checks by ex:</label>
<input type="search" id="external" style="width: 230px"></input>
</div>
</script>
<script type="text/javascript">
var theGrid;
$().ready(function () {
$('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '#Url.Action("_IList", "Entry", new { #ExId = Model.ExId })',
data: { ignore: Math.random() }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Name: { type: 'string' },
Ex: { type: 'string' },
Date: { type: 'string' },
Check1: { type: 'string' },
Check2: { type: 'string' },
Check3: { type: 'string' },
Check4: { type: 'string' },
Check5: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
toolbar: kendo.template($("#template").html()),
columns:
[
{
field: 'Name'
},
{
field: 'Ex'
},
{
field: 'Date'
},
{
template: '#=Template1#' + sitePath + '#=Patient1#',
field: 'Patient1',
title: 'Patient 1',
width: 50
},
{
template: '#=Template2#' + sitePath + '#=Patient2#',
field: 'Patient2',
title: 'Patient 2',
width: 50
},
{
template: '#=Template3#' + sitePath + '#=Patient3#',
field: 'Patient3',
title: 'Patient 3',
width: 50
},
{
template: '#=Template4#' + sitePath + '#=Patient4#',
field: 'Patient4',
title: 'Patient 4',
width: 50
},
{
template: '#=Template5#' + sitePath + '#=Patient5#',
field: 'Patient5',
title: 'Patient 5',
width: 50
}
],
pageable: true
});
var dropDown = grid.find("#external").kendoDropDownList({
dataTextField: "ExName",
dataValueField: "ExId",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "json",
severFiltering: true,
transport: {
url: '#Url.Action("_Ex", "Entry")',
data: { ignore: Math.random() }
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
theGrid = $('#listDiv').data('kendoGrid');
});
</script>
<style scoped="scoped">
#grid .k-toolbar
{
min-height: 27px;
}
.external-label
{
vertical-align: middle;
padding-right: .5em;
}
#external
{
vertical-align: middle;
}
.toolbar {
float: right;
margin-right: .8em;
}
</style>
}
<h2>Check Lists</h2>
<div id="listDiv"></div>
<br />
It works to display all check lists for each Ex which I can select on a previous page and pass in the string Id to this one but I'd like to be able to figure out what's wrong with with the toolbar template as having the functionality on 1 page rather than spread over 2 is far more desirable.
Any help/guidance will be much appreciated.
Edit:
I did also find someone else who encountered the problem except they didn't get a forum response.
Example 2
You mention that somebody else encountered the problem and didn't receive a response, however the linked forum thread does contain a response and an answer to this issue. In that particular case a Javascript error had occurred on the page which prevented the dropdown from initializing correctly and I believe this is also the case for yourself.
Although not completely working because there isn't a valid datasource, I took your example code and dumped it into a jsFiddle and (after fixing some JS errors) you can see that the dropdown appears absolutely fine.
In particular, there were errors regarding grid and sitePath not being defined that prevented the dropdown from initializing.
var grid;
var sitePath = '';
$().ready(function () {
grid = $('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '',
data: { ignore: Math.random() }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Name: { type: 'string' },
Ex: { type: 'string' },
Date: { type: 'string' },
Check1: { type: 'string' },
Check2: { type: 'string' },
Check3: { type: 'string' },
Check4: { type: 'string' },
Check5: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
toolbar: kendo.template($("#template").html()),
columns:
[
{
field: 'Name'
},
{
field: 'Ex'
},
{
field: 'Date'
},
{
template: '#=Template1#' + sitePath + '#=Patient1#',
field: 'Patient1',
title: 'Patient 1',
width: 50
},
{
template: '#=Template2#' + sitePath + '#=Patient2#',
field: 'Patient2',
title: 'Patient 2',
width: 50
},
{
template: '#=Template3#' + sitePath + '#=Patient3#',
field: 'Patient3',
title: 'Patient 3',
width: 50
},
{
template: '#=Template4#' + sitePath + '#=Patient4#',
field: 'Patient4',
title: 'Patient 4',
width: 50
},
{
template: '#=Template5#' + sitePath + '#=Patient5#',
field: 'Patient5',
title: 'Patient 5',
width: 50
}
],
pageable: true
});
var dropDown = grid.find("#external").kendoDropDownList({
dataTextField: "ExName",
dataValueField: "ExId",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "json",
severFiltering: true,
transport: {
url: '#Url.Action("_Ex", "Entry")',
data: { ignore: Math.random() }
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
theGrid = $('#listDiv').data('kendoGrid');
});
I have Json data that has children elements. I need to bind the store to an editable grid and have the edits populated to the store.
The data tree does get populated into the ItemFileWriteStore. The datagrid displays only the parent data and none of the children data.
SAMPLE.TXT
{
"items": [
{
"profileId": "1",
"profileName": "ABC",
"profileType": "EmailProfile",
"profilePreferences": [
{
"profilePreferenceId": "1",
"displayText": "Bob",
"address": "primary#some.com"
},
{
"profilePreferenceId": "2",
"displayText": "Sally",
"address": "secondary#some.com"
},
{
"profilePreferenceId": "3",
"displayText": "Joe",
"address": "alternate#some.com"
}
]
}
]
}
javascript
var sampleLayout = [
[
{ field: 'profileName', name: 'profileName', width: '100px' },
{ field: 'profilePreferences.displayText', name: 'displayText', width: '100px' },
{ field: 'profilePreferences.address', name: 'address', width: '100px' }
]];
function populateGrid() {
var url = "sample.txt"; //Will be replaced with endpoint URL
dojo.xhrGet({
handleAs: 'json',
url: url,
error: function (e) {
alert("Error: " + e.message);
},
load: showJsonData
});
}
function showJsonData(response, ioArgs) {
var profileStore = new dojo.data.ItemFileWriteStore({
data: {
items: response.items
}
});
var sampleGrid = dijit.byId("sampleGrid");
sampleGrid.store = profileStore;
sampleGrid.startup();
}
you need to be using dojox.grid.TreeGrid or 'fake' the JSON to present every even row with a blank profileName. Two samples follows, one for TreeGrid another on DataGrid - not tested in working environment though.
Given Hierachial JSON:
{
identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid
items: [{
id: '1',
profileName: 'Admin',
profilePreferences: [
{ id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
{ id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
]
}, {
id: '2',
profileName: 'Visitor',
profilePreferences: [
{ id: '2_1', displayText: 'Foo', address: 'Texas' }
{ id: '2_2', displayText: 'Bar', address: 'Indiana' }
]
}]
}
TreeGrid Structure:
{
cells: [
[
{ field: "profileName", name: "profileName", width: "100px" },
{ field: "profilePreferences",
children: [
{ field: "displayText" name: "displayText", width: "100px" },
{ field: "address" name: "address", width: "100px" }
]
]
]
}
reference: dojo docs
Given flattened 'fake-children' JSON:
{
identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid
items: [{
id: '1',
profileName: 'Admin', preferenceText: '', preferenceAddr: ''
}, {
id: '2',
profileName: '', preferenceText: 'John', preferenceAddr: 'NY'
}, {
id: '3',
profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
}, {
id: '4', // Not with '.' dot seperator like so
profileName: '', preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
} ]
DataGrid structure:
[[
{'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
{'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
{'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]
reference dojo docs