EXT.NET Event Handling Issue

Question

In an ASP.NET application there is a gridpanel with listeners defined in code behind. The issue we're experiencing is related to mousedown event. On mousedown, the row gets selected because of some processing later on. Here is the code:

C#:

Ext.Net.ConfigItem cItem = new Ext.Net.ConfigItem();
cItem.Mode = Ext.Net.ParameterMode.Raw;
cItem.Name = "listeners";
cItem.Value += "{'mousedown':function(e){ if(e.target != null) setGridCurrentRow(" + gridView.ID + ",e);}}";
...

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];
    }

The issue arises when combo in the grid row is clicked. The row gets selected, which is fine, but combo values aren't displayed. It seems as if there is only one value in combo (the one currently displayed in grid row).

enter image description here

But, when navigating using the keyboard, the combo is opened and all the values are shown.

enter image description here

It seems that the mousedown event on grid row overrides combo's mousedown event. My question is: how to make row selection without losing default combo behavior?

EDIT:

Here is a simple example I've set, where this behavior is reproduced:

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

@DaniilVeriga: thanks for replying! Unfortunately, I can't provide the full example, since this is a part of our huge project, having lots of C# and javaScript code. Here I've isolated the parts that relate to the issue. Also, I've added images to better explain the situation. Any thoughts? Thanks in advance! — Ana M
Unfortunately, I have no thoughts about a possible reason. Well, it should be possible to strip down a huge project to a simple test case. Yes, it can take some time. Another option is to take some basic example and extend it with the related functionality till it starts reproducing the problem. — Daniil Veriga
@DaniilVeriga: I've set up an example and added it to the post. It's pretty basic, but the behavior can be reproduced. — Ana M

Daniil Veriga Daniil Veriga · Accepted Answer · 2013-06-28T04:46:48

This call causes the behavior:

grid.getRowsValues()[0];

I don't know why, but as a solution please try to replace it with:

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

EXT.NET Event Handling Issue

1 Answers