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

Page 1 of 2 12 LastLast
  1. #1

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

    Hi,

    We have a requirement to show either a combobox or datefield editor in the grid panel based on the current records id. How to dynamically add them to a gridpanel from code behind?.

    The combobox should get populated based on the currently selected record id.

    Regards,
    Manoj.
    Last edited by Daniil; Feb 06, 2012 at 8:56 AM. Reason: [CLOSED]
  2. #2
    Hi,

    We have a requirement to show either a combobox or datefield editor in the grid panel based on the current records id. How to dynamically add them to a gridpanel from code behind?
    I can't see any way to do it server side, it should be done client side.

    Please investigate the example.
    http://forums.ext.net/showthread.php...ll=1#post68135

    The combobox should get populated based on the currently selected record id.
    Please look at the example.
    http://forums.ext.net/showthread.php...ll=1#post55844
  3. #3
    Hi Danil,

    Can we create the editors during the Page_Load?. If so, how can we configure each combobox editor to use its own store?.

    Regards
    Manoj
  4. #4
    I.e. will you have as many Stores as there are rows in the grid? I would highly recommend to avoid it. It might much worsen the application performance.

    Why can't you use a single store?
  5. #5
    Daniil,

    What i am trying to achive here is, when the user opens a page ( this will be displayed in a window ). It should display a grid with two columns.
    1. token - column
    2. value - column
    3. valuetype - column (hidden)

    If the user tries to select the correspoding value of a token then, based on the value type i should display either datetime field or a combobox. Another important point here is that if it is a combobox then i should populate the combobox values for the selected token dynamically from the server. Can we achive this?

    Regards,
    Manoj
  6. #6
    I think it's possible.

    Please clarify did you look at the examples I've referred? They definitely should help you to start.
  7. #7
    Daniil,

    Yes, I followed the example you have suggested in post
    http://forums.ext.net/showthread.php...ll=1#post68135

    My only problem here is that the combobox values comes from a server for a perticular token (selected rowid). So, how do i get these values from server in this event and then bind those to a newly created combo.
  8. #8
    I can suggest the following solution.

    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[] { "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>
  9. #9
    Daniil,

    Thank you very much for a quick superb solution. It was really very helpful.

    Regards,
    Manoj
  10. #10
    Daniil,

    I am having an issue in "setEditor" function. When i set an initial value for the datefield the value is not getting displayed in the datefield editor during edit.

    I am assigning the value as follows.

    var setEditor = function (e) {
             var column = e.grid.getColumnModel().columns[e.column];
             var ed = column.getCellEditor(e.row);
             if (ed) {
                ed.destroy();
             }
             switch (e.record.get("Editor")) {
                case "DateTime":
                   var df = new Ext.form.DateField();
                   if (e.value != null) {
                      var dt = Date.parseDate(e.value, 'm/d/Y');
                      df.setValue(dt);
                   }
                   column.setEditor(df);
                   break;
                case "Combobox":
                   column.setEditor(new Ext.form.ComboBox({ displayField: "Text",
                      valueField: "Text",
                      triggerAction: "all",
                      store: m_cmoboBoxEditorStore
                   }));
                   m_cmoboBoxEditorStore.on("beforeload", function (store, options) {
                      options.params = { placeHolder: e.record.data.Name }
                   }, null, { single: true });
                   break;
             }
          }
    Am i doing any thing wrong in this?.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 3
    Last Post: Feb 21, 2012, 6:40 AM
  2. Replies: 1
    Last Post: Feb 19, 2012, 1:07 PM
  3. [CLOSED] gridpanel with combobox column editor
    By Marcelo in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 30, 2011, 6:53 PM
  4. Replies: 2
    Last Post: Mar 22, 2011, 3:40 PM
  5. Replies: 13
    Last Post: Sep 06, 2010, 7:51 PM

Tags for this Thread

Posting Permissions