I am working with a Vue component that is imported in a component file. My goal is to render another component using the append function. How can I achieve this?
<template>
<JqxGrid :width="width" :source="dataAdapter" :columns="gridValues"
:pageable="true" :autoheight="true" :sortable="true"
:altrows="true" :enabletooltip="true" :editable="true"
:selectionmode="'multiplecellsadvanced'" :showtoolbar="true" :rendertoolbar="rendertoolbar">
</JqxGrid>
</template>
<script>
import JqxGrid from "../jqx-vue/vue_jqxgrid.vue";
import Button from "./buttonComponent.vue";
methods: {
rendertoolbar: function (toolbar) {
// I am attempting to add another component here using the append function, but it is not rendering as expected.
toolbar.append($("<span style='margin: 5px;'> <jqx-button class='custom-erp-button custom-btn-secondary' :button-name="+`Add`+"></jqx-button> </span>"));
},
cellsrenderer: function (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
if (value < 20) {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
}
else {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
}
}
}
</script>
<style>
</style>