Data grid with CheckBoxComponent template error

[hai shi tan]

I am getting this error when I put checkbox inside the grid with column template.  Screenshot attached.

GET http://localhost:5173/node_modules/.vite/deps/@syncfusion_ej2-vue-buttons.js?v=71398bd0

Status: 504 Outdated Optimize Dep

Loading module from “http://localhost:5173/node_modules/.vite/deps/@syncfusion_ej2-vue-buttons.js?v=71398bd0” was blocked because of a disallowed MIME type (“”)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/node_modules/.vite/deps/@syncfusion_ej2-vue-buttons.js?v=71398bd0. (Reason: CORS request did not succeed). Status code: (null)

<template>

    <div class="col-lg-12 control-section">
        <GridComponent
            ref="grid"
            :dataSource="data"
            allowPaging="true"
            :pageSettings="pageSettings"
            allowSorting="true"
            allowFiltering="true"
            :filterSettings="filterSettings"
            :editSettings="editSettings"
            :toolbar="toolbar"
            :actionComplete="actionComplete"
            :actionBegin="actionBegin"
            :rowDataBound='rowDataBound'
        >
...
                <ColumnDirective
                    field="active"
                    headerText="Active"
                    width="120"
                    textAlign="Center"
                    type="boolean"
                    :template="'activeTemplate'"
                ></ColumnDirective>
            </ColumnsDirective>
          <template v-slot:activeTemplate="{data}">
            <CheckBoxComponent :checked="data.active"></CheckBoxComponent>
          </template>

Attachment: Screenshot_20241227_000435_7d192e03.zip

[Santhosh Iruthayaraj]

Hi hai shi tan,

Greetings from Syncfusion Support.

Based on the information you have provided, we have created a sample demonstrating the integration of the Grid component with a CheckBox component rendered inside a column template and the CheckBox component was rendered successfully without any issues. Please refer to the screenshot below for your reference:

[preview]

We have attached the sample below for your reference.

We recommend reviewing the provided sample to ensure the proper implementation of the Grid component with the CheckBox component template. You can also refer to our documentation for additional guidance:

Documentation: Render other components in a column | Syncfusion

If the issue persists despite following the provided sample, we kindly request you to reproduce the issue in the attached sample or share a sample that demonstrates the issue. This will enable us to analyze the scenario and provide a precise solution.

Regards,

Santhosh I

Attachment: vue_grid_app_42cf9a4e.zip

[hai shi tan]

Hi

Thanks for your feedback.  Your sample work well.  The only thing I do to my original code is add in 

editType="booleanedit" and restart my vue.  All are running goo

[Santhosh Iruthayaraj]

Hi hai shi tan,

We are pleased to know that the provided solution was helpful in resolving the issue. Please let us know if you require any further assistance.

Regards,
Santhosh I