Rendering the last column of Grid panel Ext.Net

Question

1) In some cases the last column of Grid panel do not render correctly. Please take a look at the following image.

enter image description here

What is the problem?

Here are the markup codes:

 <ext:Panel ID="pnl_DataView_EconomicArrange" runat="server" Width="850" Height="600" Title="Economic"
                                Padding="6" Layout="FitLayout">
                                <Content>
                                    <ext:GridPanel ID="GV_EconomicArrange" runat="server" Height="560" Width="840" Title="Economic"
                                        AutoScroll="True" Border="True" Header="false" TrackMouseOver="true" Cls="gridFont"
                                        Layout="FitLayout" AutoExpandColumn="MDate"  StripeRows="true"  >

                                <Store>
                                            <ext:Store ID="Store_DataView" runat="server">
                                                <Reader>
                                                    <ext:JsonReader IDProperty="EconomivArrange">
                                                        <Fields>
                                                            <ext:RecordField Name="LowPrice" />
                                                            <ext:RecordField Name="HighPrice" />
                                                            <ext:RecordField Name="H1_Integrated" />
                                                            <ext:RecordField Name="H2_Integrated" />
                                                            <ext:RecordField Name="H3_Integrated" />
                                                            <ext:RecordField Name="H4_Integrated" />
                                                            <ext:RecordField Name="H5_Integrated" />
                                                            <ext:RecordField Name="H6_Integrated" />
                                                            <ext:RecordField Name="H7_Integrated" />
                                                            <ext:RecordField Name="H8_Integrated" />
                                                            <ext:RecordField Name="H9_Integrated" />
                                                            <ext:RecordField Name="H10_Integrated" />
                                                            <ext:RecordField Name="H11_Integrated" />
                                                            <ext:RecordField Name="H12_Integrated" />
                                                            <ext:RecordField Name="H13_Integrated" />
                                                            <ext:RecordField Name="H14_Integrated" />
                                                            <ext:RecordField Name="H15_Integrated" />
                                                            <ext:RecordField Name="H16_Integrated" />
                                                            <ext:RecordField Name="H17_Integrated" />
                                                            <ext:RecordField Name="H18_Integrated" />
                                                            <ext:RecordField Name="H19_Integrated" />
                                                            <ext:RecordField Name="H20_Integrated" />
                                                            <ext:RecordField Name="H21_Integrated" />
                                                            <ext:RecordField Name="H22_Integrated" />
                                                            <ext:RecordField Name="H23_Integrated" />
                                                            <ext:RecordField Name="H24_Integrated" />
                                                            <ext:RecordField Name="MDate" />
                                                         </Fields>
                                                    </ext:JsonReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>

                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar1" runat="server">
                                                <Items>
                                                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <SelectionModel>
                                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                                        </SelectionModel>
                                        <ColumnModel>
                                            <Columns>
                                                <ext:Column Header="Low Price" Width="60" Sortable="false" DataIndex="LowPrice" />
                                                <ext:Column Header="High Price" Width="60" Sortable="false" DataIndex="HighPrice" />
                                                <ext:Column Header="H 1" Width="50" Sortable="false" DataIndex="H1_Integrated" />
                                                <ext:Column Header="H 2" Width="50" Sortable="false" DataIndex="H2_Integrated" />
                                                <ext:Column Header="H 3" Width="50" Sortable="false" DataIndex="H3_Integrated" />
                                                <ext:Column Header="H 4" Width="50" Sortable="false" DataIndex="H4_Integrated" />
                                                <ext:Column Header="H 5" Width="50" Sortable="false" DataIndex="H5_Integrated" />
                                                <ext:Column Header="H 6" Width="50" Sortable="false" DataIndex="H6_Integrated" />
                                                <ext:Column Header="H 7" Width="50" Sortable="false" DataIndex="H7_Integrated" />
                                                <ext:Column Header="H 8" Width="50" Sortable="false" DataIndex="H8_Integrated" />
                                                <ext:Column Header="H 9" Width="50" Sortable="false" DataIndex="H9_Integrated" />
                                                <ext:Column Header="H 10" Width="50" Sortable="false" DataIndex="H10_Integrated" />
                                                <ext:Column Header="H 11" Width="50" Sortable="false" DataIndex="H11_Integrated" />
                                                <ext:Column Header="H 12" Width="50" Sortable="false" DataIndex="H12_Integrated" />
                                                <ext:Column Header="H 13" Width="50" Sortable="false" DataIndex="H13_Integrated" />
                                                <ext:Column Header="H 14" Width="50" Sortable="false" DataIndex="H14_Integrated" />
                                                <ext:Column Header="H 15" Width="50" Sortable="false" DataIndex="H15_Integrated" />
                                                <ext:Column Header="H 16" Width="50" Sortable="false" DataIndex="H16_Integrated" />
                                                <ext:Column Header="H 17" Width="50" Sortable="false" DataIndex="H17_Integrated" />
                                                <ext:Column Header="H 18" Width="50" Sortable="false" DataIndex="H18_Integrated" />
                                                <ext:Column Header="H 19" Width="50" Sortable="false" DataIndex="H19_Integrated" />
                                                <ext:Column Header="H 20" Width="50" Sortable="false" DataIndex="H20_Integrated" />
                                                <ext:Column Header="H 21" Width="50" Sortable="false" DataIndex="H21_Integrated" />
                                                <ext:Column Header="H 22" Width="50" Sortable="false" DataIndex="H22_Integrated" />
                                                <ext:Column Header="H 23" Width="50" Sortable="false" DataIndex="H23_Integrated" />
                                                <ext:Column Header="H 24" Width="50" Sortable="false" DataIndex="H24_Integrated" />

                                                <ext:Column  Header="Date" Width="50" Sortable="false" DataIndex="MDate" Hidden="true" Hideable="false"   />
                                            </Columns>
                                        </ColumnModel>
                                        <LoadMask ShowMask="true" />

                                    </ext:GridPanel>
                                </Content>
                            </ext:Panel>

And in code behind I fill a data table and bind to store datasource.

2) What is your idea about this case: enter image description here

when I use horizontal scroll to see last columns: 1) headers are still fixed but rows are shifted. 2) two last columns style are disappeared. (please see the pink rows for more details)

and here are the markup codes:

  <ext:Panel ID="pnl_DataView" runat="server" Title="Generation Information"
                                Padding="6" Layout="FitLayout">
                                <Items>
                                    <ext:GridPanel ID="GV_DataView" runat="server" Title="Generation Information"
                                        AutoScroll="True" Border="True" Header="false" TrackMouseOver="true" Layout="FitLayout" 
                                        Cls="gridFont">
                                        <Store>
                                            <ext:Store ID="Store_DataView" runat="server">
                                                <Reader>
                                                    <ext:JsonReader>
                                                        <Fields>
                                                            <ext:RecordField Name="MDate">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="DayName">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="DayOfYear">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="UnitCode">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H1">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H2">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H3">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H4">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H5">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H6">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H7">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H8">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H9">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H10">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H11">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H12">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H13">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H14">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H15">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H16">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H17">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H18">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H19">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H20">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H21">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H22">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H23">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="H24">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="SumValue">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="Counter">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="InternalUse">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="PeakValue">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="Vacation">
                                                            </ext:RecordField>
                                                            <ext:RecordField Name="SumFlag">
                                                            </ext:RecordField>
                                                        </Fields>
                                                    </ext:JsonReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <View>
                                            <ext:GridView ID="GridView1" runat="server">
                                                <GetRowClass Fn="getRowClass" />
                                            </ext:GridView>
                                        </View>
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar1" runat="server">
                                                <Items>
                                                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <SelectionModel>
                                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                                        </SelectionModel>
                                        <ColumnModel>
                                            <Columns>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="MDate" Header="Date" Width="80"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="DayName" Header="Weeks Day"
                                                    Width="70" Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="DayOfYear" Header="Years Day"
                                                    Width="70" Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="UnitCode" Header="Unit" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H1" Header="H1" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H2" Header="H2" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H3" Header="H3" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H4" Header="H4" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H5" Header="H5" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H6" Header="H6" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H7" Header="H7" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H8" Header="H8" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H9" Header="H9" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H10" Header="H10" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H11" Header="H11" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H12" Header="H12" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H13" Header="H13" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H14" Header="H14" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H15" Header="H15" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H16" Header="H16" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H17" Header="H17" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H18" Header="H18" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H19" Header="H19" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H20" Header="H20" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H21" Header="H21" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H22" Header="H22" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H23" Header="H23" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="H24" Header="H24" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="SumValue" Header="Sum" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="Counter" Header="Counter" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="InternalUse" Header="Internal Use"
                                                    Width="50" Locked="true">
                                                </ext:Column>
                                                <ext:Column Align="Center" Sortable="true" DataIndex="PeakValue" Header="Peek" Width="50"
                                                    Locked="true">
                                                </ext:Column>
                                            </Columns>
                                        </ColumnModel>

                                        <LoadMask ShowMask="true" />
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>

I suppose the above picture says everything. If you want to know about red rows, it is just some sort of StripeRow and I use it for clarifying my problem. — Pars.Engineer, Oct 11 '12 at 06:36
Pars.Engineer, sorry, picture just shows the existance of problem but I need the example of code to reproduce problem. Can you show markup in which you have this problem? — Baidaly, Oct 11 '12 at 20:37
Daulet Urazalinov: Thank you very much. I added markup code. If you need some more information, please let me know. — Pars.Engineer, Oct 13 '12 at 05:57

score 1 · Answer 1 · answered Oct 13 '12 at 18:48

1

I think problem in last column MDate, because you set it's next attributes: Hidden="true" Hideable="false" and made this column AutoExpand.

Grid

answered Oct 13 '12 at 18:48

Baidaly

1,829
1
15
16

Dear Daulet Urazalinov, It's highly appreciated. My problem was solved. But I really don't know what is the reason of getting -2 for my question :( – Pars.Engineer Oct 14 '12 at 09:15

Rendering the last column of Grid panel Ext.Net

1 Answers1