We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150797 Jan 20,2020 01:06 PM UTC Jan 30,2020 01:03 PM UTC Vue 7
loading
Tags: Data Grid
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

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. 
 
 
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
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.


Kind regards,
michael




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. 

<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: {} }; 
          } 
        }) 
. . . 



Please let us know, if you need further assistance. 

Regards, 
R. Dhivya 


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





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 


Michael Kornatzki
Replied On January 29, 2020 07:27 AM UTC

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

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 [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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon