[CLOSED] Linked combos

  1. #1

    [CLOSED] Linked combos

    I am creating a linked combo. On the click of the combo other combo should be loaded. I was able to set the value. But, combo not showing the list. I have attached the project.
    <ext-ComboBox ID="cmbOrg" EmptyText="Select Org" QueryMode="Local" Editable="false"
                          DisplayField="name" ValueField="id" FieldLabel="Org" ForceSelection="true"
                          Editable="false" Width="170" LabelWidth="40" Name="BaseOrganizationId">
                <Store>
                    <ext-Store ID="stOrg" data="Model.BaseOrgComboSource">
                        <model>
                            <ext-model idProperty="ID">
                                <Fields>
                                    
                                    <ext-dataField name="name" />
                                    <ext-numberDataField name="id" />
    
                                </Fields>
                            </ext-model>
                        </model>
                        <proxy>
                            <ext-memoryProxy>
                                <reader>
                                    <ext-arrayReader />
                                </reader>
                            </ext-memoryProxy>
                        </proxy>
                    </ext-Store>
                </Store>
                <Listeners>
    
                    <Select Handler="OncmbOrgSelect();" />
                </Listeners>
            </ext-ComboBox>
            <ext-ToolbarSeparator />
            <ext-ComboBox ID="cmbPlant" EmptyText="Select Plant" QueryMode="Local" Editable="false"
                          DisplayField="name" ValueField="id" FieldLabel="Plant" triggerAction="All"
                          Editable="false" Width="170" LabelWidth="40" Name="BasePlantId">
                <Store>
                    <ext-Store ID="stPlant" data="Model.BasePlantComboSource" autoLoad="false">
                        <model>
                            <ext-model idProperty="id">
                                <Fields>
                                    <ext-numberDataField name="id" />
                                    <ext-dataField name="name" />
    
                                </Fields>
                            </ext-model>
                        </model>
                        <proxy>
    
                            <ext-memoryProxy>
                                <reader>
                                    <ext-arrayReader />
                                </reader>
                            </ext-memoryProxy>
                        </proxy>
                    </ext-Store>
                </Store>
                
            </ext-ComboBox>
    Javascript
    var OncmbOrgSelect = function () {
                
                App.cmbPlant.clearValue();
                
    
                $.ajax({
                    url: '@Url.Action("GetPlants", "Base")',
                    type: "get",
                    cache: false,
                    data: { orgId: App.cmbOrg.getValue() },
                    complete: function (response) {
                        //debugger;
                        var combo = App.cmbPlant;
                        
                        if (response.responseJSON != undefined && response.responseJSON.length > 0) {
                            combo.getStore().setData(response.responseJSON);
                            combo.setValue(response.responseJSON[0][0]);
                        } else {
                            combo.getStore().loadData([]);
                        }
                        
                    }
                });
            };
    public IActionResult GetPlants(int orgId)
            {
    
                List<object> plantData = new List<object>()
                {
                    new object[] { "3m Co", 71 },
                    new object[] { "Alcoa Inc", 29 },
                    new object[] { "Altria Group Inc", 83 },
                    new object[] { "American Express Company", 52 }
                };
                return Json(plantData);
    
            }
    public List<object> OrgData()
            {
                List<object> orgData = new List<object>() {
                    new object[] { "American International Group, Inc.", 64 },
                    new object[] { "AT&T Inc.", 31 },
                    new object[] { "Boeing Co.", 75 },
                    new object[] { "Caterpillar Inc.", 67 }
                    };
                return orgData;
            }
     public List<object> BasePlantComboSource { get; set; }
    
            
    
            public List<object> BaseOrgComboSource { get; set; }
    Last edited by fabricio.murta; Apr 04, 2023 at 6:52 PM.
  2. #2
    Hello, @Fahd!

    I'm trying to run your test case here but I'm not sure how you expect the Json(plantData); command to behave.

    Maybe the problem is with this? Where are you pulling this method from, or do you have a substitute implementation of it you could share so we could get to the same page on your sample?

    A fully runnable test case would be appreciated, to ensure we can reproduce your scenario on our end. I see you just provided a few bits and pieces; maybe you can compile that test case more-or-less in the format we use in examples explorer, with the page (view) and code behind (controller).

    Something like Grid Panel - Paging and Sorting - Page example should do.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again, @fahd!

    Just in case, take a look at this example of linked combo boxes, trying to base this working test case off your code portions proved really challenging, as there were many unrelated configs that were very misleading; still, I'm not sure this does what you need. So if the code below doesn't help you at all, please provide a clean and minimally functional test case, and we'll help you make it become functional.

    Razor Page: c63347_linkedCombos.cshtml

    @page
    @model ExtNet7WebPages_NuGet.Pages.Forums._6._3._3_6.c63347_linkedCombosModel
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>63347 - Linked Combo Boxes</title>
    </head>
    <body>
        <ext-ComboBox ID="cmbOrg" EmptyText="Select Org" QueryMode="Local" Editable="false"
                      DisplayField="name" ValueField="id" FieldLabel="Org" ForceSelection="true"
                      Editable="false" Width="170" LabelWidth="40" Name="BaseOrganizationId">
            <Store>
                <ext-Store ID="stOrg" data="Model.BaseOrgComboSource">
                    <model>
                        <ext-model idProperty="id">
                            <Fields>
                                <ext-dataField name="name" />
                                <ext-numberDataField name="id" />
                            </Fields>
                        </ext-model>
                    </model>
                    <proxy>
                        <ext-memoryProxy />
                    </proxy>
                </ext-Store>
            </Store>
            <directEvents>
                <select pageHandler="GetPlants" method="POST" success="App.cmbPlant.getStore().loadData(result.result); Ext.toast('Returned ' + result.result.length + ' records.');">
                    <extraParams>
                        <ext-add key="orgId" value="this.getSelectedRecord().id" mode="Raw" />
                    </extraParams>
                </select>
            </directEvents>
        </ext-ComboBox>
        <ext-ComboBox ID="cmbPlant" EmptyText="Select Plant" QueryMode="Local" editable="false"
                      DisplayField="name" ValueField="id" FieldLabel="Plant"
                      Width="170" LabelWidth="40" Name="BasePlantId">
            <Store>
                <ext-Store ID="stPlant" autoLoad="false">
                    <model>
                        <ext-model idProperty="id">
                            <Fields>
                                <ext-dataField name="name" />
                                <ext-numberDataField name="id" />
                            </Fields>
                        </ext-model>
                    </model>
                    <proxy>
                        <ext-memoryProxy />
                    </proxy>
                </ext-Store>
            </Store>
        </ext-ComboBox>
    </body>
    </html>
    Code behind: c63347_linkedCombos.cshtml.cs

    using Ext.Net.Core;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using System.Collections.Generic;
    
    namespace ExtNet7WebPages_NuGet.Pages.Forums._6._3._3_6
    {
        public class c63347_linkedCombosModel : PageModel
        {
            public void OnGet()
            {
            }
    
            public List<object> BaseOrgComboSource
            {
                get => new List<object>()
                {
                    new object[] { "American International Group, Inc.", 64 },
                    new object[] { "AT&T Inc.", 31 },
                    new object[] { "Boeing Co.", 75 },
                    new object[] { "Caterpillar Inc.", 67 }
                };
            }
    
            public IActionResult OnPostGetPlants(int orgId)
            {
                List<object> plantData = new List<object>()
                {
                    new object[] { "3m Co #" + orgId, 71 },
                    new object[] { "Alcoa Inc#" + orgId, 29 },
                    new object[] { "Altria Group Inc#" + orgId, 83 },
                    new object[] { "American Express Company#" + orgId, 52 }
                };
                return this.Direct(plantData);
            }
        }
    }
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    I am using MVC project. Here is the updated code.
    @model ExtTestapp.Models.HomeModel
    @{
        ViewData["Title"] = "Home page";
    }
    <script type="text/javascript">
              var OncmbOrgSelect = function () {
                
                App.cmbPlant.clearValue();
    
                $.ajax({
                    url: '@Url.Action("GetPlants", "Home")',
                    type: "get",
                    cache: false,
                    data: { orgId: App.cmbOrg.getValue() },
                    complete: function (response) {
                        //debugger;
                        var combo = App.cmbPlant;
                        
                        if (response.responseJSON != undefined && response.responseJSON.length > 0) {
                            combo.getStore().setData(response.responseJSON);
                            combo.setValue(response.responseJSON[0][0]);
                        } else {
                            combo.getStore().loadData([]);
                        }
                        
                    }
                });
            };
             </script>
    <ext-section target="Main">
        <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
            <items>
                <ext-component html="<h1>Dashboard</h1><p>Check out these resources to help get you started.</p>" />
                <ext-container layout="HBox" width="668" x-margin="40 0">
                    <layout>
                        <ext-hboxLayout align="Stretch" />
                    </layout>
                    <items>
                        <ext-ComboBox ID="cmbOrg" EmptyText="Select Org" QueryMode="Local" Editable="false"
                                      DisplayField="name" ValueField="id" FieldLabel="Org" ForceSelection="true"
                                      Editable="false" Width="170" LabelWidth="40" Name="BaseOrganizationId">
                            <Store>
                                <ext-Store ID="stOrg" data="Model.BaseOrgComboSource">
                                    <model>
                                        <ext-model idProperty="ID">
                                            <Fields>
    
                                                <ext-dataField name="name" />
                                                <ext-numberDataField name="id" />
    
                                            </Fields>
                                        </ext-model>
                                    </model>
                                    <proxy>
                                        <ext-memoryProxy>
                                            <reader>
                                                <ext-arrayReader />
                                            </reader>
                                        </ext-memoryProxy>
                                    </proxy>
                                </ext-Store>
                            </Store>
                            <Listeners>
    
                                <Select Handler="OncmbOrgSelect();" />
                            </Listeners>
                        </ext-ComboBox>
                        <ext-ToolbarSeparator />
                        <ext-ComboBox ID="cmbPlant" EmptyText="Select Plant" QueryMode="Local" Editable="false"
                                      DisplayField="name" ValueField="id" FieldLabel="Plant" triggerAction="All"
                                      Editable="false" Width="170" LabelWidth="40" Name="BasePlantId">
                            <Store>
                                <ext-Store ID="stPlant" data="Model.BasePlantComboSource" autoLoad="false">
                                    <model>
                                        <ext-model idProperty="id">
                                            <Fields>
                                                <ext-numberDataField name="id" />
                                                <ext-dataField name="name" />
    
                                            </Fields>
                                        </ext-model>
                                    </model>
                                    <proxy>
    
                                        <ext-memoryProxy>
                                            <reader>
                                                <ext-arrayReader />
                                            </reader>
                                        </ext-memoryProxy>
                                    </proxy>
                                </ext-Store>
                            </Store>
    
                        </ext-ComboBox>
                    </items>
                </ext-container>
            </items>
        </ext-container>
    </ext-section>
    Controller
    using Ext.Net;
    using Ext.Net.Core;
    using ExtTestapp.Models;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Logging;
    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.Linq;
    using System.Threading.Tasks;
    
    namespace ExtTestapp.Controllers
    {
        public class HomeController : Controller
        {
            public IActionResult Index()
            {
                HomeModel model = new HomeModel();
                model.BaseOrgComboSource = OrgData();
                return View(model);
            }
            public IActionResult GetPlants(int orgId)
            {
    
                List<object> plantData = new List<object>()
                {
                    new object[] { "3m Co", 71 },
                    new object[] { "Alcoa Inc", 29 },
                    new object[] { "Altria Group Inc", 83 },
                    new object[] { "American Express Company", 52 }
                };
                return Json(plantData);
    
            }
    
            public List<object> OrgData()
            {
                List<object> orgData = new List<object>() {
                    new object[] { "American International Group, Inc.", 64 },
                    new object[] { "AT&T Inc.", 31 },
                    new object[] { "Boeing Co.", 75 },
                    new object[] { "Caterpillar Inc.", 67 }
                    };
                return orgData;
            }
        }
    }
    Model
    
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Threading.Tasks;
    using System.Xml.Linq;
    
    namespace ExtTestapp.Models
    {
        public class HomeModel 
        {
            [Display(Name = "Org")]
            public string BaseOrganizationId { get; set; }
    
            [Display(Name = "Plant")]
            public string BasePlantId { get; set; }
    
    
    
            public List<object> BasePlantComboSource { get; set; }
    
    
    
            public List<object> BaseOrgComboSource { get; set; }
    
        }
    }
  5. #5
    I have tried your suggestion but not working too. Also Please let me know if you need more details. Any response on the new code I have provided?
  6. #6
    Hello @fahd!

    I am checking your test case and possible solutions if I can run it. I will reach back to you soon!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hello again, @fahd!

    I got your test case working. Before I paste the working solution, mind the following hints:

    - use lowercase for config options (match case) like QueryMode. "Local" is not the same as "local".
    - we don't support direct queries using jQuery or other third party libraries. You can use them in your project, and they should work, but it's up to you to provide the data in a format Ext.NET (and Ext JS) could understand. We can help as long as you provide a stub of the response in the test case, without requiring to configure the whole third-party extension.
    - order matters. I have inverted the model fields' order in your 2nd combo box. Either that, or invert the name-id in the returned data.



    The resulting code thus:

    View

    Basically fixed your second combo box removing the triggerAction which had an invalid All value set (see Ext.form.field.ComboBox triggerAction docs) and affected the result such that the combo box would never be expandable. Also fixed queryMode to be local. And as you probably figured already, removed the jQuery-driven connection code favoring usage of Ext.NET-backed DirectEvents. Removed a bit of extra unnecessary code, like the proxy.

    If queryMode is not fixed, the perceived behavior is that the second combo will only get populated by the first one once it (the second one) is expanded once. If not properly set to local it will just empty its store the first time it is expanded, and that's why it works afterward.

    @model ExtTestapp.Models.HomeModel
    @*
        For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
    *@
    @{
        ViewData["Title"] = "Home page";
    }
    
    <ext-section target="Main">
        <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
            <items>
                <ext-component html="<h1>Dashboard</h1><p>Check out these resources to help get you started.</p>" />
                <ext-container layout="HBox" width="668" x-margin="40 0">
                    <layout>
                        <ext-hboxLayout align="Stretch" />
                    </layout>
                    <items>
                        <ext-ComboBox ID="cmbOrg" EmptyText="Select Org" QueryMode="Local" Editable="false"
                                      DisplayField="name" ValueField="id" FieldLabel="Org" ForceSelection="true"
                                      Editable="false" Width="170" LabelWidth="40" Name="BaseOrganizationId">
                            <Store>
                                <ext-Store ID="stOrg" data="Model.BaseOrgComboSource">
                                    <model>
                                        <ext-model idProperty="id">
                                            <Fields>
                                                <ext-dataField name="name" />
                                                <ext-numberDataField name="id" />
    
                                            </Fields>
                                        </ext-model>
                                    </model>
                                    <proxy>
                                        <ext-memoryProxy />
                                    </proxy>
                                </ext-Store>
                            </Store>
                            <directEvents>
                                <select actionName="GetPlants" success="App.cmbPlant.getStore().loadData(result.result); Ext.toast('Returned ' + result.result.length + ' records.');">
                                    <extraParams>
                                        <ext-add key="orgId" value="this.getSelectedRecord().id" mode="Raw" />
                                        <ext-add key="somethingElse" value="aValue" />
                                    </extraParams>
                                </select>
                            </directEvents>
                        </ext-ComboBox>
                        <ext-ToolbarSeparator />
                        <ext-ComboBox ID="cmbPlant" EmptyText="Select Plant" QueryMode="local" Editable="false"
                                      DisplayField="name" ValueField="id" FieldLabel="Plant"
                                      Width="170" LabelWidth="40" Name="BasePlantId">
                            <Store>
                                <ext-Store ID="stPlant">
                                    <model>
                                        <ext-model idProperty="id">
                                            <Fields>
                                                <ext-dataField name="name" />
                                                <ext-numberDataField name="id" />
                                            </Fields>
                                        </ext-model>
                                    </model>
                                    <proxy>
                                        <ext-memoryProxy />
                                    </proxy>
                                </ext-Store>
                            </Store>
                        </ext-ComboBox>
                    </items>
                </ext-container>
            </items>
        </ext-container>
    </ext-section>
    Controller

    Notice a small change in GetPlants() to pass back the provided orgId in the names returned.

    public IActionResult Index()
    {
        var model = new HomeModel();
        model.BaseOrgComboSource = OrgData();
        return View(model);
    }
    
    public IActionResult GetPlants(int orgId)
    {
        List<object> plantData = new List<object>()
        {
            new object[] { "3m Co #" + orgId, 71 },
            new object[] { "Alcoa Inc #" + orgId, 29 },
            new object[] { "Altria Group Inc #" + orgId, 83 },
            new object[] { "American Express Company #" + orgId, 52 }
        };
    
        return this.Direct(plantData);
    }
    
    public List<object> OrgData()
    {
        List<object> orgData = new List<object>() {
            new object[] { "American International Group, Inc.", 64 },
            new object[] { "AT&T Inc.", 31 },
            new object[] { "Boeing Co.", 75 },
            new object[] { "Caterpillar Inc.", 67 }
            };
        return orgData;
    }
    Model

    There were no changes to the model you provided




    With this code I could successfully select any entry from the first combo box, and fill the second one with corresponding entries, being sure it was considering the choice by printing the passed IDs back in the filled combo box.

    If you still get errors with this version like you pointed for the previous example we sent, please be specific on what issue you're having; error messages or the step where an unexpected behavior is noted, and what was expected plus what was received.

    All in all, I hope this helps with your project!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Thanks for the reply. You can close this ticket.
    Last edited by Fahd; Apr 03, 2023 at 7:28 PM.
  9. #9
    Thanks for the feedback, hope it helped!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] [#518] Linked Combos In Grid example in MVC
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 04, 2014, 7:39 PM
  2. Ajax linked combos
    By ddolan in forum 1.x Help
    Replies: 0
    Last Post: Feb 17, 2011, 8:30 PM
  3. The example Linked combos in grid.
    By FreddeM in forum Examples and Extras
    Replies: 1
    Last Post: Jan 04, 2010, 2:41 PM
  4. [CLOSED] Linked combos with SQL datasource
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 27, 2009, 6:49 AM
  5. Linked Combos in Grid Version 0.7
    By eguerrap in forum 1.x Help
    Replies: 0
    Last Post: Jan 27, 2009, 3:19 PM

Posting Permissions