GridPanel dropdown column show dropdown on single click and expand at the same time

  1. #1

    GridPanel dropdown column show dropdown on single click and expand at the same time

    Hi,
    Is there a way to show the combo/dropdown in a cell on single click and expand the dropdown at the same time?
    Thanks,
    Jenny
  2. #2
    Hi,

    Here you are.

    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", 1 },
                    new object[] { "test2", 2 }
                };
                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 Example</title>
    
        <script type="text/javascript">
            var myRenderer = function (value) {
                return value === 1 ? "Item 1" : "Item 2";
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                AutoHeight="true" 
                ClicksToEdit="1">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2">
                            <Renderer Fn="myRenderer" />
                            <Editor>
                                <ext:ComboBox runat="server">
                                    <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                    </Items>
                                </ext:ComboBox>
                            </Editor>
                            <EditorOptions>
                                <Listeners>
                                    <StartEdit Handler="this.field.onTriggerClick();" />
                                </Listeners>
                            </EditorOptions>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    Hi, the dropdown expands, but I still need to double click on the sell for the dropdown appear.
    Thanks,
    Jenny

    Quote Originally Posted by Daniil View Post
    Hi,

    Here you are.

    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", 1 },
                    new object[] { "test2", 2 }
                };
                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 Example</title>
    
        <script type="text/javascript">
            var myRenderer = function (value) {
                return value === 1 ? "Item 1" : "Item 2";
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                AutoHeight="true" 
                ClicksToEdit="1">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2">
                            <Renderer Fn="myRenderer" />
                            <Editor>
                                <ext:ComboBox runat="server">
                                    <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                    </Items>
                                </ext:ComboBox>
                            </Editor>
                            <EditorOptions>
                                <Listeners>
                                    <StartEdit Handler="this.field.onTriggerClick();" />
                                </Listeners>
                            </EditorOptions>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4
    I guess you didn't set up ClicksToEdit="1".
  5. #5
    Thanks! Yes I didn't set it up. It fixed it. I still have a problem with when the initial item is empty, the index is displayed when I click on the dropdown.

    Quote Originally Posted by Daniil View Post
    I guess you didn't set up ClicksToEdit="1".
  6. #6
    I still have a problem with when the initial item is empty, the index is displayed when I click on the dropdown.
    It's another problem. Please start a new forum thread.
  7. #7
    Quote Originally Posted by Daniil View Post
    It's another problem. Please start a new forum thread.
    Thank you for your help.

Similar Threads

  1. Replies: 5
    Last Post: Oct 16, 2012, 9:53 AM
  2. Replies: 3
    Last Post: Feb 21, 2012, 6:40 AM
  3. Replies: 8
    Last Post: Sep 13, 2011, 8:47 PM
  4. Replies: 6
    Last Post: Feb 08, 2011, 6:17 PM
  5. Replies: 10
    Last Post: Jan 04, 2010, 4:37 PM

Tags for this Thread

Posting Permissions