[CLOSED] How to dynamically add either Combobox or DateField to Gridpanel Column Editor from code behind

**mohan.bizbites** · Mar 03, 2015, 10:25 AM

Hi Team

The below example is not working in Ext3.X, can anyone do the need full please.

Your help is highly appreciable

Regards
Mohan

<%@ 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" },
            };
            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 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;
            }
        };

        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 runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Store
            ID="ComboBoxStore" 
            runat="server" 
            OnRefreshData="ComboBoxStore_RefreshData"
            AutoLoad="false">
            <Proxy>
                <ext:PageProxy />
            </Proxy>
            <Reader>
                <ext:ArrayReader IDProperty="value">
                    <Fields>
                        <ext:RecordField Name="text" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            AutoHeight="true"
            Width="310">
            <Store>
                <ext:Store 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 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>

**Daniil** · Mar 03, 2015, 11:09 AM

Hi @mohan.bizbites,

The below example is not working in Ext3.X

Let's go step by step. Please clarify what is exactly happening with the example running it with Ext.NET v3?

**mohan.bizbites** · Mar 04, 2015, 2:32 AM

Hi Daniil

Below functionality is not working, this.getColumnModel() is not available too.

<Render Handler="this.getColumnModel().setEditable(2, true);" />

Regards
Mohan

**fabricio.murta** · Mar 04, 2015, 6:10 AM

Hello, Mohan!

What Ext.Net version did you run this on? I couldn't run your code even on Ext.NET v2.5.

The first error I see here is the use of a class that was changed since 2012, and was discussed on this thread:
Ext.net 2 Beta Realese: Type Ext.Net.StoreRefreshDataEventArgs is not defined

Also, the arrangements of the PageProxy and ArrayReader is completely different than current syntax. Neither 2.5+ nor 3.0+ versions are accepting the code as you built it.

I believe you have to revisit the syntax of Ext.NET to adequate your code to the new format. One example very close of what I believe you are trying to migrate to Ext.NET 3.x is this:
GridPanel ArrayGrid: PageProxy with DirectMethod.

I believe that, once the page is written in the current Ext.NET supported syntax, we can start working on the renderer handler and so on.

You may find the new version has changed a lot in the structure, but also find useful new features inside. I hope!

Please let us know if you are not able to review your sample's layout based on VS's intellisense and the current examples (https://examples3.ext.net/), and we will give you advices on the problems you find.

Well, I hope this helps!

**mohan.bizbites** · Mar 04, 2015, 12:44 PM

Hi

The code which i have copied earlier is from one of the old post which i found in the forums. I want to achieve the same functionality.

Now I have provided the code for Ext.Net 3.0 version and the actual code is below

<Render Handler="this.getColumnModel().setEditable(2, true);" /> this handler is not working, please let me know round about for this to fix this

Regards
Mohan

<%@ 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" },
            };
            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;
            }
        };


        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:GridPanel
            ID="GridPanel1"
            runat="server"
            AutoHeight="true"
            Width="310">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Fields>
                        <ext:ModelField Name="id"/>
                        <ext:ModelField Name="editor" />
                        <ext:ModelField Name="test" />
                    </Fields>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="Column1" Text="ID" DataIndex="id" runat="server" />
                    <ext:Column ID="Column2" Text="Editor" DataIndex="editor" runat="server" />
                    <ext:Column ID="Column3" Text="Test" DataIndex="test" runat="server">
                        <Renderer Fn="testRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Listeners>
                <BeforeEdit Fn="setEditor" />
                <Render Handler="this.getColumnModel().setEditable(2, true);" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>

**fabricio.murta** · Mar 04, 2015, 7:11 PM

Hello, Mohan!

I could run your sample, it is very clean, thanks! But it does not really give me a lead of what you really want to attain in that screen. I believe you want to do exactly what an example in our examples explorer does.

There is no setEditable() method for column models. Only text fields have this. Not really sure how you come up with this approach. Maybe it worked on the older versions like this.

But regardless of that, there's a sample on our examples explorer that actually changes column/cell editor depending on the button you click.

The example is this: TreePanel / Basic / Editors

Although a TreePanel, the concept of editors is very similar. I am sure you will be able to set the editors accordingly with the approach illustrated there.

This might also interest you: it uses a different editor in each row of the grid: GridPanel / Component Column / Multiple Editors

I believe in these two examples there's everything you need to know in order to build such a view. You'll notice the approach is noticeably different than the one you were trying. I hope it is an acceptable approach for you. Let us know otherwise.

**fabricio.murta** · Mar 04, 2015, 7:16 PM

This might also interest you: Dynamic editor in GridPanel

**mohan.bizbites** · Mar 05, 2015, 1:16 PM

Hi

Thanks for you suggestion, thats exactly what we want. But i am facing problem when try to bind store using generic list. We are unable to bind data, plz check the below example and let us know your feedback.

Thanks
Mohan

Code behind
---------------

namespace BOP_Example
{
    public partial class ColumnWithMultipleEditors : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<Parameter> lst = new List<Parameter>();
                Parameter p1 = new Parameter();           
                p1.Value = 10;
                p1.Index = 0;

                Parameter p2 = new Parameter();              
                p2.Value = "Pass";
                p2.Index = 1;

                lst.Add(p1);
                lst.Add(p2);

                this.Store1.DataSource = lst;
                this.Store1.DataBind();
            }
        }
    }
    public class Parameter
    {
        public  object Value  { get; set; }
        public int Index { get; set; }
    }
}

HTML
-----
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColumnWithMultipleEditors.aspx.cs" Inherits="BOP_Example.ColumnWithMultipleEditors" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
     <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>Multiple Editors</h1>        
        <ext:GridPanel ID="GridPanel1" 
            runat="server" 
            Title="Multiple Editors" 
            Width="400" 
            Height="180">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="Value"/>
                                <ext:ModelField Name="Index" Type="Int" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                     <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" />

                     <ext:ComponentColumn ID="ComponentColumn1" runat="server" Flex="1" Editor="true" DataIndex="Value">
                        <Component>
                            <ext:NumberField ID="NumberField1" runat="server" />
                            <ext:TextField ID="TextField1" runat="server" />
                        </Component>
                        <Listeners>
                            <BeforeBind Handler="e.config = e.config[e.record.data.Index];" />
                        </Listeners>
                        <Renderer Handler="metadata.style='color:gray;'; return '[none]';" />
                     </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>  
    </form>
</body>
</html>

**fabricio.murta** · Mar 05, 2015, 4:49 PM

Hello, Mohan!

You can't bind your data because you are using the ArrayReader mechanism with an object.

See the example how they define the data in just an array of objects and just bind data to the .Data instead of .DataSource+.DataBind?

You have two choices:
1. use an array of objects like in the example.
2. use the object how you are doing with .DataSource+.DataBind but remove the Reader section from Store1.

I hope this helps!

Thread: [CLOSED] How to dynamically add either Combobox or DateField to Gridpanel Column Editor from code behind

Thread Tools

Search Thread

Display

[CLOSED] How to dynamically add either Combobox or DateField to Gridpanel Column Editor from code behind

Similar Threads

[CLOSED] How to dynamically add either Combobox or DateField to Gridpanel Column Editor from code behind

[CLOSED] Dynamically change column editor with row editor plugin

[CLOSED] Leaving DateField GridPanel column editor unmodified visibly updates the record

gridpanel: combobox in column editor not showing after edit

[CLOSED] gridpanel with combobox column editor

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] How to dynamically add either Combobox or DateField to Gridpanel Column Editor from code behind

[CLOSED] How to dynamically add either Combobox or DateField to Gridpanel Column Editor from code behind

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us