Ext.NET Grid Issue

Hello all! Sorry for not posting more often, but I don’t have lots of spare time these days, since I’m working on couple of projects… :( I’ll definitely do my best in writing more!

Today I would like to share an unusual issue I’ve had at work these days, regarding Ext.NET grid control. For you unfamiliar with it, Ext.NET is an ASP.NET component framework integrating the Ext JS library. In my company, we have created an ASP.NET C# application using Ext.NET controls. I have encountered an issue occurring only in one grid, which has both combobox and button in the row. There is some processing on mousedown event, since the row must be selected when the button is clicked. Now, what happened was that, when the combobox was clicked on, it wouldn’t display the values. It looked something like this:

grid on mousedown

But, when navigating through items using keyboard, one could see all the values:

grid on keydown

I’ve been trying to solve the problem, and thought the issue was that the combobox event was somehow overridden. Finally, when I couldn’t solve it, I’ve asked the question on stackoverflow, hoping that someone would help, and created a simplified example in which the behavior could be reproduced. Here it is:

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
    function setGridCurrentRow(grid, e) {
        var parent = Ext.fly(e.target).findParent(grid.getView().rowSelector, grid.getView().rowSelectorDepth);

        if (parent) {        // if no row selected
            grid.currentRow = grid.store.getRange()[parent.rowIndex].data;
        }
        else {               // else - row selected
            grid.currentRow = grid.getRowsValues()[0];
        }
    }
</script>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Ext.Net.ConfigItem cItem = new Ext.Net.ConfigItem();
            cItem.Mode = Ext.Net.ParameterMode.Raw;
            cItem.Name = "listeners";
            cItem.Value += "{'keydown':function(e){ if(e.getKey()==9){setGridCurrentRow(" + TestGrid.ID + ",e);}}";
            cItem.Value += ",'mousedown':function(e){ if(e.target != null) setGridCurrentRow(" + TestGrid.ID + ",e);}";
            cItem.Value += ",'command':function(command,gridRecord){alert('Here I am!');}}";
            TestGrid.CustomConfig.Add(cItem);

            TestStore.DataSource = Data;
            this.TestStore.DataBind();
        }
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { 1, "f", "First", "" },
                new object[] { 2, "s", "Second", "" },
                new object[] { 3, "f", "First", "" },
                new object[] { 4, "t", "Third", "" },
                new object[] { 5, "f", "Fourth", "" },
            };
        }
    }

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
     <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="form1" runat="server">
    <div>
        <ext:Store ID="TestStore" runat="server" >
            <Reader>
                <ext:ArrayReader IDProperty="ID" >
                    <Fields>
                        <ext:RecordField Name="ID"></ext:RecordField>
                        <ext:RecordField Name="TestText"></ext:RecordField>
                        <ext:RecordField Name="TestValue"></ext:RecordField>
                        <ext:RecordField Name="ButtonText"></ext:RecordField>
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel ID="TestGrid" runat="server" StoreID="TestStore"  Width="600" Height="350" ClicksToEdit="1" TrackMouseOver="true" Selectable="true" >
            <ColumnModel ID="TestModel">
                <Columns>
                    <ext:Column ColumnID="TestText" Header="TestText" MenuDisabled="true">
                        <Editor>
                            <ext:TextField ID="TestText_Text" runat="server"></ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:Column ColumnID="TestValue" Header="Value" MenuDisabled="true">
                        <Editor>
                            <ext:ComboBox ID="TestValue_Combo" runat="server" Editable="false" ForceSelection="true">
                                <Items>
                                    <ext:ListItem Text="First" Value="1" />
                                    <ext:ListItem Text="Second" Value="2" />
                                    <ext:ListItem Text="Third" Value="3" />
                                    <ext:ListItem Text="Fourth" Value="4" />
                                    <ext:ListItem Text="Fifth" Value="5" />
                                </Items>
                            </ext:ComboBox>
                        </Editor>
                    </ext:Column>
                    <ext:Column ColumnID="TestButton" Header="Edit" MenuDisabled="true">
                        <Commands>
                            <ext:ImageCommand Icon="ApplicationEdit" CommandName="Edit" Text="Edit" ></ext:ImageCommand>
                        </Commands>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel >
                <ext:CheckboxSelectionModel ID="TestSelectionModel" runat="server" ></ext:CheckboxSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </div>
    </form>
</body>
</html>

Fortunately, I was helped by this guy. Seems this was the problem:

grid.getRowsValues()[0];

and should have been changed with this line of code:

grid.getStore().getAt(0).data;

This solved the issue. Thanks Daniil! :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>