Maximum call stack size exceeded

[Shivani]

Hello,

I found this error in the console. 
I am using DataGrid in Vue. Before everything was normal when I use check box and date in Data Grid in Vue after that I can see this error.
Please advise me.

here is my package.json

[Balaji Sekar]

Hi Shivani, 

 

Greetings from the Syncfusion support. 

 

Before proceeding further, we need more details about the reported problem so, please share that details to us it will help to validate further. 

1. You have mentioned checkbox and date component are used in your application, those component are bind in column template or edit template.
2. Please share the Grid rendering code definition with that component defined code also.
3. Share video demonstration of the problem
4. Share a sample with issue replication, if possible

 

Regards, 

Balaji Sekar 

[Shivani]

<ejs-grid 

                                        id="Grid"

                                        ref='grid' 

                                        :dataSource="locationList" 

                                        :editSettings='editSettings' 

                                        :dataBound='dataBound' 

                                        :allowPaging="allowPaging" 

                                        :pageSettings='pageSettings'

                                        :allowReordering='true' 

                                        :allowSorting='true'

                                        

                                        :actionBegin="onActionBegin"

                                        :selectionSettings='selectionOptions'

                                        :rowSelected="rowSelected"

                                        :rowDeselected="rowDeselected"

                                        :actionComplete="onActionComplete"

                                    >

<e-columns>

<e-column field='District' :headerText='localizedArray.Lbl.district' ></e-column>

                                            <e-column field='Area' :headerText='localizedArray.Lbl.area' ></e-column>

                                            <e-column field='DateClosed' :headerText='localizedArray.Lbl.dateClosed' :validationRules='dateCloseRules' editType= 'datepickeredit' :format='dateFormat' ></e-column>

                                            <e-column field='DateOpen' :headerText='localizedArray.Lbl.dateOpen' :validationRules='dateOpenRules' editType= 'datepickeredit' :format="dateFormat" ></e-column>

</e-columns> 

                                    </ejs-grid>

I am using Data Grid in Vue.

this is for check box

<e-column field='AlwNeg' :headerText='localizedArray.Lbl.alwNeg' :validationRules='alwNegRules' displayAsCheckBox='true' editType="booleanedit" type="boolean" textAlign="Center"></e-column>

Attachment: CallStack_48a8f235.rar

[Balaji Sekar]

Hi Shivani, 

 

We have validated the reported problem and we are unable to reproduce it so, please share us the following additional information so that we can identify the reported problem in your exact use case,  

• You have used dataBound event, could you please share the code definition
• Have you bound date column value in date or string, if you use string type, please share the Grid currentViewData
• If possible share us a simple sample to better understand your problem scenario.
• Ensure Syncfusion package version.

Let us know if you have any concerns.  

Regards, 

Balaji Sekar 

[Shivani]

Ensure Syncfusion package version.

I attached video for better understand. As I used drop-down list, date, checkbox in the Data grid in Vue.

You have used dataBound event, could you please share the code definition -- I am not using Data Bound.

<ejs-grid 

                                        id="Grid"

                                        ref='grid' 

                                        :dataSource="paymentTermList" 

                                        :editSettings='editSettings' 

                                        :allowPaging="allowPaging" 

                                        :pageSettings='pageSettings'

                                        :allowReordering='true' 

                                        :allowSorting='true'

                                        

                                        :actionBegin="onActionBegin"

                                        :selectionSettings='selectionOptions'

                                        :rowSelected="rowSelected"

                                        :rowDeselected="rowDeselected"

                                        :actionComplete = "onActionComplete"

                                    >

                                        <e-columns>

                                            <e-column field='TermCode1' type='checkbox' width=30 :visible='false'></e-column>

                                            <e-column field='PaymentTermCode' :headerText='localizedArray.Lbl.termCode' :isPrimaryKey="true" :validationRules='termCodeRules'></e-column>

                                            <e-column field='PaymentTermDescription' :headerText='localizedArray.Lbl.termDesc' :validationRules='termDescRules'></e-column>

                                            <e-column field='PaymentTermDays' :headerText='localizedArray.Lbl.dayCount' :validationRules='dayCountRules' editType= 'numericedit'  format='N' textAlign='Right'></e-column>

                                            <e-column field='DayMonth' :headerText='localizedArray.Lbl.dayMth' :validationRules='dayMthRules'></e-column>

                                            <e-column field='CountFrom' :headerText='localizedArray.Lbl.countFrom' :validationRules='countFromRules'></e-column>

                                            <e-column field='PaymentTermWeight' :headerText='localizedArray.Lbl.termWeight' :validationRules='termWeightRules' editType= 'numericedit'  format='N' textAlign='Right'></e-column>

                                            <e-column field='Retail_TradeDiscount' :headerText='localizedArray.Lbl.retailTradeDisc' :validationRules='retailTradeRules' editType= 'numericedit' :edit='numericParams' textAlign='Right'></e-column>

                                            <e-column field='Vendor_TradeDiscount' :headerText='localizedArray.Lbl.vendorTradeDisc' :validationRules='vendorTradeRules' editType= 'numericedit' :edit='numericParams' textAlign='Right'></e-column>

                                            <e-column field='Print' :headerText='localizedArray.Lbl.print' displayAsCheckBox='true' editType="booleanedit" type="boolean" textAlign="Center"></e-column>

                                            <e-column field='PrePaid' :headerText='localizedArray.Lbl.prePaid' displayAsCheckBox='true' editType="booleanedit" type="boolean" textAlign="Center"></e-column>

                                        </e-columns> 

                                    </ejs-grid>

Attachment: maximum_64dde39c.rar

[Balaji Sekar]

Hi Shivani,  

  

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.     

https://www.syncfusion.com/account/login  

  

Regards,  

Balaji Sekar 

[Martin Sagat]

Hi,

Has this been resolved? I ran into the same issue, I am using the scheduler component, getting the same error.

Thank you,

Kind Regards

Martin

[Hareesh Balasubramanian]

Hi Martin, 

Thanks for the update. 

We have validated your shared query at our end and suspect that you may not include scheduler modules inside the “provide” method, which could be the reason for your reported script error “Maximum call stack size exceed issue for scheduler”. And for the same, we have prepared a sample that is properly rendering at our end, it can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-1493380037  

UG link: https://ej2.syncfusion.com/vue/documentation/schedule/getting-started/#getting-started  

<template> 

<ejs-schedule ref="ScheduleObj" width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings' height='540px'> 

    <e-views> 

        <e-view option='Week'></e-view> 

        <e-view option='WorkWeek'></e-view> 

        <e-view option='Month'></e-view> 

    </e-views> 

</ejs-schedule> 

</template> 

<script> 

import Vue from 'vue'; 

import { 

    scheduleData 

} from './datasource.js'; 

import { 

    extend 

} from '@syncfusion/ej2-base'; 

import { 

    SchedulePlugin, 

    WorkWeek, 

    Month, 

    Week, 

    DragAndDrop, 

    Resize 

} from '@syncfusion/ej2-vue-schedule'; 

Vue.use(SchedulePlugin); 

export default { 

    data() { 

        return { 

            eventSettings: { 

                dataSource: extend([], scheduleData, null, true), 

            }, 

            selectedDate: new Date(2018, 1, 15) 

        } 

    }, 

    methods: {}, 

    provide: { 

        schedule: [WorkWeek, Month, Week, DragAndDrop, Resize] 

    } 

} 

</script> 

Kindly check whether you have import necessary modules and include it in provide at your end and get back to us if you need any further assistance. 

Regards, 

Hareesh