How can i use my own vue-component as cell renderer?

Michael Kornatzki

Asked On January 20, 2020 01:06 PM UTC

Hi,

i have wrapped the numeric input field as a component and want to use it as a cell renderer.

How can i do this?

The example in https://ej2.syncfusion.com/vue/documentation/grid/edit/#cell-edit-template didn't help me because there is an html inputfield used.

i tried to create an instance of my vue-component but then i get the following error:

Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined

it happened in edit-renderer.js line 192

var isInput = input.tagName !== 'input' && input.querySelectorAll('input').length;

How can i use my own vue-components as a cell editor?

Kind regards,

michael

Reply | Reply with quote

Prasanna Kumar Viswanathan [Syncfusion]

Replied On January 21, 2020 07:28 AM UTC

Hi Michael,

Thanks for contacting Syncfusion support.

Based on your query that you need to use your own Vue component as cell renderer while editing. You can use your own Vue component as edit cell renderer by using editTemplate property of the EJ2 Grid column.

Please refer the below documentation link for more information.

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/edit/#using-template

If you still face the same issue, please share complete Grid code example it will help us to provide the solution ASAP.

Regards,

Prasanna Kumar N.S.V

Reply | Reply with quote

Michael Kornatzki

Replied On January 22, 2020 11:26 AM UTC

Hi Prassana,

sorry, the information was on the same page :(

But i have a problem with this.

I try to use a vue component as an editor without success.

If i dblClick in cell of the column"Freight" then the cellEditor opens with the rendered value but if i leave the editor the datasource didn't get updated by the entered value.

https://codesandbox.io/s/simpletable-f2b8k

Kind regards,

michael

Reply | Reply with quote

Dhivya Rajendran [Syncfusion]

Replied On January 23, 2020 06:49 AM UTC

Hi Michael,

Thanks for your update.

By default while using editTemplate it is necessary to that the custom components have the corresponding fieldname as their id. So that grid can parse modified value from the input component while saving.

Please find the below modified code example and sample for more information.

<ejs-grid :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" height="273px">

. . .

<e-column

field="Freight"

headerText="Freight"

textAlign="Right"

editType="numericedit"

width="120"

format="C2"

:editTemplate="editTemplate"

></e-column>

. . .

},

methods: {

editTemplate: function() {

return {

template: Vue.component("numericInput", {

components: { NumericTextBoxComponent },

template: `<numeric-text-box-component id="Freight" v-model="data.Freight" floatLabelType='Never'></numeric-text-box-component>`,

data() {

return { data: {} };

}

})

. . .

Sample: https://codesandbox.io/s/simpletable-modified-u87q0

Please let us know, if you need further assistance.

Regards,

R. Dhivya

Reply | Reply with quote

Michael Kornatzki

Replied On January 23, 2020 07:14 AM UTC

Hi,

great, thank you but this isn't documented anywhere, is ist?

Now it works :)

Kind regards,

michael

Reply | Reply with quote

Prasanna Kumar Viswanathan [Syncfusion]

Replied On January 24, 2020 10:31 AM UTC

Hi Michael,

We are happy to hear that your issue has been resolved.

As per your suggestion we will document the updated solution and it will be refreshed in online ASAP.

Regards,

Prasanna Kumar N.S.V

Reply | Reply with quote

Michael Kornatzki

Replied On January 29, 2020 07:27 AM UTC

I saw in some examples that the editorTemplate was a vue-Component.

i.e. (https://www.syncfusion.com/forums/143838/edit-template, https://www.syncfusion.com/forums/148996/edittemplate-on-datagrid-return-custom-component-in-function-and-register-event)

Is it possible to set a property of the component?

Something like

editTemplate: function() {
    return {
      template: VxTableCellEditorCheckbox (prop: <VALUE FOR PROPERTY>)
    };

Kind regards

Michael

Reply | Reply with quote

Prasanna Kumar Viswanathan [Syncfusion]

Replied On January 30, 2020 01:03 PM UTC

Hi Michael,

Thanks for your update.

By default the editTemplate is used to render a custom component while editing. We suspect you want to set some default values to the particular component. If yes, then you can directly set the value of the particular component as like below. Find the below code snippets for your reference.

[code snippets]

editTemplate: function() {

return {

template: Vue.component("numericInput", {

components: { NumericTextBoxComponent },

template: `<numeric-text-box-component id="Freight" value="10" floatLabelType='Never'></numeric-text-box-component>`, //set default value when adding the record

data() {

return { data: {} };

}

})

};

}

If it does not meet your requirement or if we misunderstood your requirement, then could you please share more information about your requirement. It will be helpful to validate and provide a solution.

Regards,

Prasanna Kumar N.S.V

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150797	Jan 20,2020 01:06 PM UTC	Jan 30,2020 01:03 PM UTC	Vue	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US