<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) {
        // this is where I am trying to add the other component but it is not rendering as a actual component, it is just spitting out as it is.
            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>