[CLOSED] GridPanel Combobox Render Problem

  1. #1

    [CLOSED] GridPanel Combobox Render Problem

    Hi all,

    There are some component columns in my gridpanel. When I bind big data in grid, some rows' controls cannot be rendered. You can test it on code below. When you scroll down, some rows cannot be rendered correctly.

    Is there a way to handle this?

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { 1, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 2, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 3, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 4, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 5, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 6, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 7, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 8, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 9, 9, "Text 9", DateTime.Now.Date },
                    new object[] { 11, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 21, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 31, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 41, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 51, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 61, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 71, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 81, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 12, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 22, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 32, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 42, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 52, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 62, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 72, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 82, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 13, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 23, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 33, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 43, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 53, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 63, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 73, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 83, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 14, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 24, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 34, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 44, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 54, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 64, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 74, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 84, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 16, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 26, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 36, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 46, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 56, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 66, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 76, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 86, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 17, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 27, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 37, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 47, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 57, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 67, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 77, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 87, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 18, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 28, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 38, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 48, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 58, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 68, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 78, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 88, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 19, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 29, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 39, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 49, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 59, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 69, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 79, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 89, 8, "Text 8", DateTime.Now.Date }
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>ComponentColumn Editor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>ComponentColumn as Editor</h1>
    
            <ext:GridPanel
                runat="server"
                Title="ComponentColumn Editor"
                Width="650"
                Height="325">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="IntField" Type="Int" />
                                    <ext:ModelField Name="ComboField" Type="Int" />
                                    <ext:ModelField Name="TextField" Type="String" />
                                    <ext:ModelField Name="DateField" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:ComponentColumn
                            runat="server"
                            Editor="true"
                            DataIndex="IntField"
                            Flex="1"
                            Text="Integer">
                            <Component>
                                <ext:NumberField runat="server" />
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn
                            runat="server"
                            Editor="true"
                            DataIndex="ComboField"
                            Flex="1"
                            Text="ComboBox">
                            <Component>
                                <ext:ComboBox runat="server">
                                    <Items>
                                        <ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
                                        <ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
                                        <ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
                                        <ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
                                        <ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
                                        <ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
                                        <ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
                                        <ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
                                        <ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
                                        <ext:ListItem Text="Item 1" Value="11" Mode="Raw" />
                                        <ext:ListItem Text="Item 2" Value="21" Mode="Raw" />
                                        <ext:ListItem Text="Item 3" Value="31" Mode="Raw" />
                                        <ext:ListItem Text="Item 4" Value="41" Mode="Raw" />
                                        <ext:ListItem Text="Item 5" Value="51" Mode="Raw" />
                                        <ext:ListItem Text="Item 6" Value="61" Mode="Raw" />
                                        <ext:ListItem Text="Item 7" Value="71" Mode="Raw" />
                                        <ext:ListItem Text="Item 8" Value="81" Mode="Raw" />
                                        <ext:ListItem Text="Item 9" Value="91" Mode="Raw" />
                                    </Items>
                                </ext:ComboBox>
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn
                            runat="server"
                            Editor="true"
                            DataIndex="TextField"
                            Flex="1"
                            Text="Text">
                            <Component>
                                <ext:TextField runat="server" />
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn
                            runat="server"
                            Editor="true"
                            DataIndex="DateField"
                            Flex="1"
                            Text="Date">
                            <Component>
                                <ext:DateField runat="server" />
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Thanks,

    Vzx
    Last edited by fabricio.murta; Aug 02, 2018 at 3:26 PM.
  2. #2
    Hello, @Vzx!

    Thanks for the straightforward example! That really really helps us help you!

    And in fact, I just found a solution that's exactly 25 characters away of the solution for the issue.

    Just use BufferedRenderer="false" on the grid and you should no longer have the issue.

    This problem happens because now buffered rendering on grid panels is enabled by default, as it greatly improves the performance on grid panels. Well, maybe not in this case, as drawing them as you scroll can get extremely inefficient and choppy, just because whole components are written as rows are drawn on grid's partial/buffered view. This is so true that not all row drawing code is able to run before following scroll events are triggered, to the point that some of the drawing operations are skipped completely, as we can see in the page.

    The good news is that just disabling this dynamic rendering functionality in the grid panel solves the problem. The bad news is that overall the grid will load a much higher burden for the total loaded page; if you need this combination (components on cells) and also needs lots of rows in a single grid, you probably should consider switching to a paged grid approach

    Still, disabling buffered renderer. Even with paging, if the grid has enough entries for a scrollbar, the buffered rendering algorithm kicks in by default, and you most likely don't want that in the described use case.

    Well, I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you for detailed and rapid support fabricio.murta. It really helps me.

    Vzx
  4. #4
    Hello @Vzx!

    Glad it helped, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 0
    Last Post: Sep 02, 2016, 4:18 PM
  2. Replies: 1
    Last Post: Jun 17, 2015, 12:39 PM
  3. [CLOSED] [0.8.2] Render problem after displaying a hidden combobox
    By Webezi in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 27, 2010, 2:26 AM
  4. Replies: 5
    Last Post: Jun 10, 2009, 5:13 AM
  5. Combobox field problem in GridPanel
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: Apr 19, 2009, 3:45 PM

Tags for this Thread

Posting Permissions