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

[Michael Kornatzki]

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

[Prasanna Kumar Viswanathan]

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 

[Michael Kornatzki]

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

[Dhivya Rajendran]

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. 

<template> 

  <div id="app"> 

    <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 

[Michael Kornatzki]

Hi,

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

Now it works :)

Kind regards,

michael

[Prasanna Kumar Viswanathan]

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 

[Michael Kornatzki]

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

[Prasanna Kumar Viswanathan]

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