This is a migrated thread and some comments may be shown as answers.

Grid Columns Misalign on Window Resize

3 Answers 22 Views
This is a migrated thread and some comments may be shown as answers.
Faisal
Top achievements
Rank 1
Faisal asked on 14 Jun 2019, 11:24 AM

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.

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 18 Jun 2019, 12:29 PM
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:


What I am missing to reproduce the behavior?


Regards,
Georgi
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Faisal
Top achievements
Rank 1
answered on 22 Jun 2019, 12:54 AM

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.

0
Georgi
Telerik team
answered on 25 Jun 2019, 01:05 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Faisal
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Faisal
Top achievements
Rank 1
Share this question
or