[CLOSED] GridPanel with RowExpander; Selecting Row

  1. #1

    [CLOSED] GridPanel with RowExpander; Selecting Row

    Is there anyway to be able to select in an expanded RowExpander area of a grid panel row and have the row selected? I use the RowExpander to show comments for the given row, but I can not select in the comment area and have to row selected.
    Last edited by Daniil; May 17, 2012 at 3:00 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please set up:
    <ext:GridPanel runat="server">
        ...
        <View>
            <ext:GridView runat="server" EnableTextSelection="true" />
        </View>
    </ext:GridPanel>
  3. #3
    That isn't what I was looking for, but nice option.

    When the grid row is expanded the only way to select the row is by clicking in the top 10 pixels of the row. If I try to click where the template information is the row does not capture that I am click in it.

    I underestand that the row expander can show complicated information, but all I am showing is comments about the information in an HTML tag. Is there any way when I click over the comments area of the expanded row the row will be selected?

    Based on the Sencha docs there is no property, but I didn't know if you had a trick.
  4. #4
    I've got the requirement now, thanks for the clarification.

    I can suggest the following solution, please see the ItemMouseDown listener.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var onItemMouseDown = function (view, record, item, index, e) {
                if (e.getTarget('div.x-grid-rowbody', view.el)) {
                    view.ownerCt.getSelectionModel().selectWithEvent(record, e);    
                };
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowExpander runat="server">
                    <Template runat="server">
                        <Html>
                            {test1} {test2} {test3}
                        </Html>
                    </Template>
                </ext:RowExpander>
            </Plugins>
            <View>
                <ext:GridView runat="server">
                    <Listeners>
                        <ItemMouseDown Fn="onItemMouseDown" />
                    </Listeners>
                </ext:GridView>
            </View>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" AllowDeselect="true" />
            </SelectionModel>
        </ext:GridPanel>
    </body>
    </html>
  5. #5
    Awesome, works perfectly. I would never have figured out the piece of code below:

        <script type="text/javascript">         
            var onItemMouseDown = function (view, record, item, index, e) {
                 if (e.getTarget('div.x-grid-rowbody', view.el)) {
                     view.ownerCt.getSelectionModel().selectWithEvent(record, e);
                     };
             };
         </script>
    Please close the thread.

Similar Threads

  1. [CLOSED] GridPanel with RowExpander; Selecting Row
    By GavinR in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 17, 2012, 11:46 AM
  2. [CLOSED] Problem with selecting values in gridpanel.
    By tlfdesarrollo in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 16, 2012, 1:38 PM
  3. Selecting different columnmodel for gridpanel.
    By masudcseku in forum 1.x Help
    Replies: 5
    Last Post: May 11, 2011, 5:09 PM
  4. [CLOSED] pre-selecting gridpanel rows
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 04, 2010, 7:42 AM
  5. [CLOSED] selecting text in gridpanel with IE
    By vsn in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 30, 2009, 6:49 AM

Posting Permissions