[CLOSED] GridView cell editor with custom controls?

Page 2 of 4 FirstFirst 1234 LastLast
  1. #11
    Hi Daniil,

    Can you help me get on the right track here please? I guess I'm missing some configuration because my code sample doesn't work.

    <%@ 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();
    
                Store store2 = this.Store2;
                store2.DataSource = new object[]
                {
                    new object[] { "1", "Test1" },
                    new object[] { "2", "Test2" },
                    new object[] { "3", "Test3" },
                    new object[] { "4", "Test4" },
                    new object[] { "5", "Test5" },
                };
                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(new Ext.net.GridPanel(
                                {
                                    id: "GridPanel2",
                                    columnPlugins: [1],
                                    renderTo: "GridPanel2_Container",
                                    autoHeight: true,
                                    store: Store2,
                                    selectionMemory: false,
                                    cm: this.ColumnModel2 = new Ext.grid.ColumnModel(
                                            {
                                                proxyId: "ColumnModel2",
                                                columns: [
                                                    { dataIndex: "data", header: "Value" },
                                                    new Ext.net.CommandColumn(
                                                        {
                                                            hideable: false,
                                                            width: 25,
                                                            commands: [{ xtype: "tbbutton", command: "Pick", iconCls: "icon-accept"}]
                                                        })
                                                ]
                                            }
                                        )
                                }
                            )
                        );
                        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="Store2" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="data" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <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>
        <div id="GridPanel2_Container">
        </div>
        </form>
    </body>
    </html>
  2. #12
    An editor can be a field only. A GridPanel is not a field.

    You should pass a DropDownField instance to the setEditor method.
  3. #13
    Hi Daniil,

    I've modified my code sample as suggested. I think quite a few things are going wrong since I don't yet understand well how to work with cell editors on the client side. The commands don't show up and data binding isn't there. Also, I can't modify the column length without screwing up the main GridPanel. Could you please take a look?

    <%@ 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" },
                    new object[] { "id6", "Custom" },
                };
                store.DataBind();
    
                Store store2 = this.Store2;
                store2.DataSource = new object[]
                {
                    new object[] { 1, "Test1" },
                    new object[] { 2, "Test2" },
                    new object[] { 3, "Test3" },
                    new object[] { 4, "Test4" },
                    new object[] { 5, "Test5" },
                };
                store.DataBind();
                this.ResourceManager1.RegisterIcon(Icon.Accept);
            }
        }
    
        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(new Ext.grid.GridEditor(
                            Ext.apply(
                                {
                                    field:
                                        {
                                            id: "DropDownField1",
                                            xtype: "netdropdown",
                                            component:
                                                {
                                                    id: "GridPanel2",
                                                    columnPlugins: [1],
                                                    xtype: "netgrid",
                                                    autoHeight: true,
                                                    store: Store2,
                                                    selectionMemory: false,
                                                    cm: this.ColumnModel2 = new Ext.grid.ColumnModel(
                                                        {
                                                            proxyId: "ColumnModel2",
                                                            columns: [
                                                                {
                                                                    dataIndex: "id",
                                                                    header: "Id",
                                                                    width: 100
                                                                },
                                                                new Ext.net.CommandColumn(
                                                                    {
                                                                        hideable: false,
                                                                        width: 25,
                                                                        commands: [
                                                                            {
                                                                                xtype: "tbbutton",
                                                                                command: "Pick",
                                                                                iconCls: "icon-accept"
                                                                            }
                                                                        ]
                                                                    }
                                                                )
                                                            ]
                                                        }
                                                    ),
                                                    listeners:
                                                        {
                                                            command:
                                                                {
                                                                    fn: function (command, record, rowIndex, colIndex) {
                                                                        this.dropDownField.setValue(record.data.desc);
                                                                    }
                                                                }
                                                        }
                                                }
                                        }
                                })
                                    ));
    
                        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="Store2" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="desc" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <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>
        </form>
    </body>
    </html>
  4. #14
    Here's the slightly revised code snippet. It works a little better not throwing client errors out of the gates. However, the editor grid looks distorted and if I resize its columns, it won't show up next time on editing.

    Edit in: Added a Form editor

    Edit in: Also, please suggest how to get a handle on the DropDownField component object to manipulate its fields

    <%@ 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", "Date Field 1" },
                    new object[] { "id2", "ComboBox", "Combo Box 1" },
                    new object[] { "id3", "DateField", "Date Field 2" },
                    new object[] { "id4", "ComboBox", "Combo Box 2" },
                    new object[] { "id5", "Custom", "Custom 1" },
                    new object[] { "id6", "Form", "Form 1" },
                };
                store.DataBind();
    
                this.ResourceManager1.RegisterIcon(Icon.Accept);
            }
        }
    
        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(new Ext.grid.GridEditor(
                            Ext.apply(
                                {
                                    field:
                                        {
                                            id: "DropDownField1",
                                            xtype: "netdropdown",
                                            component:
                                                {
                                                    id: "GridPanel2",
                                                    columnPlugins: [1],
                                                    xtype: "netgrid",
                                                    autoHeight: true,
                                                    store: Store1,
                                                    selectionMemory: false,
                                                    cm: this.ColumnModel2 = new Ext.grid.ColumnModel(
                                                        {
                                                            proxyId: "ColumnModel2",
                                                            columns: [
                                                                {
                                                                    dataIndex: "id",
                                                                    header: "Id",
                                                                    width: 80
                                                                },
                                                                new Ext.net.CommandColumn(
                                                                    {
                                                                        hideable: false,
                                                                        width: 25,
                                                                        commands: [
                                                                            {
                                                                                xtype: "tbbutton",
                                                                                command: "Pick",
                                                                                iconCls: "icon-accept"
                                                                            }
                                                                        ]
                                                                    }
                                                                )
                                                            ]
                                                        }
                                                    ),
                                                    listeners:
                                                        {
                                                            command:
                                                                {
                                                                    fn: function (command, record, rowIndex, colIndex) {
                                                                        this.dropDownField.setValue(record.data.desc);
                                                                    }
                                                                }
                                                        }
                                                }
                                        }
                                })
                            ));
    
                        break;
    
                    case "Form":
                        column.setEditor(new Ext.grid.GridEditor(
    						Ext.apply({
    						    field: {
    						        id: "DropDownField2",
    						        xtype: "netdropdown",
    						        component: {
    						            id: "FormPanel1",
    						            xtype: "form",
    						            width: 300,
    						            items: [
    								        { id: "CompanyField", xtype: "textfield", anchor: "95%", fieldLabel: "Company", dataIndex: "test" },
    								        { id: "PriceField", xtype: "textfield", anchor: "95%", fieldLabel: "Price", dataIndex: "price" },
    								        { id: "ChangeField", xtype: "textfield", anchor: "95%", fieldLabel: "Change", dataIndex: "change" },
    								        { id: "PctChangeField", xtype: "textfield", anchor: "95%", fieldLabel: "Change (%)", dataIndex: "pctChange" },
    								        { id: "lastChange", xtype: "datefield", anchor: "95%", fieldLabel: "Last Updated", format: "n/j/Y" }
                                        ],
    						            buttons: [
                                            {
                                                id: "ButtonSave",
                                                text: "Save To Grid",
                                                listeners: {
                                                    click: {
                                                        fn: function (item, e) {
                                                            FormPanel1.getForm().updateRecord(GridPanel1.getSelectionModel().getSelected());
                                                            DropDownField2.collapse();
                                                            DropDownField2.hide();
                                                        }
                                                    }
                                                }
                                            },
                                            {
                                                id: "ButtonReset",
                                                text: "Reset Fields",
                                                listeners: {
                                                    click: {
                                                        fn: function (item, e) {
                                                            FormPanel1.getForm().reset();
                                                        }
                                                    }
                                                }
                                            },
    							        ],
                                        padding: 5,
                                        title: "Form Panel",
                                        renderFormElement: false,
                                        url: "/Ext.Net.Tests/GridDropDownFormValue.aspx"
    						        }
    						    }
    						},
                            {})
    						));
                        break;
                }
            };
    
            var testRenderer = function (value) {
                var record = ComboBoxStore.getById(value);
    
                if (value instanceof Date) {
                    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" Selectable="true">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="id" />
                                <ext:RecordField Name="editor" />
                                <ext:RecordField Name="desc" />
                                <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>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true" ID="RowSelectionModel1">
                </ext:RowSelectionModel>
            </SelectionModel>
            <Listeners>
                <BeforeEdit Fn="setEditor" />
                <Render Handler="this.getColumnModel().setEditable(2, true);" />
            </Listeners>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #15
    I think a GridPanel and a FormPanel are too big components to be common editors.

    I don't say it is impossible, but I have an alternative suggestion for you. Please look at this example.
    http://examples1.ext.net/#/Form/Trig...Dialog_Editor/
  6. #16
    Quote Originally Posted by Daniil View Post
    I think a GridPanel and a FormPanel are too big components to be common editors.

    I don't say it is impossible, but I have an alternative suggestion for you. Please look at this example.
    http://examples1.ext.net/#/Form/Trig...Dialog_Editor/
    Thanks for the suggestion Daniil, it looks promising and I'm poking around with it. Do you think the popup window can be altered to closely mimic the behavior of the DropDownValue component? For example, it needs to appear beside the edited cell, be non-modal (easily done) and disappear when the user clicks anywhere on the screen (nice to have but optional). If it can simply be presented next to the edited cell, it will stand a good chance to meet my requirements.
  7. #17
    Quote Originally Posted by vadym.f View Post
    it needs to appear beside the edited cell
    Please use a Window's alignTo method.
    http://docs.sencha.com/ext-js/3-4/#!...method-alignTo

    Here is an example.
    http://forums.ext.net/showthread.php...ll=1#post49885

    By the way, there is another approach - an Edit command. You could use a cell ImageCommand in your case.

    Quote Originally Posted by vadym.f View Post
    disappear when the user clicks anywhere on the screen (nice to have but optional).
    I would listen a body's mouse up event. If a mouse click occurs outside a Window, then hide it.
  8. #18
    Quote Originally Posted by Daniil View Post
    Please use a Window's alignTo method.
    http://docs.sencha.com/ext-js/3-4/#!...method-alignTo

    Here is an example.
    http://forums.ext.net/showthread.php...ll=1#post49885

    By the way, there is another approach - an Edit command. You could use a cell ImageCommand in your case.



    I would listen a body's mouse up event. If a mouse click occurs outside a Window, then hide it.
    Thanks for the suggestions Daniil! In my case, cell editors range from primitive controls like ComboBox, DateField or TextField that need to be presented "inline" when the cell is being edited to more complex custom controls that may be hosted by a window. The DropDownField approach seemed like the one that would allow such a combination but, as you pointed out, it would be too complex to implement. Could you recommend how to achieve this behavior with either TriggerField or EditCommand?
  9. #19
    Yes, I would use either TriggerField or Edit command instead of a DropDownField.

    Quote Originally Posted by vadym.f View Post
    Could you recommend how to achieve this behavior with either TriggerField or EditCommand?
    Well, I pointed the two examples. Please clarify did you give it a try?
  10. #20
    Quote Originally Posted by Daniil View Post
    Yes, I would use either TriggerField or Edit command instead of a DropDownField.



    Well, I pointed the two examples. Please clarify did you give it a try?
    Yes, I've tried both and I'm leaning towards the one using TriggerFields. But unless I'm missing something here, I couldn't see how to make use of primitive dynamic inline editors, e.g. TextField, DateField etc. Those need to be presented in the cell instead of on the Window editor and their type is decided in runtime. That behavior would be similar to my earlier example using DropDownField.
    With that being said, I'm totally open to the idea of using Column commands if the "inline" cell editing functionality I mentioned above can be achieved. Please let me know if my explanation is clear.
Page 2 of 4 FirstFirst 1234 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