[CLOSED] MultiCombo vs Renderer Problem

Page 2 of 2 FirstFirst 12
  1. #11
    Hello,

    i applied the same as provided example (https://examples4.ext.net/#/GridPane...ulticombo_Map/) especially for (Renderer function), and i added the model type to be as type Object in code behind (C#) for model (multi combo column) with no success.

    i had missed something in my code, can you help me :(

    ASPX Page
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultiComboExample.aspx.cs" Inherits="FFMS.MultiComboExample" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
       
        <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1">
       
        <meta http-equiv='cache-control' content='no-cache'>
        <meta http-equiv='expires' content='0'>
        <meta http-equiv='pragma' content='no-cache'>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" /> 
        <ext:ResourcePlaceHolder runat="server" Mode="Style" /> 
         <title></title>
         <script src="FBFJS.js"></script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        
            <ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false"  DisableViewState="true" AjaxTimeout="900000">
             <Listeners>
                <DocumentReady Handler="App.direct.drawTable()" />
            </Listeners>
            </ext:ResourceManager>
    
            <ext:Viewport runat="server" ID="VP1"  Layout="BorderLayout" Cls="ViewPortStyle">
            <Items>
    
                  <ext:GridPanel ID="GridPanel1" runat="server"  Region="Center"  AutoLoad="false" AutoScroll="true"  InvalidateScrollerOnRefresh="false" Layout="FitLayout"  >
                  <Store>
                        <ext:Store ID="Store1" runat="server">
                           <Sorters>
                                  <ext:DataSorter Property="start" Direction="ASC" />
                            </Sorters> 
                        </ext:Store>
                    </Store>
                    <Plugins>
                        <ext:GridFilters runat="server" />
                        <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false"  CancelBtnText="<%$ Resources:Language, Cancel %>"  SaveBtnText="<%$ Resources:Language, Save %>" >
                        </ext:RowEditing>
                    </Plugins>
                    <SelectionModel>
                     <ext:RowSelectionModel runat="server" Mode="Single" />
                    </SelectionModel>
                  </ext:GridPanel>
    
    
    
            </Items>
            </ext:Viewport>
    
    
         <ext:Hidden runat="server" ID="ComboboxesStores" />
        </form>
    
      
    
    
    </body>
    </html>

    ASPX.CS class:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    using System.Xml;
    using System.Web.UI.HtmlControls;
    using System.Data;
    using System.Text;
    using System.Security.Cryptography;
    using System.Text;
    using System.IO;
    using System.Text.RegularExpressions;
    
    namespace FFMS
    {
        public partial class MultiComboExample : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            //Function that define the store (data) of Multi Combo box
            // And add Column Multi Combo into grid panel
            // Then Bind data from static xml values into grid
            [DirectMethod]
            public void drawTable()
            {
                try
                {
                    List<string> StoresIDs = new List<string>();
    
                    string xmlComboStore = "<NewDataSet xmlns=\"\"><Table><LKPID>1</LKPID><LKPNameA>V1</LKPNameA></Table><Table><LKPID>2</LKPID><LKPNameA>V2</LKPNameA></Table><Table><LKPID>3</LKPID><LKPNameA>V3</LKPNameA></Table>-</NewDataSet>";
                    XmlDocument xdoc2 = new XmlDocument();
                    xdoc2.LoadXml(xmlComboStore);
                    XmlNodeList nodes2 = xdoc2.DocumentElement.SelectNodes("/NewDataSet/Table");
    
                    List<object> data = new List<object>();
                    data.Add(new { ID = "-1", Name = "" });
    
                    foreach (XmlNode node2 in nodes2)
                    {
                        string id = node2.SelectSingleNode("LKPID").InnerText;
                        string name = node2.SelectSingleNode("LKPNameA").InnerText;
    
                        data.Add(new { ID = id, Name = name });
                    }
    
                    Ext.Net.Store s = new Store();
                    s.ID = "SuperiorFunctionalLocation_Store";
                    StoresIDs.Add("SuperiorFunctionalLocation_Store");
    
                    Ext.Net.Model m = new Model { IDProperty = "ID" };
    
                    Ext.Net.ModelField mf1 = new ModelField();
                    mf1.Name = "ID";
                    m.Fields.Add(mf1);
    
                    Ext.Net.ModelField mf2 = new ModelField();
                    mf2.Name = "Name";
                    m.Fields.Add(mf2);
    
                    s.Model.Add(m);
    
                    s.DataSource = data;
                    s.DataBind();
                    s.AddTo(this.form1);
    
                    ComboboxesStores.SetValue(ArrayListToString(ref StoresIDs).ToString());
                    Ext.Net.Model model = new Model();
    
                    ModelField modelField1 = new ModelField();
                    modelField1.Name = "PK";
                    modelField1.ServerMapping = "PK";
                    model.Fields.Add(modelField1);
    
                    GridPanel1.ColumnModel.Columns.Add(new ColumnBase[]
                    { 
                        new Column 
                        {
                            Text = "PK",
                            DataIndex = "PK",
                            MinWidth=240,
                            CellWrap=true,
                            Filter={new StringFilter{ DataIndex="PK" }},
                            Editor =
                            {
                                new Ext.Net.TextField
                                {
                                    ID="PK",
                                    Text="PK",
                                    MaxLength=Convert.ToInt32(20),
                                    EnforceMaxLength=true,
                                }
                            }
    
                        },
                    });
    
                    ModelField modelField = new ModelField();
                    modelField.Name = "SuperiorFunctionalLocation";
                    modelField.ServerMapping = "SuperiorFunctionalLocation";
                    modelField.Type = ModelFieldType.Object;
    
                    GridPanel1.ColumnModel.Columns.Add(new ColumnBase[]
                    { 
                        new Column 
                        {
                            Text = "SuperiorFunctionalLocation",
                            DataIndex = "SuperiorFunctionalLocation",
                            MinWidth=240,
                            CellWrap=true,
                            Filter = { new StringFilter { DataIndex="SuperiorFunctionalLocation" } },
                            Renderer =
                            {
                                Handler=string.Format(
                                    "return MultiComboGrid(value, metadata, record, rowIndex, colIndex, store, '{0}')",
                                    "SuperiorFunctionalLocation"
                                )
                            },
                            Editor =
                            {
                                new Ext.Net.MultiCombo{
                                    ID="SuperiorFunctionalLocation",
                                    QueryMode=Ext.Net.DataLoadMode.Local,
                                    ForceSelection=true,
                                    StoreID="SuperiorFunctionalLocation_Store",
                                    DisplayField="Name",
                                    ValueField="ID",
                                    TriggerAction=Ext.Net.TriggerAction.All,
                                    ListConfig= new BoundList{Cls="list-with-empty"}
                                }
                            }
                        },
                    }); // end  GridPanel1.ColumnModel.Columns.Add
    
                    Store1.Model.Add(model);
    
                    string Results = "<NewDataSet><Table><SuperiorFunctionalLocation>1,2</SuperiorFunctionalLocation><PK>123</PK></Table></NewDataSet>";
                    XmlDocument xdoc = new XmlDocument();
                    xdoc.LoadXml(Results);
                    XmlNodeList nodes = xdoc.DocumentElement.SelectNodes("/NewDataSet/Table");
                    System.Xml.XmlReader xmr = new XmlNodeReader(xdoc);
    
                    DataSet ds = new DataSet();
                    ds.ReadXml(xmr);
                    if (ds.Tables.Count != 0)
                    {
                        Store1.DataSource = ds;
                        Store1.DataBind();
                    }
                    GridPanel1.Render();
                }
                catch (Exception ex) { }
            }//end drawTable()
    
    
            //Function that convert a list to a string with values delimited with "~"
            public static string ArrayListToString(ref List<string> _ArrayList)
            {
                int intCount;
                string strFinal = "";
    
                for (intCount = 0; intCount <= _ArrayList.Count - 1; intCount++)
                {
                    if (intCount > 0)
                    {
                        strFinal += "~";
                    }
    
                    strFinal += _ArrayList[intCount].ToString();
                }
    
                return strFinal;
            }
            // end ArrayListToString
    
    
        }
    }
    Javascript Page:

    
    
    function MultiComboGrid(value, metadata, record, rowIndex, colIndex, store, customParams) {
        console.log("HAMZA");
    
        var cs = listToAray(App.ComboboxesStores.getValue(), '~');
    
    
        value = "1,2";
        if (Ext.isString(value) && value.match(/,/)) {
            value = value.split(",");
        }
        console.log("value: " + value);
        var cell, rarr, rec;
        if (Ext.isArray(value)) {
            var rarr = [];
            Ext.each(value, function (record_id) {
    
                if (cs.indexOf(customParams + "_Store") != -1) {
    
                    var i = cs.indexOf(customParams + "_Store");
                    var script = "var rec=App." + cs[i] + ".getById(" + record_id + ");";
                    console.log(script);
                    eval(script);
                    //console.log('here5');
                    console.log("name: " + rec.data.Name);
                    if (!Ext.isEmpty(rec)) {
                        rarr.push(rec.data.Name);
                    }
    
                } //  if (cs.indexOf(customParams + "_Store") != -1)
    
    
    
            });
            cell = rarr.join(", ");
        } else {
            var iz = cs.indexOf(customParams + "_Store");
            var script1 = " rec=App." + cs[iz] + ".getById(" + value + ");";
            console.log(script1);
            eval(script1);
            cell = Ext.isEmpty(rec) ? "" : rec.data.Name;
        }
    
        return cell;
    
    }
    //take a string and convert it to array. Split the string on a sepecific separator sent to the function
    function listToAray(fullString, separator) {
    
        var fullArray = [];
        if (fullString !== undefined) {
            if (fullString.indexOf(separator) == -1) {
                fullArray.push(fullString);
            } else {
                fullArray = fullString.split(separator);
            }
        }
    
        return fullArray;
    }; //end of listToArray
    thank you again.
  2. #12
    Hello @geovision,

    Quote Originally Posted by geovision
    i added the model type to be as type Object in code behind (C#) for model (multi combo column) with no success.
    "Added" is the key here. I think you missed exactly the "added" part here.

    See in your code behind line 78, you add the ModelField for PK to the Model you're defining. Where do you do the same to the other field, SuperiorFunctionalLocation? Just setting it as object type won't suffice if it is not included to the store's model.

    Then, I don't see you converting the SuperiorFunctionalLocation to array. If client-side receives the string "1,2", nothing is going to get selected in the multicombo. You must at least bind a converter to the ModelField if you are going to consistently provide a comma-separated string of values, so that it turns the string into an array whenever it is the case.

    In other words, if you don't convert SuperiorFunctionalLocation to array at server-side (before Store1.DataBind();), you must then use a converter at client side, that can be assigned to the field like this:

    modelField.Convert.Handler = "return Ext.isArray(value) ? value : value.split(',')"; // Convert string to array
    Hope this helps! These are just two issues I can see by your code sample, looks like just a little distraction for the first issue, and something you'd tackle in the second, once you fixed the first. Watch out, as there could be more depending how you fix each issue; give your sample a good review; simplifying is saving you time to understand what's wrong around if anything else.
    Fabrício Murta
    Developer & Support Expert
  3. #13
    Thank you it is solved now.

    Appreciated,
  4. #14
    Glad we could make it work, thank you for the feedback!
    Fabrício Murta
    Developer & Support Expert
  5. #15
    Just in case, I finished cleaning up the code sample you provided, as it gives a good example on getting data from XML, I decided to share the working version here in case we need that in the future.

    Here, as we worked with XML and decided not to treat it server-side, I added the converter at client-side, to turn a comma-separated string into a value whenever it is provided as the record's value, ensuring the field always has values that can be mapped into the multicombo's selection.

    Now all in one file, and I removed most of the unrelated parts of code. Also "formatted" the contents of the XML and added a few more records to the grid.

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Data" %>
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
        <script runat="server">
            //Function that define the store (data) of Multi Combo box
            // And add Column Multi Combo into grid panel
            // Then Bind data from static xml values into grid
            [DirectMethod]
            public void drawTable()
            {
                try
                {
                    List<string> StoresIDs = new List<string>();
    
                    string xmlComboStore = @"
                        <NewDataSet xmlns="""">
                            <Table>
                                <LKPID>1</LKPID>
                                <LKPNameA>V1</LKPNameA>
                            </Table><Table>
                                <LKPID>2</LKPID>
                                <LKPNameA>V2</LKPNameA>
                            </Table><Table>
                                <LKPID>3</LKPID>
                                <LKPNameA>V3</LKPNameA>
                            </Table>
                        </NewDataSet>";
                    XmlDocument xdoc2 = new XmlDocument();
                    xdoc2.LoadXml(xmlComboStore);
                    XmlNodeList nodes2 = xdoc2.DocumentElement.SelectNodes("/NewDataSet/Table");
    
                    List<object> data = new List<object>();
                    data.Add(new { ID = "-1", Name = "" });
    
                    foreach (XmlNode node2 in nodes2)
                    {
                        string id = node2.SelectSingleNode("LKPID").InnerText;
                        string name = node2.SelectSingleNode("LKPNameA").InnerText;
    
                        data.Add(new { ID = id, Name = name });
                    }
    
                    Ext.Net.Store s = new Store();
                    s.ID = "SuperiorFunctionalLocation_Store";
                    StoresIDs.Add("SuperiorFunctionalLocation_Store");
    
                    Ext.Net.Model m = new Model { IDProperty = "ID" };
    
                    Ext.Net.ModelField mf1 = new ModelField();
                    mf1.Name = "ID";
                    m.Fields.Add(mf1);
    
                    Ext.Net.ModelField mf2 = new ModelField();
                    mf2.Name = "Name";
                    m.Fields.Add(mf2);
    
                    s.Model.Add(m);
    
                    s.DataSource = data;
                    s.DataBind();
                    s.AddTo(this.form1);
    
                    ComboboxesStores.SetValue(ArrayListToString(ref StoresIDs).ToString());
                    Ext.Net.Model model = new Model();
    
                    ModelField modelField1 = new ModelField();
                    modelField1.Name = "PK";
                    model.Fields.Add(modelField1);
    
                    GridPanel1.ColumnModel.Columns.Add(new ColumnBase[]
                    {
                        new Column
                        {
                            Text = "PK",
                            DataIndex = "PK",
                            MinWidth=240,
                            CellWrap=true,
                            Filter={new StringFilter{ DataIndex="PK" }},
                            Editor =
                            {
                                new Ext.Net.TextField
                                {
                                    ID="PK",
                                    Text="PK",
                                    MaxLength=Convert.ToInt32(20),
                                    EnforceMaxLength=true,
                                }
                            }
                        },
                    });
    
                    ModelField modelField = new ModelField();
                    modelField.Name = "SuperiorFunctionalLocation";
                    modelField.Type = ModelFieldType.Object;
                    modelField.Convert.Handler = "return Ext.isArray(value) ? value : value.split(',')"; // Convert string to array
                    model.Fields.Add(modelField);
    
                    GridPanel1.ColumnModel.Columns.Add(new ColumnBase[]
                    {
                        new Column
                        {
                            Text = "SuperiorFunctionalLocation",
                            DataIndex = "SuperiorFunctionalLocation",
                            MinWidth=240,
                            CellWrap=true,
                            Filter = { new StringFilter { DataIndex="SuperiorFunctionalLocation" } },
                            Renderer =
                            {
                                Handler=string.Format(
                                    "return MultiComboGrid(value, metadata, record, rowIndex, colIndex, store, '{0}')",
                                    "SuperiorFunctionalLocation"
                                )
                            },
                            Editor =
                            {
                                new Ext.Net.MultiCombo{
                                    ID="SuperiorFunctionalLocation",
                                    QueryMode=Ext.Net.DataLoadMode.Local,
                                    ForceSelection=true,
                                    StoreID="SuperiorFunctionalLocation_Store",
                                    DisplayField="Name",
                                    ValueField="ID",
                                    TriggerAction=Ext.Net.TriggerAction.All,
                                    ListConfig= new BoundList{Cls="list-with-empty"}
                                }
                            }
                        },
                    }); // end  GridPanel1.ColumnModel.Columns.Add
    
                    Store1.Model.Add(model);
    
                    string Results = @"
                        <NewDataSet>
                            <Table>
                                <SuperiorFunctionalLocation>1,2</SuperiorFunctionalLocation>
                                <PK>123</PK>
                            </Table><Table>
                                <SuperiorFunctionalLocation>1</SuperiorFunctionalLocation>
                                <PK>124</PK>
                            </Table><Table>
                                <SuperiorFunctionalLocation>1,3</SuperiorFunctionalLocation>
                                <PK>125</PK>
                            </Table><Table>
                                <SuperiorFunctionalLocation>2,3</SuperiorFunctionalLocation>
                                <PK>126</PK>
                            </Table>
                        </NewDataSet>";
                    XmlDocument xdoc = new XmlDocument();
                    xdoc.LoadXml(Results);
                    XmlNodeList nodes = xdoc.DocumentElement.SelectNodes("/NewDataSet/Table");
                    System.Xml.XmlReader xmr = new XmlNodeReader(xdoc);
    
                    DataSet ds = new DataSet();
                    ds.ReadXml(xmr);
                    if (ds.Tables.Count != 0)
                    {
                        Store1.DataSource = ds;
                        Store1.DataBind();
                    }
                    GridPanel1.Render();
                }
                catch (Exception ex) { }
            }//end drawTable()
    
            //Function that convert a list to a string with values delimited with "~"
            public static string ArrayListToString(ref List<string> _ArrayList)
            {
                int intCount;
                string strFinal = "";
    
                for (intCount = 0; intCount <= _ArrayList.Count - 1; intCount++)
                {
                    if (intCount > 0)
                    {
                        strFinal += "~";
                    }
    
                    strFinal += _ArrayList[intCount].ToString();
                }
    
                return strFinal;
            }
            // end ArrayListToString
        </script>
        <script>
            function MultiComboGrid(value, metadata, record, rowIndex, colIndex, store, customParams) {
                try {
                    var cs = listToAray(App.ComboboxesStores.getValue(), '~');
                    var names = [];
    
                    if (Ext.isArray(value)) {
                        for (var z = 0; z < value.length; z++) {
                            if (cs.indexOf(customParams + "_Store") != -1) {
                                var i = cs.indexOf(customParams + "_Store");
    
                                var r = App[cs[i]].getById(value[z]);
    
                                names.push(r.data.Name);
    
                            } // if (cs.indexOf(customParams + "_Store")
                        }
                        return names.join(", ");
                    } else if (Ext.isString(value)) {
                        return value;
                    } else {
                        throw ("Unsupported value provided to renderer: " + value);
                    }
                }
                catch (ex) {
                    cosnole.log(ex);
                    return value;
                }
            }//MultiComboGrid
    
            //take a string and convert it to array. Split the string on a sepecific separator sent to the function
            function listToAray(fullString, separator) {
                var fullArray = [];
                if (fullString !== undefined) {
                    if (fullString.indexOf(separator) == -1) {
                        fullArray.push(fullString);
                    } else {
                        fullArray = fullString.split(separator);
                    }
                }
    
                return fullArray;
            }; //end of listToArray
         </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
                <Listeners>
                    <DocumentReady Handler="App.direct.drawTable()" />
                </Listeners>
            </ext:ResourceManager>
    
            <ext:Viewport runat="server" ID="VP1" Layout="FitLayout">
                <Items>
                    <ext:GridPanel
                        ID="GridPanel1"
                        runat="server"
                        AutoLoad="false"
                        AutoScroll="true"
                        InvalidateScrollerOnRefresh="false">
                        <Store>
                            <ext:Store ID="Store1" runat="server" />
                        </Store>
                        <Plugins>
                            <ext:RowEditing runat="server" AutoCancel="false" />
                        </Plugins>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
            <ext:Hidden runat="server" ID="ComboboxesStores" />
        </form>
    </body>
    </html>
    Fabrício Murta
    Developer & Support Expert
Page 2 of 2 FirstFirst 12

Similar Threads

  1. MULTICOMBO selecting problem...
    By antoreegan in forum 2.x Help
    Replies: 0
    Last Post: May 22, 2013, 6:10 AM
  2. [CLOSED] when gridpanel column apply renderer.format , renderer.fn not work
    By mis@adphk.com in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 12, 2013, 10:35 AM
  3. [CLOSED] Problem with Renderer & Editor
    By logicspeak in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 20, 2011, 8:18 PM
  4. Replies: 1
    Last Post: Nov 11, 2010, 12:19 PM
  5. [1.0] MultiCombo Problem Selecting
    By koss in forum 1.x Help
    Replies: 4
    Last Post: Apr 15, 2010, 3:31 PM

Posting Permissions