[CLOSED] how to create multi select combobox on client side

  1. #1

    [CLOSED] how to create multi select combobox on client side

    Hi all,

    I have a grid with a custom editor for each row. Some rows need a multi combobox as editor(see example).
    I don't find the multi combo as a standard control in ext.js 3.4.0 so I was wondering if there is a way to create it on the client side.
    Any help would be highly appreciated.

     
    
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!ExtNet.IsAjaxRequest)
            {
                Store store = GridPanel1.GetStore();
                 
                store.DataSource = new object[] 
                { 
                    new object[] { "TextField", "text", null },
                     
                    new object[] { "NumberField", "10", null },
                     
                    new object[] { "ComboBox", "1", new object[] 
                        {
                            new object[] {"item1", "1"}, new object[] {"item2", "2"}, new object[] {"item3", "3"}
                        } 
                    },
                    
                    new object[] { "MultiComboBox", "1", new object[] 
                        {
                            new object[] {"item1", "1"}, new object[] {"item2", "2"}, new object[] {"item3", "3"}
                        } 
                    }
                };
                 
                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 getRenderer = function (value, metadata, record) {
    
                if (record.get("editor") == "ComboBox") {
                    var storeData = record.get("enum");
    
                    var k;
                    for (k = 0; k < storeData.length; ++k) {
    
                        if (storeData[k][1] == value) {
    
                            return storeData[k][0];
                        }
    
                    }
                }
    
                return value;
            };
    
            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"]
                            })
                        }));
    
    
                        column.getEditor().store.loadData(e.record.get("enum"));
    
                        break;
                    case "MultiComboBox":
    
           
    
    
                        column.setEditor(
    
                        new Ext.form.ComboBox({              // <== I NEED HELP HERE
    
                            displayField: "text",
                            mode: "local",
                            triggerAction: "all",
                            valueField: "value",
                            store: new Ext.data.SimpleStore({
                                fields: ["text", "value"]
                            })
                        }));
    
    
                        column.getEditor().store.loadData(e.record.get("enum"));
                        
                        break;
                        
                }
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                AutoHeight="true"
                Width="210">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="editor" />
                                    <ext:RecordField Name="test" />
                                    <ext:RecordField Name="enum" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="Editor" DataIndex="editor" />
                        <ext:Column Header="Test" DataIndex="test" > 
                            <Renderer Fn="getRenderer"/>
                        </ext:Column>
     
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <BeforeEdit Fn="setEditor" />
                    <Render Handler="this.getColumnModel().setEditable(1, true);" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 28, 2012 at 5:18 PM. Reason: [CLOSED]
  2. #2
    Hi,

    The simplest way would be to create a MultiCombo in markup and look at the Page Sources to get a required script.
    http://forums.ext.net/showthread.php...ll=1#post89172

    The MultiCombo sources are here:
    <Ext.NET sources root>\Ext.Net\Build\Ext.Net\extnet\core\form\MultiCombo.js
  3. #3
    Hi Daniil,

    I figured that one out and was able to add the multi combo, but it causes a strange error on my page when the grid is saved.
    I am using ArrayReader as store for my grid and the OnBeforeStoreChanged method to iterate through the updated grid entries.
    Other editors for my grid do not cause a problem (datefield, numberfield, textbox, etc.)

    Do you have some idea what the problem might be with the value from the combobox?

     
    	System.Exception: Unexpected JsonToken: String ---> 
    	
    	Newtonsoft.Json.JsonSerializationException: Unexpected JsonToken: String 
    	
    	at Ext.Net.RecordsToXmlConverter.DeserializeValue(JsonReader reader, XmlDocument document, XmlNamespaceManager manager, String propertyName, XmlNode currentNode) 
    	at Ext.Net.RecordsToXmlConverter.DeserializeNode(JsonReader reader, XmlDocument document, XmlNamespaceManager manager, XmlNode currentNode) 
    	at Ext.Net.RecordsToXmlConverter.DeserializeValue(JsonReader reader, XmlDocument document, XmlNamespaceManager manager, String propertyName, XmlNode currentNode)
    	at Ext.Net.RecordsToXmlConverter.DeserializeNode(JsonReader reader, XmlDocument document, XmlNamespaceManager manager, XmlNode currentNode) 
    	at Ext.Net.RecordsToXmlConverter.ReadJson(JsonReader reader, Type objectType, Object existingValue, JsonSerializer serializer) 
    	at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateValueNonProperty(JsonReader reader, Type objectType, JsonContract contract, JsonConverter converter) 
    	at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType) at Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType) 
    	at Newtonsoft.Json.JsonSerializer.Deserialize(JsonReader reader, Type objectType) 
    	at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings) 
    	at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonConverter[] converters) 
    	at Ext.Net.StoreDataHandler.get_XmlData() at Ext.Net.Store.MakeChanges() 
    	at Ext.Net.Store.DoSaving(String jsonData, XmlNode callbackParameters) 
    	
    	--- End of inner exception stack trace --- 
    	
    	at Ext.Net.Store.DoSaving(String jsonData, XmlNode callbackParameters) 
    	at Ext.Net.Store.RaiseAjaxPostBackEvent(String eventArgument)
  4. #4
    Please post all data submitted with the request apart from ViewState.
  5. #5
    Quote Originally Posted by Daniil View Post
    Please post all data submitted with the request apart from ViewState.
    Hi Daniil,

    using writebaseparams and the following code

    
                //JSON representation
                string gridJson = e.Parameters["rows"];
    
                //XML representation
                XmlNode gridXml = JSON.DeserializeXmlNode("{records:{record:" + gridJson + "}}");
    
                //array of Dictionaries
                Dictionary<string, string>[] grid1Data = JSON.Deserialize<Dictionary<string, string>[]>(gridJson);
    I managed to get hold of the data that is being serialized/deserialized:

    
    "\"[{\\\"Id\\\":\\\"3cc3a565-3043-4c8c-8a74-a0b60118cd4a\\\",\\\"Text\\\":\\\"1\\\",\\\"Value\\\":\\\"Nicht zugewiesen,Automatische Fehlerdetektion\\\",\\\"Editor\\\":\\\"MultiComboBox\\\",\\\"Enumeration\\\":[[\\\"Nicht zugewiesen\\\",\\\"Nicht zugewiesen\\\"],[\\\"Automatische Fehlerdetektion\\\",\\\"Automatische Fehlerdetektion\\\"],[\\\"Betrieblicher Unterhalt\\\",\\\"Betrieblicher Unterhalt\\\"],[\\\"Inspektionsingenieur\\\",\\\"Inspektionsingenieur\\\"],[\\\"Polizei und Verkehrsteilnehmer\\\",\\\"Polizei und Verkehrsteilnehmer\\\"]],\\\"ValueType\\\":\\\"Multilist\\\",\\\"OSEInventoryId\\\":\\\"d694de9d-c163-4705-abe4-a09e010687db\\\"}]\""
    the gridXml looks like this:

    
        [System.Xml.XmlDocument]: {Document}
        Attributes: null
        BaseURI: ""
        ChildNodes: {System.Xml.XmlChildNodes}
        FirstChild: {Element, Name="records"}
        HasChildNodes: true
        InnerText: "[{\"Id\":\"3cc3a565-3043-4c8c-8a74-a0b60118cd4a\",\"Text\":\"1\",\"Value\":\"Nicht zugewiesen,Automatische Fehlerdetektion\",\"Editor\":\"MultiComboBox\",\"Enumeration\":[[\"Nicht zugewiesen\",\"Nicht zugewiesen\"],[\"Automatische Fehlerdetektion\",\"Automatische Fehlerdetektion\"],[\"Betrieblicher Unterhalt\",\"Betrieblicher Unterhalt\"],[\"Inspektionsingenieur\",\"Inspektionsingenieur\"],[\"Polizei und Verkehrsteilnehmer\",\"Polizei und Verkehrsteilnehmer\"]],\"ValueType\":\"Multilist\",\"OSEInventoryId\":\"d694de9d-c163-4705-abe4-a09e010687db\"}]"
        InnerXml: "<records><record>[{\"Id\":\"3cc3a565-3043-4c8c-8a74-a0b60118cd4a\",\"Text\":\"1\",\"Value\":\"Nicht zugewiesen,Automatische Fehlerdetektion\",\"Editor\":\"MultiComboBox\",\"Enumeration\":[[\"Nicht zugewiesen\",\"Nicht zugewiesen\"],[\"Automatische Fehlerdetektion\",\"Automatische Fehlerdetektion\"],[\"Betrieblicher Unterhalt\",\"Betrieblicher Unterhalt\"],[\"Inspektionsingenieur\",\"Inspektionsingenieur\"],[\"Polizei und Verkehrsteilnehmer\",\"Polizei und Verkehrsteilnehmer\"]],\"ValueType\":\"Multilist\",\"OSEInventoryId\":\"d694de9d-c163-4705-abe4-a09e010687db\"}]</record></records>"
        IsReadOnly: false
        LastChild: {Element, Name="records"}
        LocalName: "#document"
        Name: "#document"
        NamespaceURI: ""
        NextSibling: null
        NodeType: Document
        OuterXml: "<records><record>[{\"Id\":\"3cc3a565-3043-4c8c-8a74-a0b60118cd4a\",\"Text\":\"1\",\"Value\":\"Nicht zugewiesen,Automatische Fehlerdetektion\",\"Editor\":\"MultiComboBox\",\"Enumeration\":[[\"Nicht zugewiesen\",\"Nicht zugewiesen\"],[\"Automatische Fehlerdetektion\",\"Automatische Fehlerdetektion\"],[\"Betrieblicher Unterhalt\",\"Betrieblicher Unterhalt\"],[\"Inspektionsingenieur\",\"Inspektionsingenieur\"],[\"Polizei und Verkehrsteilnehmer\",\"Polizei und Verkehrsteilnehmer\"]],\"ValueType\":\"Multilist\",\"OSEInventoryId\":\"d694de9d-c163-4705-abe4-a09e010687db\"}]</record></records>"
        OwnerDocument: null
        ParentNode: null
        Prefix: ""
        PreviousSibling: null
        SchemaInfo: {System.Xml.Schema.XmlSchemaInfo}
        Value: null
    and the exact exception thrown by the third statement from the quote above:

    Error converting value 
    
    "[{	"Id":"3cc3a565-3043-4c8c-8a74-a0b60118cd4a",
    	"Text":"1",
    	"Value":"Nicht zugewiesen,Automatische Fehlerdetektion",
    	"Editor":"MultiComboBox",
    	"Enumeration":[["Nicht zugewiesen","Nicht zugewiesen"],["Automatische Fehlerdetektion","Automatische Fehlerdetektion"],["Betrieblicher Unterhalt","Betrieblicher Unterhalt"],["Inspektionsingenieur","Inspektionsingenieur"],["Polizei und Verkehrsteilnehmer","Polizei und Verkehrsteilnehmer"]],
    	"ValueType":"Multilist",
    	"OSEInventoryId":"d694de9d-c163-4705-abe4-a09e010687db"}]" 
    
    to type 'System.Collections.Generic.Dictionary`2[System.String,System.String][]'. Line 1, position 557.

    It looks like the enumeration field in the record cannot be properly deserialized.
    I need that field on the client side in order to be able to create a store for my multilist select but i dont need it to be posted back.
    Is it possible to make the deserialization work or is it possible to exclude the field from being sent back to the server side?
  6. #6
    Quote Originally Posted by mirwais View Post
    It looks like the enumeration field in the record cannot be properly deserialized.
    Yes, because it is an array, not a string. It should be deserialized well to
    Dictionary<string, object>[]
    Quote Originally Posted by mirwais View Post
    I need that field on the client side in order to be able to create a store for my multilist select but i dont need it to be posted back.
    Is it possible to make the deserialization work or is it possible to exclude the field from being sent back to the server side?
    Please use the filterField option, as here:
    http://examples2.ext.net/#/GridPanel...s/Save_Filter/
  7. #7
    Hi Daniil,

    filtering the submitted values solved my problem.

    However, regarding the serialization, when the submitted values are no filtered i still get a serialization exception even if i do not try to deserialize explicitly. I get the exception even if i don't do anything in the handler. The handler itself executes with no error but i get an exception on the client side. The submitted data is as described above. could you please have a look as i can already see some controls where i could need an object [] being passed back as value.

    thanks.


    Quote Originally Posted by Daniil View Post
    Yes, because it is an array, not a string. It should be deserialized well to
    Dictionary<string, object>[]


    Please use the filterField option, as here:
    http://examples2.ext.net/#/GridPanel...s/Save_Filter/
  8. #8
    Could you provide a sample to reproduce?
  9. #9
    Hi Daniil,

    the data submitted is the one described above, namely

    
    "\"[{\\\"Id\\\":\\\"3cc3a565-3043-4c8c-8a74-a0b60118cd4a\\\",\\\"Text\\\":\\\"1\\\",\\\"Value\\\":\\\"Nicht zugewiesen,Automatische Fehlerdetektion\\\",\\\"Editor\\\":\\\"MultiComboBox\\\",\\\"Enumeration\\\":[[\\\"Nicht zugewiesen\\\",\\\"Nicht zugewiesen\\\"],[\\\"Automatische Fehlerdetektion\\\",\\\"Automatische Fehlerdetektion\\\"],[\\\"Betrieblicher Unterhalt\\\",\\\"Betrieblicher Unterhalt\\\"],[\\\"Inspektionsingenieur\\\",\\\"Inspektionsingenieur\\\"],[\\\"Polizei und Verkehrsteilnehmer\\\",\\\"Polizei und Verkehrsteilnehmer\\\"]],\\\"ValueType\\\":\\\"Multilist\\\",\\\"OSEInventoryId\\\":\\\"d694de9d-c163-4705-abe4-a09e010687db\\\"}]\""
    I will need some time to create a standalone example from scratch. I will come back to you in the beginning of next week.

    thanks

    Quote Originally Posted by Daniil View Post
    Could you provide a sample to reproduce?
  10. #10
    Thanks, we will wait a sample.

Similar Threads

  1. [CLOSED] How I can create a CalendarPanel in client side?
    By supera in forum 2.x Premium Help
    Replies: 2
    Last Post: May 18, 2012, 4:51 PM
  2. How to Create MultiCombo at client side?
    By zhangsir199 in forum 1.x Help
    Replies: 4
    Last Post: Aug 20, 2010, 5:53 AM
  3. [CLOSED] gridpanel row select client side
    By speedstepmem4 in forum 1.x Premium Help
    Replies: 5
    Last Post: Mar 20, 2009, 12:50 PM
  4. multi select add selected item on server side
    By [WP]joju in forum 1.x Help
    Replies: 4
    Last Post: Jan 09, 2009, 7:01 AM
  5. [FUTURE] [V0.8] Multi select, combobox
    By Jurke in forum Feature Requests
    Replies: 6
    Last Post: Dec 04, 2008, 9:44 AM

Tags for this Thread

Posting Permissions