Slow grid rendering when rowTemplate with datepickers used

[Andrew Mandruk]

In Data Grid, when i use rowTemplate component with datepickers inside - there is a strong slowdown of the grid rendering. 

Especially if i want to use pageSize = 100, then time for grid loading increases in several time. 

Grid rendering speed - 10 rows  < 1 second

Grid rendering speed - 100 rows  ~5 second

Is it possible, in some way, to improve grid loading speed, so that the time is the same for 100 and 10 lines?

Example:

Grid itself:

                                <ejs-grid

                                    ref="grid"

                                    :allowPaging="true"

                                    :allowSelection="true"

                                    :dataSource="results"

                                     :pageSettings="{pageSize: 100}"

                                    :allowSorting="true"

                                    :allowExcelExport="true"

                                    :rowTemplate="rowComponent"

                                >

                                    <e-columns>

                                        <e-column type="checkbox" width="35" />

                                        <e-column

                                            width="15%"

                                            :field="'surname'"

                                            :headerText="surname"

                                        />

                                        <e-column

                                            width="15%"

                                            :field="'firstName'"

                                            :headerText="firstName"

                                        />

                                        <e-column

                                            :field="'createdOnAt'"

                                            :headerText="createdOnAt"

                                        />

                                        <e-column

                                            :field="'createdOnAt'"

                                            :headerText="lastLoginOnAt"

                                        />

                                    </e-columns>

                                </ejs-grid>

    rowComponent() {

        let _this = this;

        return {

            template: Vue.component("rowTemplate", {

                template: `<${rowTemplateElement} :grid="grid" :gridData="data"/>`,

                data: function() {

                    return {

                        data: {} as any,

                        grid: _this,

                    };

                },

            }),

        };

    }

rowTemplateElement template:

    <ValidationObserver

        tag="tr"

        class="e-row"

        ref="observer"

    >

        <td class="readonly-cell">

            <input type='checkbox' v-model="checkbox"  ref="checkbox" >

        </td>

        <td>

            <ejs-textbox v-model="gridData.surname"/>

        </td>

        <td>

            <ejs-textbox v-model="gridData.firstName"/>

        </td>

        <td>

            <ejs-textbox v-model="gridData.surname" />

        </td>

        <td>

            <ejs-datepicker

                name="datepicker"

                v-model="gridData.createdOnAt"

            ></ejs-datepicker>

        </td>

    </ValidationObserver>

[Shalini Maragathavel]

Hi Andrew, 

Greetings from Syncfusion support. 

Based on your query we found that you are facing the performance issue when render the DatePicker component by using rowTemplate with loading large number of data’s in the Grid.  

If the row template contains component like EJS-Datepicker then the control will be rendered in each and every row of the grid.  

If we load 100 rows in one page then for each row the DatePicker component should be rendered (it take some time for each component rendered), so it will take some time which leads performance issue.  

So to overcome this issue,we suggest you to reduce the page size ( i.e., 20 or 30) of the Grid to increase the performance. 

Please check below sample for your reference: 

Sample : https://codesandbox.io/s/vue-8f8zu?file=/src/App.vue 

Please refer the below documentation link for more information. 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/paging/ 

Regards, 

Shalini M.