[CLOSED] GridView cell editor with custom controls?

Page 1 of 4 123 ... LastLast
  1. #1

    [CLOSED] GridView cell editor with custom controls?

    Hi,

    I'm looking at the example at http://examples1.ext.net/#/GridPanel..._DirectMethod/. My requirement is to present a custom control, e.g. a little form to edit the address, when the user starts editing a GridView cell value. I'm curious what would be the best way to achieve it if it's at all possible. Ideally, this control should appear beside the cell being edited just like a date time picker does in the example. Please let me know if more info is needed.
    Last edited by Daniil; Nov 08, 2012 at 8:29 AM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    Maybe, a DropDownField as an Editor? And expand it on start editing.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi Vadym,

    Maybe, a DropDownField as an Editor? And expand it on start editing.
    Hi Daniil,

    Thanks for your response! Could you provide a link to an example to look at please?

    Edit in: I believe this thread has a couple of DropDownField examples. I'm trying to locate an example dealing with a GridView.

    http://forums.ext.net/showthread.php...xt-net-control
  4. #4
    I was also unable to to find an example and wrote this simple one.

    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)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" }
                };
                this.Store1.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>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
    
            <ext:GridPanel runat="server" StoreID="Store1" AutoHeight="true">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test" Width="200">
                            <Editor>
                                <ext:DropDownField runat="server">
                                    <Component>
                                        <ext:GridPanel runat="server" StoreID="Store1" AutoHeight="true">
                                            <ColumnModel runat="server">
                                                <Columns>
                                                    <ext:Column Header="Test" DataIndex="test" />
                                                    <ext:CommandColumn Width="25">
                                                        <Commands>
                                                            <ext:GridCommand Icon="Accept" CommandName="Pick" />
                                                        </Commands>
                                                    </ext:CommandColumn>
                                                </Columns>
                                            </ColumnModel>
                                            <Listeners>
                                                <Command Handler="this.dropDownField.setValue(record.data.test);" />
                                            </Listeners>
                                        </ext:GridPanel>
                                    </Component>
                                </ext:DropDownField>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Thanks for the example Daniil! Is it possible to attach different DropDownField editor controls to different rows in runtime? I have a requirement whereby the user is presented with an editable vertical list of attributes of different types. For example, there's a Data of Birth attribute whose value is obviously of DateTime type, or email address of String type. Then, there're more complex attributes like Phone Number with area code and extension or Mailing Address with multiple fields.
    The attribute type becomes known when the GridPanel is populated from the Store.

    Please advise if this kind of functionality is attainable.
  6. #6
    I think it is possible.

    Please look at this example.
    http://forums.ext.net/showthread.php...ll=1#post73887
  7. #7
    Quote Originally Posted by Daniil View Post
    I think it is possible.

    Please look at this example.
    http://forums.ext.net/showthread.php...ll=1#post73887
    Hi Daniil,

    Thanks for the link. I've modified the example trying to get it to work. Please take a look below and suggest the needful changes.

    <%@ 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[] { "id1", "DateField" },
                    new object[] { "id2", "ComboBox" },
                    new object[] { "id3", "DateField" },
                    new object[] { "id4", "ComboBox" },
                    new object[] { "id5", "Custom" },
                };
                store.DataBind();
            }
        }
    
        protected void ComboBoxStore_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            Store store = sender as Store;
            string id = e.Parameters["id"];
            store.DataSource = new object[]
            {
                new object[] { id + "_" + DateTime.Now.Second, "1" },
                new object[] { id + "_" + DateTime.Now.Second, "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 id="Head1" runat="server">
        <title>Ext.NET Example</title>
        <script type="text/javascript">
            var setEditor = function (e) {
                var column = e.grid.getColumnModel().columns[e.column],
                    ed = column.getCellEditor(e.row);
    
                if (ed) {
                    ed.destroy();
                }
    
                switch (e.record.get("editor")) {
                    case "DateField":
                        column.setEditor(new Ext.form.DateField());
                        break;
    
                    case "ComboBox":
                        column.setEditor(new Ext.form.ComboBox({
                            displayField: "text",
                            valueField: "value",
                            triggerAction: "all",
                            store: ComboBoxStore
                        }));
    
                        ComboBoxStore.on(
                            "beforeload",
                            function (store, options) {
                                options.params = {
                                    id: e.record.data.id
                                }
                            },
                            null,
                            {
                                single: true
                            });
                        break;
    
                    case "Custom":
                        column.setEditor(DropDownField1);
                        break;
                }
            };
    
            var testRenderer = function (value) {
                var record = ComboBoxStore.getById(value);
    
                if (record) {
                    value = record.data.text;
                } else {
                    value = Ext.util.Format.date(value, "Y-m-d");
                }
    
                return value;
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="ComboBoxStore" runat="server" OnRefreshData="ComboBoxStore_RefreshData"
            AutoLoad="false">
            <Proxy>
                <ext:PageProxy />
            </Proxy>
            <Reader>
                <ext:ArrayReader IDProperty="value">
                    <Fields>
                        <ext:RecordField Name="text" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="310">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="id" />
                                <ext:RecordField Name="editor" />
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="ID" DataIndex="id" />
                    <ext:Column Header="Editor" DataIndex="editor" />
                    <ext:Column Header="Test" DataIndex="test">
                        <Renderer Fn="testRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Listeners>
                <BeforeEdit Fn="setEditor" />
                <Render Handler="this.getColumnModel().setEditable(2, true);" />
            </Listeners>
        </ext:GridPanel>
        <ext:DropDownField ID="DropDownField1" runat="server">
            <Component>
                <ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store1" AutoHeight="true">
                    <ColumnModel ID="ColumnModel2" runat="server">
                        <Columns>
                            <ext:Column Header="Test" DataIndex="value" />
                            <ext:CommandColumn Width="25">
                                <Commands>
                                    <ext:GridCommand Icon="Accept" CommandName="Pick" />
                                </Commands>
                            </ext:CommandColumn>
                        </Columns>
                    </ColumnModel>
                    <Listeners>
                        <Command Handler="this.dropDownField.setValue(record.data.value);" />
                    </Listeners>
                </ext:GridPanel>
            </Component>
        </ext:DropDownField>
        </form>
    </body>
    </html>
  8. #8
    column.setEditor(DropDownField1);
    I don't think it is possible to use an already rendered field if you need an editor opening in a cell.

    It should help if you would create it via JavaScript, the same way as it is done with the ComboBox and DateField.
  9. #9
    Quote Originally Posted by Daniil View Post
    column.setEditor(DropDownField1);
    I don't think it is possible to use an already rendered field if you need an editor opening in a cell.

    It should help if you would create it via JavaScript, the same way as it is done with the ComboBox and DateField.
    Well, that makes my task more complicated. Is it feasible to create compounded custom editors on the client or should I look into different options? Maybe, there's a way to create a DropDownField on the client, associate it with the GridPanel cells and then invoke appropriate markup defined Component controls depending on the cell edited? I would appreciate it if you could explain best available options and provide short examples.
  10. #10
    Quote Originally Posted by vadym.f View Post
    compounded custom editors
    Please clarify what you mean.

    Quote Originally Posted by vadym.f View Post
    Maybe, there's a way to create a DropDownField on the client, associate it with the GridPanel cells and then invoke appropriate markup defined Component controls depending on the cell edited?
    No, I don't think it is possible. I would suggest you to create all on client. You can create a required widget in markup, then look at the page sources to get a script of this widget.

    Quote Originally Posted by vadym.f View Post
    I would appreciate it if you could explain best available options and provide short examples.
    Generally, there are two options.

    1. A Column's Editor property. It doesn't allow to change editors on the fly that you need.

    2. Creating and applying editors on client and on the fly as it is done in my example.
Page 1 of 4 123 ... LastLast

Similar Threads

  1. [CLOSED] Cell editing with complex editor
    By Leonid_Veriga in forum 2.x Premium Help
    Replies: 3
    Last Post: Sep 21, 2012, 5:21 PM
  2. v2.0 Gridview Cell Conditional formatting
    By pyro in forum 2.x Help
    Replies: 5
    Last Post: Mar 27, 2012, 2:11 PM
  3. Replies: 2
    Last Post: Nov 12, 2010, 7:17 PM
  4. [CLOSED] [1.0] Gridview Editor Column handler
    By ljankowski in forum 1.x Premium Help
    Replies: 1
    Last Post: Jan 27, 2010, 7:49 AM
  5. Editor cell shapeShifter
    By BrunoC in forum 1.x Help
    Replies: 1
    Last Post: Apr 24, 2009, 5:25 AM

Tags for this Thread

Posting Permissions