[CLOSED] Dynamic Editor in a Column

  1. #1

    [CLOSED] Dynamic Editor in a Column

    Hi All,

    We have a requirement for add controls (textbox,checkboc,etc) to editor in a column based on some condition. We are tried to give the controls in editor. But It will be shown a exception to leave the editor cell on first row from the editor control.

    Exception:
    Unable to get value of the property 'reset': object is null or undefined

    Please see my sample page and give your suggestion to resolve this issue.

    Regards

    Rameshkumar.T
    Attached Files
    Last edited by Daniil; Nov 05, 2011 at 7:36 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Please post a simplified .asxp right here wrapping in [CODE] tags.
  3. #3
    Hi Daniil,

    Here the code
    <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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="htmlHead" runat="server">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/ext-all-embedded.css" />
        <link rel="stylesheet" type="text/css" href="css/xtheme-slate.css" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
        <script runat="server">
            private class Sample
            {
                public int No { get; set; }
                public string Name { get; set; }
                public string Value { get; set; }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    string[] arr = { "1-Aphanumeric", "2-date", "3-Checkbox", "4-Dropdown", "5-Integer", "6-Numbers" };
                    List<Sample> samplelist = new List<Sample>();
                    for (int i = 0; i < 6; i++)
                    {
                        Sample sample = new Sample();
                        sample.No = i;
                        sample.Name = arr[i];
                        samplelist.Add(sample);
                    }
                    store1.DataSource = samplelist;
                    store1.DataBind();
                }
            }
            void save(object sender, BeforeStoreChangedEventArgs e)
            {
                string data = e.DataHandler.JsonData.ToString();
               
            }
            
            
            
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ScriptManager1" runat="server" RenderStyles="File">
            </ext:ResourceManager>
            <ext:Store runat="server" ID="store1" OnBeforeStoreChanged="save">
                <Reader>
                    <ext:JsonReader IDProperty="No">
                        <Fields>
                            <ext:RecordField Name="No">
                            </ext:RecordField>
                            <ext:RecordField Name="Name">
                            </ext:RecordField>
                            <ext:RecordField Name="Value">
                            </ext:RecordField>
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            <ext:Panel ID="Pnl1" runat="server" Border="false" Height="400px" StyleSpec="width:100%">
                <Content>
                    <ext:GridPanel ID="gridpanel" AutoScroll="true" runat="server" Border="true" StoreID="store1"
                        SelectionMemory="Disabled" Height="240">
                        <ColumnModel ID="ColumnModel1" runat="server" Width="100%">
                            <Columns>
                                <ext:Column DataIndex="No" Sortable="false" MenuDisabled="true" Resizable="true"
                                    Header="No." Width="120" ColumnID="No">
                                </ext:Column>
                                <ext:Column DataIndex="Name" Sortable="false" MenuDisabled="true" Resizable="true"
                                    Header="Name." Width="120" ColumnID="Name">
                                    <Renderer Fn="CreateControl" />
                                </ext:Column>
                                <ext:Column DataIndex="Value" Sortable="false" MenuDisabled="true" Resizable="true"
                                    Header="Mark 1" Width="120" ColumnID="Value">
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <Listeners>
                            <BeforeEdit Fn="BeforeColEdit" />
                        </Listeners>
                        <Buttons>
                            <ext:Button ID="btn_save" Text="Save" runat="server">
                                <Listeners>
                                    <Click Handler="#{gridpanel}.save();" />
                                </Listeners>
                            </ext:Button>
                        </Buttons>
                    </ext:GridPanel>
                </Content>
            </ext:Panel>
        </div>
        </form>
        <script language="javascript" type="text/javascript" defer="defer">
            function CreateControl(value, meta, record, rowIndex, colIndex, store, e) {
                if (record.data.No != null && rowIndex == 0) {
                    if (record.data.No == 0) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.TextField());
                    }
                    else if (record.data.No == 1) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.DateField());
                    }
                    else if (record.data.No == 2) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.Checkbox());
                    }
                    else if (record.data.No == 3) {
                        //ColumnModel1.columns[2].setEditor(new Ext.form.DropDownField());
                    }
                    else if (record.data.No == 4) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.NumberField());
                    }
                    else if (record.data.No == 5) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.NumberField());
                    }
                }
                return value;
            }
            function BeforeColEdit(value, meta, record, rowIndex, colIndex, store, e) {
                if (value.record.data.No != null ) {
                    if (value.record.data.No == 0) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.TextField());
                    }
                    else if (value.record.data.No == 1) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.DateField());
                    }
                    else if (value.record.data.No == 2) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.Checkbox());
                    }
                    else if (value.record.data.No == 3) {
                        //ColumnModel1.columns[2].setEditor(new Ext.form.DropDownField());
                    }
                    else if (value.record.data.No == 4) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.NumberField());
                    }
                    else if (value.record.data.No == 5) {
                        ColumnModel1.columns[2].setEditor(new Ext.form.NumberField());
                    }
                }
            }
        </script>
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    Hi,

    Please post a simplified .asxp right here wrapping in [CODE] tags.
  4. #4
    Thanks.

    Please see the example.

    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[] { "TextField", "text" },
                    new object[] { "NumberField", "10" },
                    new object[] { "ComboBox", "1" }
                };
                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 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 "TextField" : 
                        column.setEditor(new Ext.form.TextField());
                        break
    
                    case "NumberField" : 
                        column.setEditor(new Ext.form.NumberField());
                        break;
    
                    case "ComboBox" : 
                        column.setEditor(new Ext.form.ComboBox({
                            displayField : "text",
                            mode : "local",
                            triggerAction: "all",
                            valueField: "value",
                            store : new Ext.data.SimpleStore({
                                fields : ["text", "value"],
                                data   : [
                                    ["Item 1", "1"],
                                    ["Item 2", "2"],
                                    ["Item 3", "3"]
                                ]
                            })
                        }));
                        break;
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                AutoHeight="true" 
                Width="210">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="editor" />
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Editor" DataIndex="editor" />
                        <ext:Column Header="Test" DataIndex="test" />
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <BeforeEdit Fn="setEditor" />
                    <Render Handler="this.getColumnModel().setEditable(1, true);" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Hi Daniil,

    Thank you,
    It is working fine

    Quote Originally Posted by Daniil View Post
    Thanks.

    Please see the example.
  6. #6

    this.field.msgTarget is null or not an object error

    Hi, I try to use your example to dynamically add/remove editor and get this error:
    this.field.msgTarget is null or not an object error. I'm new to the ext.net - could somebody help me?
    Thanks,
    Jenny

    this is my code:
    EditExample.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditExample.aspx.cs" Inherits="myApp.EditExample" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var setEditor = function (e) {
                var column = e.grid.getColumnModel().columns[e.column],
                    ed = column.getCellEditor(e.row);
                if (ed && (e.value != null || e.value != '')) {
                    ed.destroy();
                }
                else {
                    column.setEditor(new Ext.form.TextField());
                }
            }
    </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
    
        <ext:ResourceManager runat="server" />
        <ext:Store ID="extStore" runat="server" >
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name = "Name" />
                            <ext:RecordField Name = "Code" ></ext:RecordField>
                            <ext:RecordField Name = "Description" ></ext:RecordField>
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            <div>
        <ext:GridPanel ID="extGrd" runat="server" StripeRows="true" TrackMouseOver="true"
        StoreID="extStore" Cls="x-grid-custom" 
        Height="250px" Layout="fit">
        <ColumnModel ID="cmFC" runat="server">    
            <Columns>
                <ext:Column ColumnID="Name" DataIndex="Name" Header="Name">
                </ext:Column>
                <ext:Column ColumnID="Code" DataIndex="Code" Header="Code">
                </ext:Column>
                <ext:Column ColumnID="Description" DataIndex="Description" Header="Description" Editable ="true" >
                    <Editor>
                        <ext:TextField ID="TextField1" runat="server"></ext:TextField>
                    </Editor>
                </ext:Column>
            </Columns>    
        </ColumnModel>
        <Listeners>
            <BeforeEdit Fn="setEditor" />
            <Render Handler="this.getColumnModel().setEditable(0, true);" />
        </Listeners>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" MoveEditorOnEnter="true"/>
        </SelectionModel>    
        <LoadMask ShowMask="true" />
        </ext:GridPanel>
        </div>
    
        </form>
    </body>
    </html>
    EditExample.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace myApp
    {
        public class info
        {
            public string Name { get; set; }
            public string Code { get; set; }
            public string Description { get; set; }
        }
    
        public partial class EditExample : System.Web.UI.Page
        {
            protected void Page_Load( object sender, EventArgs e )
            {
                List<info> thisInfo = new List<info>();
                thisInfo.Add( new info { Code = "1", Description = "one", Name = "one Name" } );
                thisInfo.Add( new info { Code = "2", Description = "two", Name = "two Names" } );
                thisInfo.Add( new info { Code = "3", Description = "three", Name = "three Names" } );
                thisInfo.Add( new info { Code = "4", Description = "four", Name = "four Names" } );
                thisInfo.Add( new info { Code = "5", Description = "five", Name = "five Names" } );
                thisInfo.Add( new info { Code = "6", Description = "six", Name = "six Names" } );
    
                this.extStore.DataSource = thisInfo;
                this.extStore.DataBind();
            }
        }
    }
    Quote Originally Posted by Daniil View Post
    Thanks.

    Please see the example.

    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[] { "TextField", "text" },
                    new object[] { "NumberField", "10" },
                    new object[] { "ComboBox", "1" }
                };
                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 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 "TextField" : 
                        column.setEditor(new Ext.form.TextField());
                        break
    
                    case "NumberField" : 
                        column.setEditor(new Ext.form.NumberField());
                        break;
    
                    case "ComboBox" : 
                        column.setEditor(new Ext.form.ComboBox({
                            displayField : "text",
                            mode : "local",
                            triggerAction: "all",
                            valueField: "value",
                            store : new Ext.data.SimpleStore({
                                fields : ["text", "value"],
                                data   : [
                                    ["Item 1", "1"],
                                    ["Item 2", "2"],
                                    ["Item 3", "3"]
                                ]
                            })
                        }));
                        break;
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                AutoHeight="true" 
                Width="210">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="editor" />
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Editor" DataIndex="editor" />
                        <ext:Column Header="Test" DataIndex="test" />
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <BeforeEdit Fn="setEditor" />
                    <Render Handler="this.getColumnModel().setEditable(1, true);" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jan 14, 2012 at 8:40 AM. Reason: Please use [CODE] tags
  7. #7
    Hi,

    In the setEditor function you destroy an old editor and don't create a new one.

    I think you should remove the "else" statement of "if" one.
  8. #8

    Dynamic Editor in a Column

    I only need the cell to be editable if it's empty - if there is a value, I don't want the value to be changed. If I add the editor after it's destroyed, the cell becomes editable again. Is there a way to make the cell read only? I tried setting a readonly attribute, but it the cell was still editable.
    Thanks,
    Jenny

    Quote Originally Posted by Daniil View Post
    Hi,

    In the setEditor function you destroy an old editor and don't create a new one.

    I think you should remove the "else" statement of "if" one.
  9. #9
    Please handle the GridPanel's BeforeEdit.
    http://docs.sencha.com/ext-js/3-4/#!...ent-beforeedit

    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[] { "test", "", "test" },
                    new object[] { "", "test", "test" },
                    new object[] { "test", "", "" },
                };
                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 onBeforeEdit = function (e) {
                return Ext.isEmpty(e.value);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Test2" DataIndex="test2">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Test3" DataIndex="test3">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <BeforeEdit Fn="onBeforeEdit" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  10. #10
    Here we are experiencing the same issue.


    I would like the editor just when a flag (provided throught mine StoreItem) is true, in other words, if the item is true, then show the editor otherwise it will not show.

    Do you have any solution (or workaround :) )?

    Thanks

Similar Threads

  1. Combobox Grid Editor Dynamic
    By sysmo in forum 1.x Help
    Replies: 0
    Last Post: Aug 08, 2012, 7:36 PM
  2. Replies: 12
    Last Post: Sep 20, 2011, 2:33 PM
  3. [CLOSED] Combox Editor- Dynamic Combo box list Value
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 22, 2010, 8:02 PM
  4. [CLOSED] GridPanel Dynamic Editor Fields
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jan 18, 2010, 2:13 PM
  5. [CLOSED] Dynamic Text Editor in grid error
    By CMA in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 18, 2009, 8:19 AM

Tags for this Thread

Posting Permissions