This is a migrated thread and some comments may be shown as answers.

bind dropdown in grid cell template using store

1 Answer 49 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kamlesh
Top achievements
Rank 1
Kamlesh asked on 01 May 2019, 03:09 PM

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;

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 03 May 2019, 07:45 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Kamlesh
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or