[CLOSED] MultiCombo vs Renderer Problem

[Geovision]

Hello,

I have a problem of rendering multiple values in Grid panel Multi Combo Column.
when data binded into Grid panel, the values selected are binded correctly (using renderer function) into Multi combo text area, while weren't checked in (Multi Combo) list.
While the case wasn't appeared when selecting one value only. (the value checked in combo list).

Can you help to detect the problem since i revised all forum similar cases with no success.

I am using C# language as code behind to add a dynamic Multi Combo into EXT Grid Panel as per the below:

               GridPanel1.ColumnModel.Columns.Add(new ColumnBase[] { 
                                     new Column 
                                    {
                                     Text = fieldDispName,
                                     DataIndex = fieldDBName[i],
                                     ID=fieldDBName[i].Replace(" ", "")+"_COL",
                                     MinWidth=240,
                                     CellWrap=true,
                                     Filter={new StringFilter{ DataIndex=fieldDBName[i] }},
                                     Renderer={ Handler=string.Format("return MultiComboGrid(value, metadata, record, rowIndex, colIndex, store, '{0}')", fieldDBName[i])},
                                     Editor={

                                                new Ext.Net.MultiCombo{
                                                                
                                                                ID=fieldDBName[i].Replace(" ", ""),
                                                                Listeners={Select={Handler="App.direct.SelectionChange('" + fieldDBName[i] + "','540');"} },
                                                                QueryMode=Ext.Net.DataLoadMode.Local,
                                                                ForceSelection=true,
                                                                StoreID=StoresIDs[CombosStoreCount],
                                                                DisplayField="Name",
                                                                ValueField="ID",
                                                                Cls=ControlCLS,
                                                                TriggerAction=Ext.Net.TriggerAction.All,
                                                                MultiSelect=false,
                                                                ListConfig= new BoundList{Cls="list-with-empty"}
                                                            }
                                            }

                                    },
                                    });

And then using a javascript function as a renderer function for Multi Combo column:

function MultiComboGrid(value, metadata, record, rowIndex, colIndex, store, customParams)
{
    var cs = listToAray(App.ComboboxesStores.getValue(), '~');
    var mc = listToAray(App.MulticombosIDParam.getValue(), '~');
    var names = [];
    var indexes = [];

    if (value != "" && value != null && value != "-") {
        var splited = value.split(",");
        var FinalResults = "";
        var FinalRID = "";
        var arrayLength = splited.length;
        for (var z = 0; z< arrayLength; z++) {
            console.log(splited[z]);


            if (cs.indexOf(customParams + "_Store") != -1) {
                
                var i = cs.indexOf(customParams + "_Store");
                
                var script = "var r=App." + cs[i] + ".getById(" + splited[z] + ");";
                console.log(script);
                eval(script);

                console.log("name: " + r.data.Name);
                
                names.push(r.data.Name);


                if(FinalResults=="")
                {
                    FinalResults = r.data.Name;
                }
                else
                {
                    FinalResults = FinalResults+", "+r.data.Name;
                }

          

            } // if (cs.indexOf(customParams + "_Store")
        
        }

     

        return names.join(",");
     
   
    }

    else {
       
        return value;
    }
    
}

Waiting your help and thank you dear.

[geoffrey.mcgill]

Hi. Could you edit your original post and re-paste your code samples with proper indentation and formatting? Posting your code samples within [CODE] tags will apply syntax highlighting.

[fabricio.murta]

Hello @Geovision!

I see you just posted code snippets, so we're not able to just run it from our side. By the way, I went ahead and added the missing slashes to [/code] tags you written in your original post.

For what I could understand of your code, you are pulling the data off the stores. If I understand correctly, you want just the selected records from multicombo to be included in the renderer, right?

If so, maybe you'd better off getting the selected values via the array returned via each combo's getSelectedIndexes() method. This will return the IDs you should fetch from the store.

Suppose your multicombo component is stored correctly in variable myMultiCombo (as you need to dinamically fetch the multi combo ID in your test case, I'm skipping that part). You would then be able to fetch the record to print in the custom-rendered cell via:

var selectedItemDescriptions = [];
Ext.each(mc.getSelectedIndexes(), function(selectedIndex) {
    var record = mc.getStore().getAt(selectedIndex);
    var description = record.get("Name");
    selectedItemDescriptions.push(description);
}

Then you would have an array with the description for each selected items in the multi combo to lay as you need in the rendered cell.

I tried to my best to understand your needs, but I may just have missed it. I'd suggest, if I'm not quite accurate in what you need, that we switched at once to a runnable code sample so I can more precisely fulfill your request. I cannot predict what error you're getting off the code snippets you shared.

Hope this helps, nevertheless!

[Geovision]

i think you didn't get my issue.

i have a grid panel with a MultiCombo Column. when we are fetching the results from the Database and bind them to the Grid ,the MutliCombo is not updated with the retrieved results.

Ex: MutliCombo Id's are retrieved in the same way they are saved 3 selected items (1,2,3)

[fabricio.murta]

Hello @geovision!

What you want is possible, but with the snippets you provided I can't say what's wrong at all. A test case would be required. Then we'd be able to tell you exactly why you don't have the values bound.

Here's my guess for now; if again this is not right, we'll be looking forward for your repro code.

First, you should set the field used as data index for the column as an object, in the model. Then provide an array of IDs (even if empty or single element) as the data for that field. Then the multicombo will be displayed with all IDs provided to that cell with its respective values. Important thing for the multi combo to get the initial selection is the data index field must contain an array of IDs that should be initially selected.

Hope this helps!

[Geovision]

hello again,

Please find below my code :

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 PAGE:

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",
                             //Flex = 1,
                             MinWidth=240,
                             CellWrap=true,
                             Filter={new StringFilter{ DataIndex="PK" }},
                            //Renderer={Fn="myRenderer1"}
                            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.String;




                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



    }
}

JS Page (FBF.JS):

function MultiComboGrid(value, metadata, record, rowIndex, colIndex, store, customParams) {
    try{
        console.log("H1");

        var cs = listToAray(App.ComboboxesStores.getValue(), '~');
        console.log("cs" + cs);
        var names = [];
        var indexes = [];
        
   
        value = "1,2";
        


        if (value != "" && value != null && value != "-") {

            var splited = value.split(",");
            var arrayLength = splited.length;
            for (var z = 0; z < arrayLength; z++) {
                console.log(splited[z]);


                if (cs.indexOf(customParams + "_Store") != -1) {

                    var i = cs.indexOf(customParams + "_Store");

                    var script = "var r=App." + cs[i] + ".getById(" + splited[z] + ");";
                    console.log(script);
                    eval(script);

                    console.log("name: " + r.data.Name);

                    names.push(r.data.Name);

                } // if (cs.indexOf(customParams + "_Store")

            }

            return names.join(",");

        }

        else {
            //console.log('here6');
            return 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

My problem is when editing the checked values from Multi combo box , the old values isn't checked as per the below screenshots:

a.


when loading grid panel the data are binded correctly into Multi combo box.

b. but when editing the same multi combo box, the data disappeared and not checked as per the below screenshot



Appreciated,