What is the Type of the data returned by a column template?

[Ryan Sereno]

When using a column template, the data object gets passed into the template.
This data object contains everything in the grid's input data type, but also some extra values like index, column, and foreignKeyData


        <e-column
          field="isSel"
          :template="'printSubtotalTemplate'"
        >
          <template v-slot:printSubtotalTemplate="{ data }">
            <input
              type="checkbox"
              v-model="data.printSubtotal"
              @change="handleChange(data)"
            />
          </template>
        </e-column>

How should I type this object?
I don't see importable interfaces/types from syncfusion that cover this.
I assume it would look something like this?

export interface IGridRowData<T> extends T {

  column?: Object;

  foreignKeyData?: Object;

  index?: string;

}

[Johnson Soundararajan S]

Hi Ryan Sereno,

While using column template, we pass the data of the grid row, the details of the columns, and an index for further access. We haven't provided specific TypeScript types for the data object passed into the column template.

You may need to define your own interface based on your understanding of the data structure. By doing so, you can utilize it for type checking and IntelliSense in your Vue component.

Please refer to the below sample and code snippet for more information.  

Code sample : 

App,vue

 

interface RowDetails {

  Address: string;

  BirthDate: Date;

  City: string;

  Country: string;

  EmailID: string;

  EmployeeID: boolean;

  EmployeeImage: string;

  Extension: string;

  FirstName: string;

  HireDate: Date;

  HomePhone: string;

  LastName: string;

  Notes: string;

  Photo: object;

  PhotoPath: string;

  PostalCode: string;

  Region: string;

  ReportsTo: number;

  Title: string;

  TitleOfCourtesy: string;

}
 

interface ColumInterface {

  column: ColumnModel;

}

 

interface ColumITemplate extends RowDetails, ColumInterface{

  index: number;

}

 

methods: {

  handleChange(data: ColumITemplate) {

     console.log('Checkbox changed:', data);

  },

},

Sample : my_vue_sample.zip

Please get back to us, if you need further assistance.

Regards,

Johnson Soundararajan S

Attachment: my_vue_sample_bc032b89.zip