Grid Error w/ Vue — Cannot read property 'beforeLoadComplete' of undefined"

[mikeericksonParticipant]

Hello

I am now moving from the test project which was created based from your demos into my application.

I have everything configured correctly so far as I can tell, but I am receiving an error when trying to view in my application

When the page loads, I receive error in browser

crm.js:144455 [Vue warn]: Error in data(): “TypeError: Cannot read property ‘beforeLoadComplete’ of undefined”

found in

—> <Crm> at resources/js/components/crm/CRM.vue
<Root>

Here is my component (note, the jqwidgets css is being loaded in the page which calls this component)

`vue

<template>
<div class=”crm-container”>
<div class=”crm-detail” style=”display: block”>
<JqxGrid
ref=”crm-people-grid”
height=”100%”
width=”100%”
:source=”peopleAdapter”
selectionmode=”multiplerows”
:columns=”peopleColumns”
:sortable=”true”
theme=”light”
></JqxGrid>
</div>
</div>
</template>

<script>
import JqxGrid from “jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue”

export default {
components: { JqxGrid },
props: {
config: { type: String, default: “” },
},
data() {
return {
peopleAdapter: new jqx.dataAdapter(this.peopleList),
peopleColumns: [
{ text: “ID”, datafield: “id”, hidden: true },
{ text: “Name”, datafield: “full_name” },
],
}
},
beforeCreated() {
this.peopleList = {
datatype: “array”,
localdata: [{id: 1, full_name: “Mike Erickson”}],
datafields: [
{ name: “id”, type: “number” },
{ name: “full_name”, type: “string” },
],
}
},
}
</script>
<style scoped lang=”scss”>
</style>

`

[adminKeymaster]

Hi,

There is syntax error in the provided code in two places “{ name: “full_name”, type: “string” },” the “,” should be removed. The “,” on the next line should be removed, too.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts