[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?

Code:

---

<%@ 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

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!

Thank you for detailed and rapid support fabricio.murta. It really helps me.

Vzx

Hello @Vzx!

Glad it helped, thanks for the feedback!