Grid Columns Misalign on Window Resize

[Faisal]

I have made a kendo grid using the following code:

                                <kendo-grid v-bind:data-source="getEscalations"
                                            v-bind:sortable-mode="'multiple'"
                                            v-bind:sortable-allow-unsort="true"
                                            v-bind:sortable-show-indexes="true"
                                            v-bind:height="250"
                                            v-bind:resizable="true"
                                            v-bind:sort="sortEscalationTable">
                                    <kendo-grid-column field="xxx" title="XXX">
                                    </kendo-grid-column>
                                    <kendo-grid-column field="yyy" title="YYY">
                                    </kendo-grid-column>
                                </kendo-grid>

the problem is that columns get misaligned when window is resized. I have to refresh the window to resize them again. Is there a flag or other way to keep them aligned on resize. Please take a look at the image. Thanks.

[Georgi]

Hi Faisal,

I have tested the same on my end but the columns do not seem to be misaligned when I resize the window. Below you will find the sample I used for testing:

• https://stackblitz.com/edit/jbgnem?file=index.html

What I am missing to reproduce the behavior?


Regards,
Georgi
Progress Telerik

[Faisal]

Thanks for the answer Georgi.

I had it resolved using a new flag call `isResizing` flag inside v-if. Here is what I did with this flag:

1. add v-if to kendo-grid like:

    <kendo-grid v-if="!isResizing" ........./>

2. Setting the flag to true while resizing is taking place. This hides the above grid while resizing is taking place.

3. After resizing is complete. I set isResizing to false. This redisplays the kendogrid with correct alignments. I guess what it does is it redraws the grid with correct measurements.

I took the resize code from here and merged it with this.

Thanks again.

[Georgi]

Hi Faisal,

Thanks for sharing your solution with the community.

Just on a side note, instead of hiding and showing the grid you might be able to achieve the same by calling the resize method after the window resizing has finished. 


Regards,
Georgi
Progress Telerik