[Vuejs]-How can I add a vue component in kendo grid custom editor?

0👍

I have found the solution:

methods:{
    qrcodeEditor: function(container, options) {
        // An <input> element is required for binding data
        let input = $(`<input data-bind="value:${options.field}" class="k-textbox width-50"/>`);
        input.appendTo(container);

        // use Vue.extend to make a component constructor, and new a component
        let qrcodeCapture = new (Vue.extend(QrcodeCapture))();
        qrcodeCapture.$on("decode", decodedString => {
            input.val(decodedString).trigger("change");
            // Trigger "change" element to tell kendo that you have change the data
        });
        qrcodeCapture.$mount();
        container.append(qrcodeCapture.$el);
    },
}

Leave a comment