[CLOSED] how to set the ColumnGroup cell to be editable?

  1. #1

    [CLOSED] how to set the ColumnGroup cell to be editable?

    <%@ 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" }
                };
            }
        }
    </script>
     
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
     
        <script>
            var onCellClick = function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                var cls = Ext.fly(td).getAttribute("class"),
                    clsWithColumnId = cls.substr(cls.indexOf("x-grid-cell-") + 12),
                    columnId = clsWithColumnId.substr(0, clsWithColumnId.indexOf(" ")),
                    column = Ext.getCmp(columnId);
     
                if (App.ColumnGroup.contains(column)) {
                    alert("In the group");
                    how to set the ColumnGroup cell to be editable?
                } else {
                    alert("Out of the group");
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server">
                <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 ID="Column1" runat="server" Text="Test1" DataIndex="test1" />
     
                        <ext:Column ID="ColumnGroup" runat="server" Text="Group">
                            <Columns>                            
                                <ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" />
                                <ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3" />
                            </Columns>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <CellClick Fn="onCellClick" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 10, 2013 at 5:23 AM. Reason: [CLOSED]
  2. #2
    Hi @tobros,

    As I answered in another thread:
    http://forums.ext.net/showthread.php?25345#post111741

    Quote Originally Posted by Daniil View Post
    I can't see any way to re-use current editing functionality. So, it should be done from scratch.

    I would listen to a click event on columns where an editor should appear. When such a click occurs I would show a floating NumberField. It should be sized manually to fill all the columns in a clicked row. Then listen to a NumberField's mouse leave event to finish editing. A NumberField's value should be put to respective columns manually.
    This is still actual.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @tobros,

    As I answered in another thread:
    http://forums.ext.net/showthread.php?25345#post111741



    This is still actual.
    oh,thanks, let me have a try
    Last edited by tobros; Jul 01, 2013 at 3:06 AM.
  4. #4
    "I would listen to a click event on columns where an editor should appear. When such a click occurs I would show a floating NumberField. It should be sized manually to fill all the columns in a clicked row. Then listen to a NumberField's mouse leave event to finish editing. A NumberField's value should be put to respective columns manually."

    how to dynamic create a numberfield to the location below in the picture.
    Click image for larger version. 

Name:	QQ截图20130701152051.png 
Views:	20 
Size:	5.0 KB 
ID:	6473
  5. #5
    It is not a simple task. I need some time to try to create a sample.
  6. #6
    Here is a partially implemented prototype.

    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, 2 },
                    new object[] { "test2", 2, 3 },
                };
            }
        }
    </script>
      
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
      
        <script>
            var onCellClick = function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                var cls = Ext.fly(td).getAttribute("class"),
                    clsWithColumnId = cls.substr(cls.indexOf("x-grid-cell-") + 12),
                    columnId = clsWithColumnId.substr(0, clsWithColumnId.indexOf(" ")),
                    column = Ext.getCmp(columnId),
                    groupColumn = App.ColumnGroup,
                    cellToAlign,
                    editor = App.NumberField1;
      
                if (groupColumn.contains(column)) {
                    cellToAlign = view.getCell(record, groupColumn.items.getAt(0));
                    editor.setWidth(groupColumn.getWidth());
                    // editor.setValue(getGroupValue(groupColumn));
                    editor.showBy(cellToAlign, "tl-tl");
                    editor.focus(100);
                    editor.editedRecord = record;
                }
            };
    
            var getGroupValue = function (groupColumn) {
                // Here retrieve a group columns' values and combine it into a number
            };
    
            var onCompleteEdit = function (editor) {
                console.log("onCompleteEdit");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:NumberField 
                ID="NumberField1" 
                runat="server" 
                Floating="true" 
                EnableKeyEvents="true">
                <Listeners>
                    <Blur Fn="onCompleteEdit" />
                    <SpecialKey Handler="if (e.getKey() === e.ENTER) {
                                             e.preventDefault(); // to prevent PostBack if there is a single field in the form
                                             onCompleteEdit(this);
                                         }" />
                </Listeners>
            </ext:NumberField>
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" Type="Int" />
                                    <ext:ModelField Name="test3" Type="Int" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test1" DataIndex="test1" />
      
                        <ext:Column ID="ColumnGroup" runat="server" Text="Group">
                            <Columns>                            
                                <ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" />
                                <ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3" />
                            </Columns>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <CellClick Fn="onCellClick" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 1
    Last Post: Mar 15, 2013, 1:33 AM
  2. Replies: 4
    Last Post: Jan 30, 2013, 6:35 PM
  3. Replies: 12
    Last Post: Sep 07, 2012, 3:42 PM
  4. Replies: 4
    Last Post: Jul 10, 2012, 6:35 PM
  5. Replies: 1
    Last Post: Jul 10, 2012, 12:16 PM

Tags for this Thread

Posting Permissions