I am trying to load data into the VueJS table using the ag Grid vue plugin that I have in a template, I have tried several ways but I am not getting the result I am looking for ..., getting the following result:
{
"users": [
{
"id": 1,
"client_id": 1,
"cop_id": null,
"role_id": null,
"name": "Bart",
"email": "correo.123#gmail.com",
"created_at": null,
"updated_at": null
}
]
}
then I have my Vue view in this way, and sorry for including all the code, but since the template is working with everything that comes, I prefer to deliver all the detail, I have tried to make changes to the created method with axios, but I did not It works, unfortunately I can't load the data into the table, I hope you can guide me to fix my loading error.
<template>
<div id="page-user-list">
<!-- AgGrid Table -->
<ag-grid-vue
ref="agGridTable"
:components="components"
:gridOptions="gridOptions"
class="ag-theme-material w-100 my-4 ag-grid-table"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"
rowSelection="multiple"
colResizeDefault="shift"
:animateRows="true"
:floatingFilter="true"
:pagination="true"
:paginationPageSize="paginationPageSize"
:suppressPaginationPanel="true"
:enableRtl="$vs.rtl">
</ag-grid-vue>
<vs-pagination
:total="totalPages"
:max="10"
v-model="currentPage" />
</div>
</template>
<script>
import { AgGridVue } from "ag-grid-vue"
import '#sass/vuexy/extraComponents/agGridStyleOverride.scss'
import vSelect from 'vue-select'
import axios from 'axios'
// Store Module
//import moduleUserManagement from '#/store/user-management/moduleUserManagement.js'
// Cell Renderer
import CellRendererLink from "./cell-renderer/CellRendererLink.vue"
import CellRendererStatus from "./cell-renderer/CellRendererStatus.vue"
import CellRendererVerified from "./cell-renderer/CellRendererVerified.vue"
import CellRendererActions from "./cell-renderer/CellRendererActions.vue"
export default {
components: {
AgGridVue,
vSelect,
// Cell Renderer
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
},
data() {
return {
// Filter Options
roleFilter: { label: 'Todos', value: 'all' },
roleOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Administador', value: 'admin' },
{ label: 'Usuario', value: 'user' },
{ label: 'Staff', value: 'staff' },
],
statusFilter: { label: 'Todos', value: 'all' },
statusOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Activo', value: 'active' },
{ label: 'Desactivado', value: 'deactivated' },
{ label: 'Bloqueado', value: 'blocked' },
],
isVerifiedFilter: { label: 'Todos', value: 'all' },
isVerifiedOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Si', value: 'yes' },
{ label: 'No', value: 'no' },
],
departmentFilter: { label: 'Todos', value: 'all' },
departmentOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Vendido', value: 'sales' },
{ label: 'Departamento', value: 'development' },
{ label: 'Administrado', value: 'management' },
],
searchQuery: "",
// AgGrid
gridApi: null,
gridOptions: {},
defaultColDef: {
sortable: true,
resizable: true,
suppressMenu: true
},
columnDefs: [
{headerName: 'ID', field: 'id', width: 125, filter: true, checkboxSelection: true, headerCheckboxSelectionFilteredOnly: true, headerCheckboxSelection: true },
{headerName: 'Username', field: 'client_id', filter: true, width: 210, cellRendererFramework: 'CellRendererLink'},
{headerName: 'Email', field: 'email', filter: true, width: 225 },
{headerName: 'Nombre', field: 'name', filter: true, width: 200 },
{headerName: 'Comuna', field: 'cop_id', filter: true, width: 150},
{headerName: 'Role', field: 'role_id', filter: true, width: 150},
{headerName: 'Acciones', width: 150, cellRendererFramework: 'CellRendererActions'},
],
// Cell Renderer Components
components: {
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
}
}
},
watch: {
roleFilter(obj) {
this.setColumnFilter("role", obj.value)
},
statusFilter(obj) {
this.setColumnFilter("status", obj.value)
},
isVerifiedFilter(obj) {
let val = obj.value === "all" ? "all" : obj.value == "yes" ? "true" : "false"
this.setColumnFilter("is_verified", val)
},
departmentFilter(obj) {
this.setColumnFilter("department", obj.value)
},
},
computed: {
usersData() {
return this.users.data
},
paginationPageSize() {
if(this.gridApi) return this.gridApi.paginationGetPageSize()
else return 10
},
totalPages() {
if(this.gridApi) return this.gridApi.paginationGetTotalPages()
else return 0
},
currentPage: {
get() {
if(this.gridApi) return this.gridApi.paginationGetCurrentPage() + 1
else return 1
},
set(val) {
this.gridApi.paginationGoToPage(val - 1)
}
}
},
methods: {
setColumnFilter(column, val) {
const filter = this.gridApi.getFilterInstance(column)
let modelObj = null
if(val !== "all") {
modelObj = { type: "equals", filter: val }
}
filter.setModel(modelObj)
this.gridApi.onFilterChanged()
},
resetColFilters() {
// Reset Grid Filter
this.gridApi.setFilterModel(null)
this.gridApi.onFilterChanged()
// Reset Filter Options
this.roleFilter = this.statusFilter = this.isVerifiedFilter = this.departmentFilter = { label: 'All', value: 'all' }
this.$refs.filterCard.removeRefreshAnimation()
},
updateSearchQuery(val) {
this.gridApi.setQuickFilter(val)
}
},
created(){
//let users = /apps/user/user-list/
axios.get('api/users')
.then(res => {
let users = res.data.users;
})
}
}
</script>
<style lang="scss">
#page-user-list {
.user-list-filters {
.vs__actions {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-58%);
}
}
}
</style>
Related
I want to pull with javascript: {"subNav0", "subNav1", "subNav2", "subNav3", "subNav4", "subNav5"}.
my json:
var data = {
"menus":{
"GrandparentNav0":{
"name":"TopNav",
"items":[
{
"name":"ParentNav0",
"iconClass":"",
"items":[
{
"name":"ParentNav1",
"iconClass":"",
"items":[
{
"name":"subNav0",
"iconClass":""
},
{
"name":"subNav1",
"iconClass":""
},
{
"name":"subNav2",
"iconClass":""
},
{
"name":"subNav3",
"iconClass":""
},
{
"name":"subNav4",
"iconClass":""
},
{
"name":"subNav5",
"iconClass":""
}
]
},
]
}
]
}
},
};
i know basic filter of an array:
data .forEach(function(o) {
o.variable = o.variable.filter(s => s.value == value);
});
I dont know how to get through menus, GrandparentNav0 to pull the subNav(s)
By "pull the subNav(s)" do you mean like accessing it through something like bracket notation?
let subNavs = data['menus']['GrandparentNav0']['items'][0]['items']
console.log(subNavs)
/* would return
[
{
"name": "subNav0",
"iconClass": ""
},
{
"name": "subNav1",
"iconClass": ""
},
{
"name": "subNav2",
"iconClass": ""
},
{
"name": "subNav3",
"iconClass": ""
},
{
"name": "subNav4",
"iconClass": ""
},
{
"name": "subNav5",
"iconClass": ""
}
]
*/
Here is a solution using object-scan. This might be overkill for your requirements, however as you run into other use cases it's a Swiss army knife that makes these types of data interactions very clean
// const objectScan = require('object-scan');
const data = { menus: { GrandparentNav0: { name: 'TopNav', items: [ { name: 'ParentNav0', iconClass: '', items: [ { name: 'ParentNav1', iconClass: '', items: [ { name: 'subNav0', iconClass: '' }, { name: 'subNav1', iconClass: '' }, { name: 'subNav2', iconClass: '' }, { name: 'subNav3', iconClass: '' }, { name: 'subNav4', iconClass: '' }, { name: 'subNav5', iconClass: '' } ] } ] } ] } } };
const result = objectScan(['menus.GrandparentNav0.items[0].items[0].items[*].name'], { reverse: false, rtn: 'value' })(data);
console.log(result);
// => [ 'subNav0', 'subNav1', 'subNav2', 'subNav3', 'subNav4', 'subNav5' ]
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="https://bundle.run/object-scan#14.0.0"></script>
Disclaimer: I'm the author of object-scan
I'm struggling trying to unit test some components in an app and I would really apreciate if someone could help me.
I've already set up the Jest enviroment for testing in Vue and things work just fine until I try to test a component that rely on other modules with functions in it. These functions are helpers useful for importing vuex actions and getters quicker in the components. Here there are some lines of code that I hope could help with the problem:
this is the error that Jest throws in the console:
/app # yarn test:unit /common / page - header / ProjectWizard.spec.js
yarn run v1 .22 .5
$ jest / common / page - header / ProjectWizard.spec.js
FAIL src / specs / common / page - header / projectWizard.spec.js
● Test suite failed to run
Configuration error:
Could not locate module # / state / helpers mapped as:
/app/$1.
Please check your configuration
for these entries: {
"moduleNameMapper": {
"/^#\/(.*)$/": "/app/$1"
},
"resolver": undefined
}
57 |
import VueGoogleAutocomplete from '../../../node_modules/vue-google-autocomplete'
58 |
> 59 |
import {
|
^
60 | contractTypesMethods,
61 | contractTypesGetters,
62 | installationTypesMethods,
at createNoMappedModuleFoundError(node_modules / jest - resolve / build / index.js: 551: 17)
at src / components / builder / ProjectWizard.vue: 59: 1
at Object. < anonymous > (src / components / builder / ProjectWizard.vue: 491: 3)
this is the ProjectWizard file:
<template>
<form-wizard
#on-complete="onComplete(model)"
error-color="#f1b44c"
color="#EC641C"
nextButtonText="Avanti"
backButtonText="Indietro"
:finishButtonText="(isModifying) ? 'Conferma modifiche' : 'Crea Progetto'"
id="project-form-wizard"
style="overflow: hidden;"
>
<tab-content title="Informazioni preliminari" icon="mdi mdi-folder-information" :before-change="validateFirstTab">
<vue-form-generator-component :model="model" :schema="zeroTabSchema" :options="formOptions" ref="zeroTabSchema">
</vue-form-generator-component>
<b-form-group featured class="col-12" label="Indirizzo (Via etc.)" label-for="indirizzo-progetto">
<vue-google-autocomplete required keypress types="" ref="address" id="indirizzo-progetto"
classname="form-control" placeholder="Inserisci qui l'indirizzo del progetto"
v-on:placechanged="getAddressData" country="it">
</vue-google-autocomplete>
</b-form-group>
<vue-form-generator-component :model="model" :schema="firstTabSchema" :options="formOptions" ref="firstTabForm">
</vue-form-generator-component>
</tab-content>
<tab-content
title="Dettagli progetto"
icon="mdi mdi-home-search-outline"
:before-change="validateSecondTab"
>
<vue-form-generator-component
:model="model"
:schema="secondTabSchema"
:options="formOptions"
ref="secondTabForm"
></vue-form-generator-component>
</tab-content>
</form-wizard>
</template>
<script>
import {
FormWizard,
TabContent
} from "vue-form-wizard";
import VueFormGenerator from 'vue-form-generator'
import {
resources
} from "../../../src/utils/validation"
Object.assign(VueFormGenerator.validators.resources, resources)
import VueGoogleAutocomplete from '../../../node_modules/vue-google-autocomplete'
import {
contractTypesMethods,
contractTypesGetters,
installationTypesMethods,
installationTypesGetters,
interventionTypesMethods,
interventionTypesGetters,
contactsMethods,
projectManagementMethods,
projectManagementGetters,
projectsMethods
} from "#/state/helpers";
// STATELESS
import {
fetchContacts
} from '#/stateless/modules/common'
export default {
data() {
var vm = this;
return {
...contractTypesGetters,
...installationTypesGetters,
...interventionTypesGetters,
...projectManagementGetters,
contractTypes: [],
selectedContract: "",
installationTypesFiltered: [],
interventionTypesFiltered: [],
installationTypes: [],
interventionTypes: [],
contactPersons: [],
address: '',
model: {
projectName: '',
address: {
partialStreet: '',
streetNumber: '',
city: '',
province: '',
country: '',
CAP: '',
state: ''
},
contractType: '',
installationType: '',
interventionType: '',
contactPerson: '',
description: ''
},
formOptions: {
validationErrorClass: "has-error",
validationSuccessClass: "has-success",
validateAfterChanged: true,
},
zeroTabSchema: {
fields: [{
type: "input",
inputType: "text",
label: "Nome del progetto",
model: "projectName",
required: true,
featured: true,
maxlength: 64,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-12'
},]
},
firstTabSchema: {
fields: [
{
type: "input",
inputType: "text",
label: "Via",
model: "address.partialStreet",
required: true,
featured: true,
maxlength: 128,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-6'
},
{
type: "input",
inputType: "text",
label: "Numero civico",
model: "address.streetNumber",
required: true,
featured: true,
maxlength: 16,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-6'
},
{
type: "input",
inputType: "text",
label: "Città",
model: "address.city",
required: true,
featured: true,
maxlength: 64,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-6'
},
{
type: "input",
inputType: "text",
label: "Provincia",
model: "address.province",
required: true,
featured: true,
maxlength: 2,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-6'
},
{
type: "input",
inputType: "text",
label: "Paese",
model: "address.country",
required: true,
featured: true,
maxlength: 32,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-6'
},
{
type: "input",
inputType: "text",
label: "CAP",
model: "address.CAP",
required: true,
featured: true,
min: 5,
maxlength: 8,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-6'
},
{
type: "input",
inputType: "text",
visible: false,
label: "Regione",
model: "address.state",
required: true,
featured: true,
maxlength: 32,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-6'
},
]
},
secondTabSchema: {
fields: [{
type: "select",
label: "Tipo di appalto",
model: "contractType",
required: true,
featured: true,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-12',
selectOptions: {
hideNoneSelectedText: true
},
onChanged(event) {
const filterdTypes = vm.installationTypes.filter((element) => {
return element.contractType === event.contractType
})
let installation = document.getElementById('insediamento')
installation.innerHTML = ''
installation.disabled = false
for (let i = 0; i < filterdTypes.length; i++) {
installation.options[i] = new Option(
filterdTypes[i].name,
filterdTypes[i].id
)
}
installation.value = ""
let intervention = document.getElementById('tipologia-di-intervento')
intervention.value = ""
},
values: () => {
return this.contractTypes
},
},
{
type: "select",
disabled: "true",
label: "Insediamento",
model: "installationType",
required: true,
featured: true,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-12',
selectOptions: {
hideNoneSelectedText: true
},
onChanged(event) {
const filterdTypes = vm.interventionTypes.filter((element) => {
return element.installationType === event.installationType
})
let intervention = document.getElementById('tipologia-di-intervento')
intervention.innerHTML = ''
intervention.disabled = false
for (let i = 0; i < filterdTypes.length; i++) {
intervention.options[i] = new Option(
filterdTypes[i].name,
filterdTypes[i].id
)
}
intervention.value = ""
},
values: () => {
return this.isModifying ? this.installationTypes : []
},
},
{
type: "select",
disabled: "true",
noneSelectedText: "",
label: "Tipologia di intervento",
model: "interventionType",
required: true,
featured: true,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-12',
selectOptions: {
hideNoneSelectedText: true
},
values: () => {
return this.isModifying ? this.interventionTypes : []
},
},
{
type: "select",
label: "Referente di progetto",
model: "contactPerson",
required: true,
featured: true,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-12',
selectOptions: {
hideNoneSelectedText: true
},
hint: '<div id="new-contact-creation-project"><i class="mdi mdi-account-multiple-plus"></i> <span>Crea nuovo referente</span></div>',
values: () => {
return this.contactPersons
},
},
{
type: "textArea",
label: "Descrizione",
model: "description",
featured: true,
maxlength: 512,
validator: VueFormGenerator.validators.string,
styleClasses: 'col-12'
}
]
}
}
},
components: {
FormWizard,
TabContent,
'vue-form-generator-component': VueFormGenerator.component,
VueGoogleAutocomplete
},
computed: {
isModifying() {
return (this.$router.currentRoute.name == 'builderHome') ? false : true
},
},
methods: {
...contractTypesMethods,
...installationTypesMethods,
...interventionTypesMethods,
...contactsMethods,
...projectsMethods,
...projectManagementMethods,
onComplete: function (json) {
if (this.isModifying) {
this.updateProject({
projectId: this.currentProject().id,
name: this.model.projectName,
description: this.model.description,
address: this.model.address.partialStreet,
streetNumber: this.model.address.streetNumber,
city: this.model.address.city,
province: this.model.address.province,
country: this.model.address.country,
zipCode: this.model.address.CAP,
contactPerson: this.model.contactPerson,
contractType: this.model.contractType,
installationType: this.model.installationType,
interventionType: this.model.interventionType
}).then(() => location.reload())
} else {
this.addProject(json)
.then(response => {
if (response) {
this.$router.push({
name: 'BOMUpload',
params: { projectId: response.data.data.createProject.project.id }
})
}
})
}
},
validateFirstTab: function () {
if (!this.model.projectName) {
return alert('Il nome del progetto è obbligatorio')
}
return this.$refs.firstTabForm.validate();
},
validateSecondTab: function () {
return this.$refs.secondTabForm.validate();
},
newContactPersonCreation() {
this.$emit('new-contact-person-creation')
},
getAddressData: function (addressData, placeResultData) {
this.address = addressData;
this.model.address.country = addressData.country;
this.model.address.city = addressData.locality;
if (placeResultData.address_components[4].short_name == 'IT') {
this.model.address.province = placeResultData.address_components[2].short_name
} else if (placeResultData.address_components[4].short_name.length > 2) {
this.model.address.province = placeResultData.address_components[3].short_name
} else {
this.model.address.province = placeResultData.address_components[4].short_name
}
this.model.address.partialStreet = addressData.route;
this.model.address.streetNumber = addressData.street_number;
this.model.address.CAP = addressData.postal_code;
this.model.address.state = addressData.administrative_area_level_1;
},
getContacts() {
fetchContacts()
.then(response => {
this.contactPersons = response.map(contact => {
return { id: contact.node.id, name: contact.node.name }
})
this.model.contactPerson = this.contactPersons.slice(-2).pop().id
if (this.isModifying) {
this.model.contactPerson = this.currentProject().contactPerson.id
}
})
.catch(err => console.error('Riga 417 ProjectWizard.vue', err))
}
},
mounted() {
if (this.isModifying) {
this.model.projectName = this.currentProject().name
this.model.address.partialStreet = this.currentProject().address.address
this.model.address.streetNumber = this.currentProject().address.streetNumber
this.model.address.city = this.currentProject().address.city
this.model.address.province = this.currentProject().address.province
this.model.address.country = this.currentProject().address.country
this.model.address.CAP = this.currentProject().address.zipCode
this.model.description = this.currentProject().description
}
var newContact = document.querySelector("#new-contact-creation-project")
newContact.onclick = () => {
this.newContactPersonCreation()
};
// CONTRACT TYPES
this.fetchContractTypes()
.then(response => {
if (response) {
let processedContractTypes = []
this.contractTypes = this.allContractTypes()
this.contractTypes.forEach(contractType => {
let contractTypeObj = { id: contractType.node.id, name: contractType.node.name }
processedContractTypes.push(contractTypeObj)
})
this.contractTypes = processedContractTypes
if (this.isModifying){
this.model.contractType = this.currentProject().contractType.id
}
} else {
alert('Not working fetchContractTypes')
}
})
// INSTALLATION TYPES
this.fetchInstallationTypes()
.then(response => {
if (response) {
let processedInstallationTypes = []
this.installationTypes = this.allInstallationTypes()
this.installationTypes.forEach(installationType => {
let installationTypeObj = {
id: installationType.node.id,
name: installationType.node.name,
contractType: installationType.node.contractType.id
}
processedInstallationTypes.push(installationTypeObj)
})
this.installationTypes = processedInstallationTypes
if (this.isModifying){
this.model.installationType = this.currentProject().installationType.id
}
} else {
alert('Not working fetchInstallationTypes')
}
})
// INTERVENTION TYPES
this.fetchInterventionTypes()
.then(response => {
if (response) {
let processedInterventionTypes = []
this.interventionTypes = this.allInterventionTypes()
this.interventionTypes.forEach(interventionType => {
let interventionTypeObj = {
id: interventionType.node.id,
name: interventionType.node.name,
installationType: interventionType.node.installationType.id,
}
processedInterventionTypes.push(interventionTypeObj)
})
this.interventionTypes = processedInterventionTypes
if (this.isModifying){
this.model.interventionType = this.currentProject().interventionType.id
}
} else {
alert('Not working fetchInterventionTypes')
}
})
// CONTACT PERSONS
this.getContacts()
},
}
</script>
this is my jest configuration file:
module.exports = {
verbose: true,
roots: ["<rootDir>/src/", "<rootDir>/src/specs/"],
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/$1',
"~(.*)$": "<rootDir>/$1"
},
transform: {
"^.+\\.js$": "babel-jest",
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$': 'jest-transform-stub',
"^.+\\.vue$": "vue-jest"
},
snapshotSerializers: [
"<rootDir>/node_modules/jest-serializer-vue"
],
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!vue-google-autocomplete)',
'<rootDir>/(?!)'
]
}
and finally this is the code in the spec file:
import { mount } from '#vue/test-utils'
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import Component from '#/src/components/builder/ProjectWizard'
Vue.use(BootstrapVue)
describe('ProjectWizard', () => {
it('should render a card for each project received from its parent', () => {
const wrapper = mount(Component)
console.log(wrapper)
})
})
I dont't understand why Jest isn't able to find those functions since the module's location is right.
I am using the vue wrapper for jexcel and am attempting to trigger the undo function from the toolbar computed field. I cannot seem to access the instance of the spreadsheet. it throws a this.undo is undefined error
<template lang="html">
<div class="wrapper-jexcel">
<button class="" #click="getData(jExcelObj)">Data</button>
<button class="" #click="jExcelObj.undo()">Undo</button>
<input
type="button"
value="Add new row"
#click="jExcelObj.insertRow()"
/>
<div id="spreadsheet" ref="spreadsheet"></div>
</div>
</template>
import jexcelStyle from "jexcel/dist/jexcel.css"; // eslint-disable-line no-unused-vars
import jexcel from "jexcel"; // eslint-disable-line no-unused-vars
import db from '#/firebase/init'
import firebase from 'firebase'
export default {
name: "workbook",
data() {
return {
workbookid: this.$route.params.workbookid,
myCars: [],
columns: [
{ type: "text", title: "Car", width: "120px" },
{
type: "dropdown",
title: "Make",
width: "250px",
source: ["Alfa Romeo", "Audi", "BMW", "Honda", "Porshe"]
},
{ type: "calendar", title: "Available", width: "250px" },
{ type: "image", title: "Photo", width: "120px" },
{ type: "checkbox", title: "Stock", width: "80px" },
{
type: "numeric",
title: "Price",
width: "120px",
mask: "$ #.##,00",
decimal: ","
},
{ type: "color", width: "100px", render: "square" }
]
};
},created() {
this.getworkbook()
},
methods: {
onchange(){
console.log('change');
},
insertRowc() {
console.log(this);
// this.spreadsheet.insertRow();
},
undo(){
console.log('test');
jExcelObj.undo();
},
getData(payload) {
console.log(this.myCars);
console.log(payload);
// this.myCars = payload.data
}
},
computed: {
jExcelOptions() {
var self = this;
return {
data: this.myCars,
columns: this.columns,
search: true,
//fullscreen: true,
minDimensions: [20, 40],
defaultColWidth: 100,
allowComments: true,
toolbar: [
{ type:'i', content:'undo', onclick:function() { return jExcelObj.undo(); } },
{ type:'i', content:'redo', onclick:function() { this.redo(); } },
{ type:'i', content:'save', onclick:function () { test.download(); } },
{ type:'select', k:'font-family', v:['Arial','Verdana'] },
{ type:'select', k:'font-size', v:['9px','10px','11px','12px','13px','14px','15px','16px','17px','18px','19px','20px'] },
{ type:'i', content:'format_align_left', k:'text-align', v:'left' },
{ type:'i', content:'format_align_center', k:'text-align', v:'center' },
{ type:'i', content:'format_align_right', k:'text-align', v:'right' },
{ type:'i', content:'format_bold', k:'font-weight', v:'bold' },
{ type:'color', content:'format_color_text', k:'color' },
{ type:'color', content:'format_color_fill', k:'background-color' },
]
};
}
},
mounted: function() {
//console.log(this.jExcelOptions);
//console.log(this.$refs["spreadsheet"]);
const jExcelObj = jexcel(this.$refs["spreadsheet"], this.jExcelOptions);
// Object.assign(this, jExcelObj); // pollutes component instance
Object.assign(this, { jExcelObj }); // tucks all methods under jExcelObj object in component instance
// console.log(this.jExcelObj);
}
};
should i be passing the instance into the computed method? I am struggling to understand how to manage instances of a wrapper plugin and accessing the methods.
You can get the instance using that:
var yourTableInstance = document.getElementById('spreadsheet').jexcel;
yourTableInstance.undo();
yourTableInstance.getData();
mounted: function() {
let spreadsheet = jspreadsheet(this.$el, options);
Object.assign(this, spreadsheet);
}
My problem is: when I change db.Contacts.Where( x => x.Id > 100).Select(...), The KendoUI Grid cannot show the data. However, when x=>x.Id < 100, it can show the data.
If I delete the Where(...), it also can not show the data.
What is the wrong? Thank you very much.
Here is my code.
public class HelloOneController : Controller
{
......
public JsonResult Contacts_Read()
{
var query = db.Contacts.Where(x => x.Id < 100 )
.Select(x => new
{
Id = x.Id,
Email = x.Email,
FirstName = x.FirstName,
LastName = x.LastName
}).ToList();
}
return Json(query, JsonRequestBehavior.AllowGet);
}
......
}
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "/HelloOne/Contacts_Read",
dataType: "json"
},
schema: {
model:{
fields: {
Id: { type: "number" },
Email: { type: "string" },
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
pageSize: 20
},
height: 500,
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ title: "Id", field: "Id", width: 50 },
{ title: "Email", field: "Email" },
{ title: "First Name", field: "FirstName" },
{ title: "Last Name", field: "LastName" }
]
});
I'm trying to use the Kendo Scheduler to show 3 different calendars. The scheduler itself is displaying properly, but the data is not being populated/displayed. I'm very new to JavaScript and I cannot seemed to figure out where the issue is. There are no errors on the page and it looks like it can see the JSON file, but is just not displaying the data.
Any help would be greatly appreciated!!
Here's the code:
<div id="example">
<div id="team-schedule">
<div id="people">
<input checked type="checkbox" id="fcpi" value="2">
<input type="checkbox" id="rpr" value="3">
<input checked type="checkbox" id="aaspg" value="1">
</div>
</div>
<div id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2016/1/13"),
startTime: new Date("2016/1/13 07:00AM"),
height: 600,
views: [
"day",
"workWeek",
"week",
{ type:"month", selected: true},
"agenda"
],
timezone: "Etc/GMT",
dataSource: {
batch: true,
transport: {
read: {
url: "./calendars/Fiscal.json",
dataType: "jsonp"
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: "1", type: "number" },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
filters: [
{ field: "ownerId", operator: "eq", value: '1' }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "AA & SPG Pay Run", value: '1', color: "#f8a398" },
{ text: "Foster Care Phone In", value: '2', color: "#51a0ed" },
{ text: "Residential Pay Run", value: '3', color: "#56ca85" }
]
}
]
});
$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});
</script>
And then some of the JSON data too:
[{"TaskID":1,"OwnerID":1,"Title":"AA & SPG Paid","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1453334400)\/","End":"\/Date(1453420800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":2,"OwnerID":1,"Title":"AA & SPG Supplemental","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1453334400)\/","End":"\/Date(1453420800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":3,"OwnerID":1,"Title":"Approve Payments","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1452038400)\/","End":"\/Date(1452124800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":4,"OwnerID":1,"Title":"Approve Payments","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1452124800)\/","End":"\/Date(1452211200)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":5,"OwnerID":1,"Title":"Sent to Edison AA & SPG Supplemental","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1452211200)\/","End":"\/Date(1452297600)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":6,"OwnerID":2,"Title":"Approve Payments","Description":"Pay Period: 1/1/16 - 1/15/16","StartTimezone":null,"Start":"\/Date(1453161600)\/","End":"\/Date(1453248000)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":7,"OwnerID":2,"Title":"Approve Payments","Description":"Pay Period: 1/1/16 - 1/15/16","StartTimezone":null,"Start":"\/Date(1453248000)\/","End":"\/Date(1453334400)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":8,"OwnerID":2,"Title":"Foster Phone In","Description":"Pay Period: 1/1/16 - 1/15/16","StartTimezone":null,"Start":"\/Date(1453334400)\/","End":"\/Date(1453420800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":9,"OwnerID":3,"Title":"Residential Refresh","Description":"Refresh: 9/1/15 - 11/30/15|Final Refresh for Sept.","StartTimezone":null,"Start":"\/Date(1453248000)\/","End":"\/Date(1453334400)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":10,"OwnerID":3,"Title":"Residential Pay Run ","Description":"Pay Period: 12/1/15 - 12/31/15|December 2015","StartTimezone":null,"Start":"\/Date(1452038400)\/","End":"\/Date(1452124800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":11,"OwnerID":3,"Title":"Residential Pay Run ","Description":"Pay Period: 12/1/15 - 12/31/15|December 2015","StartTimezone":null,"Start":"\/Date(1452124800)\/","End":"\/Date(1452211200)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":12,"OwnerID":3,"Title":"Residential Refresh","Description":"Refresh: 9/1/15 - 11/30/15|Sept. thru Dec. 2015","StartTimezone":null,"Start":"\/Date(1452211200)\/","End":"\/Date(1452297600)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"}]
Data do not seem to be correct , I made an example.
I think the problem is with the start and end dates, they are not consistent.
var YourData =[{"TaskID":1,"OwnerID":2,"Title":"Bowling tournament","Description":"","StartTimezone":null,"Start":"\/Date(1370811600000)\/","End":"\/Date(1453420800)\/","EndTimezone":null,"RecurrenceRule":null,"RecurrenceID":null,"RecurrenceException":null,"IsAllDay":false}];
var NewData =[{"TaskID":1,"OwnerID":2,"Title":"Bowling tournament","Description":"","StartTimezone":null,"Start":"\/Date(1453334400)\/","End":"\/Date(1370822400000)\/","EndTimezone":null,"RecurrenceRule":null,"RecurrenceID":null,"RecurrenceException":null,"IsAllDay":false}];
YourData dont work, but the NewData is working, I just test with first item.
Here the example.
http://dojo.telerik.com/uTOQe
Hope this help