bind dropdown in grid cell template using store

[Kamlesh]

Hi

I want to bind a dropdown list in a grid using cell template.

While using state in a cell template I am getting error store state is undefined.

Cell template is something like below.

const cellPurchaseCategoryTemplate = Vue.extend({
    props: {
        field: String,
        dataItem: Object,
        format: String,
        className: String,
        columnIndex: Number,
        columnsCount: Number,
        rowType: String,
        level: Number,
        expanded: Boolean,
        editor: String
    },
    computed: {
        purchaseCategoryList(): Array<CategoryChildCodeData> {
            if (this.purchaseCategories) {
                return Utility.cloneObject(this.purchaseCategories);
            }
        },
        ...invoiceApprovalStoreHelpers.mapState(["purchaseCategories"])
    },
    template: `<td>
                <cvc-autocomplete v-model="dataItem.category"
                                  v-bind:data-source="purchaseCategoryList"
                                  v-bind:name="assignFieldName(field, dataItem)"
                                  v-validate="'required'"                        
                                  data-vv-as="Purchase Category">
                </cvc-autocomplete>
            </td>`
});
export default cellPurchaseCategoryTemplate;

[Ianko]

Hi Kamlesh,

With the Vue wrappers the templates are compiled runtime and the state management is not tiredly accessible. Typically, you should be able to achieve that by referencing the parent component. Like mentioned in the third point in this article: https://www.telerik.com/kendo-vue-ui/components/framework/vue-templates/#toc-using-single-file-components. 

As Grid is involved, I can suggest you to take a look at the native Grid got Vue. It uses native custom renderers that would be much more helpful for this case: https://www.telerik.com/kendo-vue-ui/components/grid-native/custom-rendering/custom-cells/

Regards,
Ianko
Progress Telerik