Reply To: Vue Data Grid — getting “[object][Object]” in a column

June 8, 2023 at 7:58 pm #107207

Participant

Thanks for the quick response!

I think this is what you need?

(Side issue: Note that many of my data fields have names like Teams--Agent-hiring-3-week when I would prefer Teams: Agent hiring 3 week but the examples don’t show how to handle colons and spaces in these names. If there’s a way, I’d like to use it.)

<div>
<div> mounted: function () {</div>
<div></div>
<div> let partnerData = this.getPartnerData()</div>
<div> window.Smart(</div>
<div> “#grid”, class {</div>
<div> get properties() {</div>
<div> return {</div>
<div> columns: [</div>
<div> { label: ‘Company Name’, dataField: ‘Company–Name’, freeze: true },</div>
<div> { label: ‘Partner Code’, dataField: ‘Company–Partner code’, columnGroup: ‘company’ },</div>
<div> { label: ‘Quickbooks Vendor ID’, dataField: ‘Company–Quickbooks vendor ID’, columnGroup: ‘company’ },</div>
<div> { label: ‘Website’, dataField: ‘Company–Website’, columnGroup: ‘company’ },</div>
<div> { label: ‘Primary contact’, dataField: ‘Company–Primary-contact’, columnGroup: ‘company’ },</div>
<div> { label: ‘Primary title’, dataField: ‘Company–Primary-contact-title’, columnGroup: ‘company’ },</div>
<div> { label: ‘Primary email’, dataField: ‘Company–Primary-contact-email’, columnGroup: ‘company’ },</div>
<div> { label: ‘Primary phone’, dataField: ‘Company–Primary-contact-phone’, columnGroup: ‘company’ },</div>
<div> { label: ‘Smallest team’, dataField: ‘Teams–Smallest-team-size’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Average team’, dataField: ‘Teams–Average-team-size’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Largest team’, dataField: ‘Teams–Largest-team-size’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Can hire in 1 week’, dataField: ‘Teams–Agent-hiring-1-week’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Can hire in 2 weeks’, dataField: ‘Teams–Agent-hiring-2-week’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Can hire in 3 weeks’, dataField: ‘Teams–Agent-hiring-3-week’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Can hire in 1 month’, dataField: ‘Teams–Agent-hiring-1-month’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Full-time’, dataField: ‘Teams–Agents-percent-full-time’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Part-time’, dataField: ‘Teams–Agents-percent-part-time’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Remote’, dataField: ‘Teams–Agents-percent-remote’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘On-Site’, dataField: ‘Teams–Agents-percent-on-site’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Shared’, dataField: ‘Teams–Agents-percent-shared’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Dedicated’, dataField: ‘Teams–Agents-percent-dedicated’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Offer Shared’, dataField: ‘Teams–Offer-shared-services’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Functions’, dataField: ‘Ops–Functions-performed’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Geographies’, dataField: ‘Ops–Geographies-served’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Skillsets’, dataField: ‘Ops–Skillsets-provided’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Channels’, dataField: ‘Ops–Channels-provided’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Hours of Oper.’, dataField: ‘Ops–Hours-of-operations’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Other Funcs.’, dataField: ‘Ops–Other-functions-performed’, columnGroup: ‘operations’ },</div>
<div> { label: ’24/7 Oper.?’, dataField: ‘Ops–Support-24-7-operations’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Languages’, dataField: ‘Ops–Languages-served’, columnGroup: ‘operations’ },</div>
<div> {</div>
<div> label: ‘Lang+Proficiency’, dataField: ‘Ops–Languages-and-proficiency’, columnGroup: ‘operations’,</div>
<div> // template: function(formatObject) {</div>
<div> // //console.log(“formatObject.value”, formatObject.value.length);</div>
<div> // //formatObject.template = <div>${formatObject.template}</div>;</div>
<div> // }</div>
<div> },</div>
<div> ],</div>
<div> sorting: {</div>
<div> enabled: true</div>
<div> },</div>
<div> filtering: {</div>
<div> enabled: true</div>
<div> },</div>
<div> header: {</div>
<div> visible: true</div>
<div> },</div>
<div> appearance: {</div>
<div> alternationCount: 2,</div>
<div> showRowHeader: true,</div>
<div> showRowHeaderSelectIcon: true,</div>
<div> showRowHeaderFocusIcon: true,</div>
<div> allowHover: true,</div>
<div> },</div>
<div> behavior: {</div>
<div> columnResizeMode: ‘growAndShrink’,</div>
<div> allowColumnReorder: true</div>
<div> },</div>
<div> columnGroups: [</div>
<div> { label: ‘Company’, align: ‘center’, name: ‘company’ },</div>
<div> { label: ‘Agent Teams and Composition’, align: ‘center’, name: ‘teams’ },</div>
<div> { label: ‘Operations’, align: ‘center’, name: ‘operations’ }</div>
<div> ],</div>
</div>

<div>

<div> dataSource: new window.Smart.DataAdapter(</div>

</div>

<div>
<div> {</div>
<div> dataSource: partnerData,</div>
<div> dataFields: [</div>
<div> ‘Company–Name: string’,</div>
<div> ‘Company–Partner code: string’,</div>
<div> ‘Company–Quickbooks vendor ID: int’,</div>
<div> ‘Company–Website: string’,</div>
<div> ‘Company–Primary-contact: string’,</div>
<div> ‘Company–Primary-contact-title: string’,</div>
<div> ‘Company–Primary-contact-email: string’,</div>
<div> ‘Company–Primary-contact-phone: string’,</div>
<div> ‘Teams–Smallest-team-size: number’,</div>
<div> ‘Teams–Average-team-size: number’,</div>
<div> ‘Teams–Largest-team-size: number’,</div>
<div> ‘Teams–Agent-hiring-1-week: number’,</div>
<div> ‘Teams–Agent-hiring-2-weeks: number’,</div>
<div> ‘Teams–Agent-hiring-3-weeks: number’,</div>
<div> ‘Teams–Agent-hiring-1-month: number’,</div>
<div> ‘Teams–Agents-percent-full-time: number’,</div>
<div> ‘Teams–Agents-percent-part-time: number’,</div>
<div> ‘Teams–Agents-percent-remote: number’,</div>
<div> ‘Teams–Agents-percent-on-site: number’,</div>
<div> ‘Teams–Agents-percent-shared: number’,</div>
<div> ‘Teams–Agents-percent-dedicated: number’,</div>
<div> ‘Teams–Offer-shared-services: bool’,</div>
<div> ‘Ops–Functions-performed: string’,</div>
<div> ‘Ops–Geographies-served: string’,</div>
<div> ‘Ops–Skillsets-provided: string’,</div>
<div> ‘Ops–Channels-provided: string’,</div>
<div> ‘Ops–Hours-of-operations: string’,</div>
<div> ‘Ops–Other-functions-performed: string’,</div>
<div> ‘Ops–Support-24-7-operations: string’,</div>
<div> ‘Ops–Languages-served: string’,</div>
<div> ‘Ops–Languages-and-proficiency: string’,</div>
<div> ]</div>
<div></div>
<div> })</div>
<div> }</div>
<div> }</div>
<div> }</div>
<div> );</div>
<div></div>
<div> const grid = document.querySelector(“smart-grid”);</div>
<div> const xlsxBtn = document.querySelector(“#xlsxBtn”);</div>
<div> xlsxBtn.addEventListener(“click”, () => {</div>
<div> grid.exportData(“xlsx”);</div>
<div> });</div>
<div></div>
<div> }</div>
</div>