[CLOSED] GridView cell editor with custom controls?

Page 3 of 4 FirstFirst 1234 LastLast
  1. #21
    Well, just put a field into a Column's Editor and it will appear on double (by default) or single (ClicksToEdit="1" for a GridPanel) click on a cell.

    Will it suite your needs?
  2. #22
    Quote Originally Posted by Daniil View Post
    Well, just put a field into a Column's Editor and it will appear on double (by default) or single (ClicksToEdit="1" for a GridPanel) click on a cell.

    Will it suite your needs?
    Could you please suggest how to do this on the client? I need to associate column editors in runtime because their types will be defined by the Grid Store record values. If a column editor is primitive (TextField, DateField, ComboBox, etc.), then I don't need the trigger buttons because editing will be done inline. However, in case of custom control editor hosted on a window, I do need the trigger button that will appear on the cell click to bring up the window. Does it make any sense?

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="Ext.Net.Utilities" %>
    <%@ 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[] { "3m Co", "A" },
                    new object[] { "Alcoa Inc", "B" },
                    new object[] { "Altria Group Inc", "C" },
                    new object[] { "American Express Company", "D" },
                    new object[] { "American International Group", "E" }
                };
    
                this.Store1.DataBind();
    
                this.Store2.DataSource = new object[]
                {
                    new object[] { "A", "Excelent" },
                    new object[] { "B", "Good" },
                    new object[] { "C", "Average" },
                    new object[] { "D", "Poor" },
                    new object[] { "E", "Bad" }
                };
    
                this.Store2.DataBind();
    
                this.FillRadioGroup(RatingChoose);
                this.FillRadioGroup(CompanyRating);
            }
        }
    
        private void FillRadioGroup(RadioGroup group)
        {
            foreach (object[] rating in (object[])this.Store2.DataSource)
            {
                group.Items.Add(new Radio
                {
                    Tag = rating[0].ToString(),
                    BoxLabel = rating[1].ToString()
                });
            }
        }
    </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>EditorGrid with TriggerField Editor and Dialog - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            var triggerClick = function (el, trigger, tag, auto, index) {
                switch (tag) {
                    case "pick":
                        PickWindow.editor = el;
                        PickWindow.autoComplete = auto;
    
                        var record = GridPanel1.getSelectionModel().getSelected(),
                            rowIndex = GridPanel1.store.indexOf(record);
                        GridPanel1.getSelectionModel().selectRow(rowIndex);
    
                        var cell = GridPanel1.getView().getCell(rowIndex, index);
    
                        PickWindow.show(trigger, function () {
                            PickWindow.alignTo(cell);
                            PickWindow.layout.setActiveItem(index);
                            PickWindow.layout.activeItem.initValue(PickWindow);
                        });
                        break;
                    case "complete":
                        GridPanel1.stopEditing(false);
                        break;
                }
            };
    
            var ratingRenderer = function (value) {
                var r = Store2.getById(value);
    
                if (Ext.isEmpty(r)) {
                    return "";
                }
    
                return r.data.description;
            };
    
            var setActiveRating = function (w) {
                var value = w.editor.getValue();
                RatingChoose.items.each(function (item) {
                    if (item.tag == value) {
                        item.setValue(true);
                        return false;
                    }
                });
            };
    
            var saveRating = function (w) {
                w.editor.setValue(RatingChoose.getValue().tag);
            };
    
            var setCompany = function (w) {
                var record = GridPanel1.activeEditor.record,
                    company = w.editor.getValue(),
                    rating = record.get("rating");
    
                CompanyName.setValue(company);
                CompanyRating.items.each(function (item) {
                    if (item.tag == rating) {
                        item.setValue(true);
                        return false;
                    }
                });
            };
    
            var saveCompany = function (w) {
                w.editor.setValue(CompanyName.getValue());
                GridPanel1.activeEditor.record.set("rating", CompanyRating.getValue().tag);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            EditorGrid with TriggerField Editor and Dialog</h1>
        <p>
            Company column: auto complete edit after window hiding</p>
        <p>
            Rating column: should confirm value by clicking on the 'tick' trigger button</p>
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="company" />
                        <ext:RecordField Name="rating" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Store ID="Store2" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="rating">
                    <Fields>
                        <ext:RecordField Name="rating" />
                        <ext:RecordField Name="description" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
            Title="Grid" Width="300" Height="200" AutoExpandColumn="Company">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" DataIndex="company">
                        <Editor>
                            <ext:TriggerField ID="TriggerField1" runat="server">
                                <Triggers>
                                    <ext:FieldTrigger Icon="SimpleEllipsis" Tag="pick" />
                                    <ext:FieldTrigger Icon="SimpleTick" Tag="complete" />
                                </Triggers>
                                <Listeners>
                                    <TriggerClick Handler="triggerClick(this, trigger, tag, true, 0);" />
                                </Listeners>
                            </ext:TriggerField>
                        </Editor>
                        <EditorOptions AllowBlur="false" ZIndex="8000" />
                    </ext:Column>
                    <ext:Column Header="Rating" DataIndex="rating">
                        <Editor>
                            <ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store2" DisplayField="description"
                                ValueField="rating" Mode="Local" TriggerAction="All" MinChars="100" Editable="false"
                                HideTrigger="true">
                                <Triggers>
                                    <ext:FieldTrigger Icon="SimpleEllipsis" Tag="pick" />
                                    <ext:FieldTrigger Icon="SimpleTick" Tag="complete" />
                                </Triggers>
                                <Listeners>
                                    <TriggerClick Handler="triggerClick(this, trigger, tag, false, 1);" />
                                </Listeners>
                            </ext:ComboBox>
                        </Editor>
                        <EditorOptions AllowBlur="false" ZIndex="8000" />
                        <Renderer Fn="ratingRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
            </SelectionModel>
        </ext:GridPanel>
        <ext:Window ID="PickWindow" runat="server" Hidden="true" InitCenter="true" Title="Pick a Value"
            Width="300" Height="250" Modal="true" Layout="card" Closable="false">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Padding="5" Layout="form" Border="false">
                    <Items>
                        <ext:TextField ID="CompanyName" runat="server" Anchor="100%" FieldLabel="Own value" />
                        <ext:RadioGroup ID="CompanyRating" runat="server" FieldLabel="Rating" Vertical="true"
                            ColumnsNumber="1" />
                    </Items>
                    <CustomConfig>
                        <ext:ConfigItem Name="initValue" Value="setCompany" Mode="Raw" />
                        <ext:ConfigItem Name="saveValue" Value="saveCompany" Mode="Raw" />
                    </CustomConfig>
                </ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Layout="Fit" Padding="5">
                    <Items>
                        <ext:RadioGroup ID="RatingChoose" runat="server" Vertical="true" ColumnsNumber="1" />
                    </Items>
                    <CustomConfig>
                        <ext:ConfigItem Name="initValue" Value="setActiveRating" Mode="Raw" />
                        <ext:ConfigItem Name="saveValue" Value="saveRating" Mode="Raw" />
                    </CustomConfig>
                </ext:Panel>
            </Items>
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="OK">
                    <Listeners>
                        <Click Handler="PickWindow.layout.activeItem.saveValue(PickWindow); if (PickWindow.autoComplete) {GridPanel1.stopEditing(false);} PickWindow.hide();" />
                    </Listeners>
                </ext:Button>
                <ext:Button ID="Button2" runat="server" Text="Cancel">
                    <Listeners>
                        <Click Handler="if (PickWindow.autoComplete) {GridPanel1.stopEditing(true);} PickWindow.hide();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Window>
    </body>
    </html>
  3. #23
    Please clarify do you need different editors for different rows of a single column?
  4. #24
    Quote Originally Posted by Daniil View Post
    Please clarify do you need different editors for different rows of a single column?
    Yes, that's correct. That's why I can't define them statically in the markup.
  5. #25
    Thanks. That is why I referred this example before:)
    http://forums.ext.net/showthread.php...ll=1#post73887
  6. #26
    Quote Originally Posted by Daniil View Post
    Thanks. That is why I referred this example before:)
    http://forums.ext.net/showthread.php...ll=1#post73887
    Hi Daniil,

    Thanks for bearing with me on this arduous matter first of all. :)
    The example you're referring to was one of the very first examples in this thread leveraging the DropDownField. However, after some poking around, I realized you wouldn't recommend using DropDownField for complex editors like FormPanel or GridPanel, although you didn't quite rule it out as impossible. So, you suggested to look into alternatives like TriggerField and ImageCommand, which I also did.
    Do you think I should revisit the DropDownField approach or are you thinking of any combination of TriggerField and DropDownField, or something else?

    <%@ 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", "Form", "Form 1" },
                    new object[] { "id6", "Form", "Form 2" },
                };
                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>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <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,
    						            trackResetOnLoad: true,
    						            url: "/Ext.Net.Tests/GridDropDownFormValue.aspx",
    						            listeners: {
    						                beforeshow: {
    						                    fn: function (item) {
    						                        item.getForm().loadRecord(e.record);
    						                        item.getForm().record = e.record;
    						                    }
    						                }
                                        }
    						        }
    						    }
    						},
                            {})
    						));
                        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>
  7. #27
    No problem:)

    This example is appropriate for all inline editors including a TextField, a ComboBox, a DropDownField, TriggerField, i.e. (any one that you can put into a Column Editor).

    And yes, it is not appropriate for an Edit command.
  8. #28
    Quote Originally Posted by Daniil View Post
    No problem:)

    This example is appropriate for all inline editors including a TextField, a ComboBox, a DropDownField, TriggerField, i.e. (any one that you can put into a Column Editor).

    And yes, it is not appropriate for an Edit command.
    So how do I combine inline editors with windowed editors like FormPanel? It is possible that some grid rows will use complex cell editors and some will use inline ones for the same column. Do I go with DropDownField or TriggerField or both and how to achieve that? That's in essence my question. I hope I make sense here.
  9. #29
    You can dynamically apply any field to be an editor. As it is demonstrated in the example.

    If you need a TextField, please apply a TextField as an editor.

    If you need a ComboBox, please apply a ComboBox.

    If you need a FormPanel or a GridPanel, please apply a TriggerField with a trigger to open either a FormPanel or a GridPanel.

    Hope this helps.
  10. #30
    Quote Originally Posted by Daniil View Post
    You can dynamically apply any field to be an editor. As it is demonstrated in the example.

    If you need a TextField, please apply a TextField as an editor.

    If you need a ComboBox, please apply a ComboBox.

    If you need a FormPanel or a GridPanel, please apply a TriggerField with a trigger to open either a FormPanel or a GridPanel.

    Hope this helps.
    Thanks for being patient with me Daniil! Hopefully, I'm on my way to grasping this concept better.:) So, what you suggest seems like a hybrid solution to me comprised of two examples mentioned in this thread:
    http://forums.ext.net/showthread.php...ll=1#post73887
    https://examples1.ext.net/#/Form/Tri...Dialog_Editor/

    For complex editors, if I get it correctly, I need to call the column setEditor function passing the TriggerField argument just like ComboBox or DateField for simple column editors. To do it dynamically, I guess I should capture the Sencha client code for the TriggerField as editor as you suggested earlier for other widgets.

    Please advise if I'm indeed on the right track here :)
Page 3 of 4 FirstFirst 1234 LastLast

Similar Threads

  1. [CLOSED] Cell editing with complex editor
    By Leonid_Veriga in forum 2.x Legacy 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 Legacy 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