[Ext.NET.MVC5 2.4] ComboBox Manually Loading Store in BeforeQuery event doesn't expand combo list automatically.

  1. #1

    [CLOSED][FIXED][Ext.NET.MVC5 2.4] ComboBox Manually Loading Store in BeforeQuery event doesn't expand combo list automatically.

    After upgrading from Ext.NET 2.2 to Ext.NET.MVC5 2.4, I encountered some issue when the store of combobox is loaded in the BeforeQuery listener. You need to click the combobox twice before the options or combo items will expand/display. See code snippet below:

    In View,
    X.GridPanel()
    ...
    X.ComponentColumn().Editor(true).Flex(1).DataIndex("ID").Component(
    X.ComboBox()
    .QueryMode(DatLoadMode.Local)
    .TriggerAction(TriggerAction.All)
    .Store(
       X.Store()
       .AutoLoad(false)
       .Model(
            ...
       )
       .Proxy(
          X.AjaxProxy()
          .Url(Url.Action(...))
          .Reader(
             X.JsonReader().Root("data")
          )
       )
    )
    .Listeners(l => l.BeforeQuery.Fn = "BeforeQuery")
    )
    In JS:
    var BeforeQuery = function() {
       this.getStore().load({ params: { id: this.record.data.ID }});
    }
    Note: This was working fine in 2.2.

    Please help and advise.
    Last edited by recharge; Mar 08, 2014 at 4:19 AM.
  2. #2
    Hello @recharge,

    Welcome to the Ext.NET forums!

    What is the "this.record" inside the BeforeQuery listener? I don't think a ComboBox has the "record" propertyl. So, you probably define it somewhere.

    Please provide a full runnable test case to reproduce the problem.

    Also I would not consider it a bug. Calling a Store's load inside the BeforeQuery listener is not a standard option. Please clarify why you do that.
  3. #3
    Hi Daniil,

    Thanks for your utmost reply.

    "this.record" is coming from the current GridPanel row record/data.

    See below test case:

            X.GridPanel()
                .ID("grid")
                .SyncRowHeight(true)
                .DisableSelection(true)
                .ColumnModel(
                    X.Column().DataIndex("ID").Flex(1).Text("ID").Hidden(true),
                    X.Column().DataIndex("Name").Width(300).Text(Resources.Grid.Grid_HeaderText_1),
                    X.ComponentColumn()
                    .Editor(true)
                    .Flex(1)
                    .DataIndex("Unit")
                    .Text(Resources.Grid.Grid_HeaderText_2)
                    .Component(
                        X.ComboBox()
                        .DisplayField("value")
                        .ValueField("code")
                        .TypeAhead(true)
                        .QueryMode(DataLoadMode.Local)
                        .Editable(false)
                        .TriggerAction(TriggerAction.All)
                        .Store(
                            X.Store()
                            .AutoLoad(false)
                            .Model(
                                X.Model()
                                .Fields(
                                    new ModelField("value", ModelFieldType.String),
                                    new ModelField("code", ModelFieldType.String)
                                )
                            )
                            .Proxy(
                                X.AjaxProxy()
                                .Url(Url.Action("UnitsAction"))
                                .Reader(
                                    X.JsonReader()
                                    .Root("data")
                                )
                            )
                        )
                        .Listeners(listen =>
                        {
                            listen.BeforeQuery.Fn = "BeforeQuery";
                        })
                    )
                )
                .Store(X.Store()
                    .ID("gridStore")
                    .AutoLoad(false)
                    .Model(X.Model()
                        .Fields(
                             new ModelField("ID", ModelFieldType.String)
                            , new ModelField("Name", ModelFieldType.String)
                            , new ModelField("Unit", ModelFieldType.String)
                        )
                    )
                    .PageSize(5)
                    .Proxy(
                        X.AjaxProxy()
                        .Url(Url.Action("GetData"))
                        .Reader(
                            X.JsonReader()
                            .Root("data")
                        )
                    )
                )
                .View(X.GridView().StripeRows(true))
    I called the Store's load inside the BeforeQuery listener because I want to pass the parameter the gridStore's record [ID] to the Combobox component column Store. Please advise how to pass that though directly without using BeforeQuery listener.
  4. #4
    Could you, please, provide a full, but simplified and runnable test case to reproduce the initial problem with BeforeQuery?

    Then I could investigate this problem and try to find a solution better if any.
  5. #5
    Hi Daniil,

    As requested, see below full test case to reproduce.

    Model (TestCaseModel.cs):
    using System;
    using System.Collections;
    
    namespace TestCase
    {
        public class TestDataModel
        {
            public int IntField2 {get; set;}
            public int ComboField2 {get; set;}
            public string TextField2  {get; set;}
            public DateTime DateField2 { get; set; }
        }
        public class TestData
        {
            public static IEnumerable GetData()
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                    {
                        new object[] { 1, 1, "Text 1", DateTime.Now.Date },
                        new object[] { 2, 2, "Text 2", DateTime.Now.Date },
                        new object[] { 3, 3, "Text 3", DateTime.Now.Date },
                        new object[] { 4, 4, "Text 4", DateTime.Now.Date },
                        new object[] { 5, 5, "Text 5", DateTime.Now.Date },
                        new object[] { 6, 6, "Text 6", DateTime.Now.Date },
                        new object[] { 7, 7, "Text 7", DateTime.Now.Date },
                        new object[] { 8, 8, "Text 8", DateTime.Now.Date },
                        new object[] { 9, 9, "Text 9", DateTime.Now.Date }
                    };
            }
    
        }
    }
    View (Index.cshtml):
    @model System.Collections.IEnumerable
    @using Ext.Net
    @using Ext.Net.MVC
    
    @{
        ViewBag.Title = "Test Case";
        var X = @Html.X();
    }
    
    @section scripts{
        <script>
            var BeforeQuery = function () {
                this.getStore().load({ params: { id: this.record.data.IntField } });
            };
        </script>
    }
    
    @section main
    {    
        @X.ResourceManager() 
    
        <h1>Test Case ComponentColumn using Ext.Net.MVC5 2.4</h1>
        <p>Steps to reproduce:</p>
        <ol>
            <li>Refresh the page.</li>
            <li>Click the arrow down in the first combobox. Notice that the dropdown list will not appear yet.</li>
            <li>Click the first combo again. It will now display the dropdown list.</li>
            <li>Same with the remaining combo boxes.</li>
        </ol>
    
        @(Html.X().GridPanel()
            .Title("Test Case ComponentColumn Editor - 28113")
            .Width(600)
            .Height(300)
            .Store(Html.X().Store()
                .Model(Html.X().Model()
                    .Fields(
                        new ModelField("IntField", ModelFieldType.Int),
                        new ModelField("ComboField", ModelFieldType.Int),
                        new ModelField("TextField", ModelFieldType.String),
                        new ModelField("DateField", ModelFieldType.Date)
                    )
                )
                .DataSource(Model)
            )
            .ColumnModel(
                X.ComponentColumn()
                    .Editor(true)
                    .Text("Test Case Problem Field")
                    .Flex(1)
                    .DataIndex("TextField")
                    .Component(
                        X.ComboBox()
                        .DisplayField("TextField2")
                        .ValueField("IntField2")
                        .QueryMode(DataLoadMode.Local)
                        .TriggerAction(TriggerAction.All)
                        .Store(
                           X.Store()
                           .AutoLoad(false)
                           .Model(
                                X.Model()
                                .Fields(
                                    new ModelField("IntField2", ModelFieldType.Int),
                                    new ModelField("ComboField2", ModelFieldType.Int),
                                    new ModelField("TextField2", ModelFieldType.String),
                                    new ModelField("DateField2", ModelFieldType.Date)
                                )
                           )
                           .Proxy(
                              X.AjaxProxy()
                              .Url(Url.Action("GetTestData"))
                              .Reader(
                                 X.JsonReader().Root("data")
                              )
                           )
                        )
                        .Listeners(l => l.BeforeQuery.Fn = "BeforeQuery")
                    )
            )
        )
    }
    Controller (TestCaseController.cs):
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Ext.Net;
    using Ext.Net.MVC;
    
    namespace TestCase
    {
        public class TestCaseController : Controller
        {
            public ActionResult Index()
            {
                return View(TestData.GetData());
            }
    
            public StoreResult GetTestData(string id)
            {
                StoreResult storeResult = new StoreResult();
                try
                {
                    var list = new List<TestDataModel>();
                    foreach (object[] obj in TestData.GetData())
                    {
                        TestDataModel t = new TestDataModel();
                        t.IntField2 = Convert.ToInt32(obj[0]);
                        t.ComboField2 = Convert.ToInt32(obj[1]);
                        t.TextField2= obj[2].ToString();
                        t.DateField2= Convert.ToDateTime(obj[3]);
                        list.Add(t);
                    }
                    storeResult = new StoreResult(list);
                }
                catch (Exception ex)
                {
                    throw ex;
                }
                return storeResult;
            }
        }
    }
    Versions:
    - .NET Framework 4.5
    - MVC 5.1
    - Ext.Net MVC5 2.4.0.28941

    Purpose / Objective:
    - To pass the IntField value into the ComboBox Store as StoreParameter/Parameter in order to get rid of BeforeQuery listener.
    { params: { id: this.record.data.IntField } }
    How To?
       .Proxy(
          X.AjaxProxy()
          .Url(Url.Action("GetTestData"))
          .Reader(
             X.JsonReader().Root("data")
          )
          .Parameters(ps =>
                    ps.Add(new StoreParameter("id", "???"))
          )
        )
    Looking forward for your utmost response.

    Thanks.
    Last edited by recharge; Feb 20, 2014 at 1:05 PM.
  6. #6
    Thank you.

    Please change
    .QueryMode(DataLoadMode.Local)
    to
    .QueryMode(DataLoadMode.Remote)
    and use this BeforeQuery handler:
    var BeforeQuery = function (query) {
        this.getStore().on("beforeload", function(store, operation) {
            operation.params.id = this.record.data.IntField;
        }, this, { single: true });
    };
  7. #7
    Hi Daniil,

    That change works!!!

    More power to Ext.NET team.

    Thanks much.

Similar Threads

  1. [CLOSED] Combo box items not loading on store reload.
    By Sowjanya in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 20, 2013, 2:31 PM
  2. Replies: 2
    Last Post: May 24, 2013, 1:54 AM
  3. [CLOSED] MiniListWidth doesn't exist within combobox list config
    By Daly_AF in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 19, 2012, 5:09 PM
  4. Expand combobox list automatically.
    By rahesh in forum 1.x Help
    Replies: 0
    Last Post: Nov 11, 2011, 11:12 AM
  5. [CLOSED] Combo box doesn't query the store when clearing its contents
    By SandorD in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 09, 2010, 2:37 PM

Tags for this Thread

Posting Permissions