Please help after select ComboBox in ComponentColumn doesn't show select value - it show blank.

  1. #1

    Please help after select ComboBox in ComponentColumn doesn't show select value - it show blank.

    Please help After select ComboBox in ComponentColumn doesn't show select value - it show blank.

    Index.cshtml
    @using Ext.Net.MVC;
    
    @model object[]
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Sample</title>    
    
        <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
        <style>
            /*  search-item
            -----------------------------------------------------------------------------------------------*/
            .search-item {
                font          : normal 11px tahoma, arial, helvetica, sans-serif;
                padding       : 3px 10px 3px 10px;
                border        : 1px solid #fff;
                border-bottom : 1px solid #eeeeee;
                white-space   : normal;
                color         : #555;
            }
    
            .search-item h3 {
                display     : block;
                font        : inherit;
                font-weight : bold;
                color       : #222;
                margin      :0px;
            }
    
            .search-item h3 span {
                float       : right;
                font-weight : normal;
                margin      : 0 0 5px 5px;
                width       : 100px;
                display     : block;
                clear       : none;
            }
        </style>
    </head>
    <body>
        @(Html.X().ResourceManager())
    
        @( Html.X().GridPanel()
                       .ID("DepartmentGridPanel")
                       .Store(Html.X().Store()
                              .ID("DepartmentStore")
                              .Model(
                                  Html.X().Model()
                                      .IDProperty("ID")
                                      .Fields(
                                          new ModelField("ID", ModelFieldType.Int),
                                          new ModelField("Name", ModelFieldType.String),
                                          new ModelField("Surname", ModelFieldType.String),
                                          new ModelField("DepartmentId", ModelFieldType.String),
                                          new ModelField("DepartmentName", ModelFieldType.String)
                                      ))
                              .DataSource(Model[0])
                       )
                       .ColumnModel(cols =>
                       {
                           cols.Columns.Add(Html.X().Column().Text("Name").DataIndex("Name").Sortable(false).Width(256));
                           cols.Columns.Add(Html.X().Column().Text("Surname").DataIndex("Surname").Sortable(false).Width(256));
                           cols.Columns.Add(Html.X().ComponentColumn().Sortable(false).Text("Department").DataIndex("DepartmentId").Width(150).Editor(true).Component(
                                      Html.X().ComboBox()
                                          .DisplayField("Code")
                                          .ValueField("ID")
                                          .FieldStyle("text-transform: uppercase;")
                                          .TypeAhead(true)
                                          .MinChars(0)
                                          .PageSize(10)
                                          .SelectOnTab(true)
                                          .ForceSelection(true)
                                          .ValidateOnBlur(true)
                                          .ValidateOnChange(true)
                                          .ListConfig(Html.X().BoundList()
                                              .LoadingText("Searching...")
                                              .ItemTpl(Html.X().XTemplate()
                                                  .Html(@<text>
                                                            <tpl for=".">
                                                                <div class="search-item">
                                                                    <h3>{Code}</h3>
                                                                    {Name}
                                                                </div>
                                                            </tpl>
                                                        </text>))
                                              .MinWidth(400)
                                            )
                                            .Store(Html.X().Store().AutoLoad(false)
                                                .Proxy(Html.X().AjaxProxy()
                                                    .Url(Url.Action("LookupData"))
                                                    .Reader(Html.X().JsonReader().RootProperty("data").TotalProperty("total")))
                                                .Model(Html.X().Model()
                                                    .IDProperty("ID")
                                                    .Fields(
                                                        new ModelField("ID", ModelFieldType.Int),
                                                        new ModelField("Code", ModelFieldType.String),
                                                        new ModelField("Description", ModelFieldType.String)
                                                    )
                                                  )
                                                .Data(Model[1])
                                            )
                                          )
                                        .SilentSave(false)
                                        .Listeners(ls =>
                                        {
                                            ls.Edit.Handler = @"e.record.data.DepartmentName = e.cmp.findRecordByValue(e.cmp.getValue()).data.Name;";
                                        })
                               );
                           cols.Columns.Add(Html.X().Column().Text("Department Name").DataIndex("DepartmentName").Sortable(false).Width(256));
                       })
        )
    </body>
    </html>
    ExtNetController
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Mvc;
    using Ext.Net;
    using Ext.Net.MVC;
    using ExtNet_Example1.Models;
    
    namespace ExtNet_Example1.Controllers
    {
        public class ExtNetController : Controller
        {
            public ActionResult Index()
            {
                List<Employee> emps = new List<Employee>()
                {
                    new Employee()
                    {
                        ID = 1,
                        Name = "Nancy",
                        Surname = "Davolio",
                        DepartmentId = 1,
                        DepartmentName = "Department 01"
                    },
                    new Employee()
                    {
                        ID = 2,
                        Name = "Andrew",
                        Surname = "Fuller",
                        DepartmentId = 4,
                        DepartmentName = "Department 04"
                    },
                };
    
                List<Department> deps = new List<Department>()
                {
                    new Department {ID = 1, Code = "01", Name = "Department 01"},
                    new Department {ID = 4, Code = "04", Name = "Department 04"},
                };
    
                return this.View(new object[]
                {
                    emps,
                    deps
                });
            }
    
            public ActionResult LookupData(StoreRequestParameters parameters)
            {
                var data = (from x in Department.GetAll()
                    where x.Code.Contains(parameters.Query)
                    select x).ToList();
                return this.Store(data, data.Count);
            }
    
            public class Employee
            {
                public int ID { get; set; }
                public string Name { get; set; }
                public string Surname { get; set; }
                public string DepartmentName { get; set; }
                public int DepartmentId { get; set; }
    
            }
    
            public class Department
            {
                public int ID { get; set; }
    
                public string Code { get; set; }
    
                public string Name { get; set; }
    
                public static List<Department> GetAll()
                {
                    return new List<Department>
                    {
                        new Department {ID = 1, Code = "01", Name = "Department 01"},
                        new Department {ID = 2, Code = "02", Name = "Department 02"},
                        new Department {ID = 3, Code = "03", Name = "Department 03"},
                        new Department {ID = 4, Code = "04", Name = "Department 04"},
                        new Department {ID = 5, Code = "05", Name = "Department 05"},
                        new Department {ID = 6, Code = "06", Name = "Department 06"},
                        new Department {ID = 7, Code = "07", Name = "Department 07"},
                        new Department {ID = 8, Code = "08", Name = "Department 08"},
                        new Department {ID = 9, Code = "09", Name = "Department 09"},
                        new Department {ID = 10, Code = "10", Name = "Department 10"},
                    };
                }
            }
        }
    }
    Click image for larger version. 

Name:	Combobox_ComponentColumn.gif 
Views:	38 
Size:	57.4 KB 
ID:	25165
  2. #2
    If I remove SilentSave(false), combobox has new select value but DepartmentName is not updated

    Please help me.

    Thank you very much
  3. #3
    Hello @anh34!

    In your lines 35-39 lines (controller code), add the whole list of departments, not just the used ones. Else the combo boxes' stores will not have all department entries in the individual comboboxes' stores, and the mapping from the chosen value to the new value won't be possible.

    In other words, use this instead of lines 35-39 in your controller code:

    List<Department> deps = Department.GetAll();
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hello Fabricio Murta

    Thank you for support me.

    I know it but my departments (customers ...) has alot of rows it load ~ 5-7s.
  5. #5
    Hello @anh34!

    Then at the same time you fill the department name column on change (the Edit.Handler code, line 112 on your view code), also inject the record into the combo's store.

    It would probably be a good idea to turn your listener into a javascript function reference.

    Define, say, a

    var depEditHandler = function (cmpCol, cell) {
     // change 'e.' references to 'cell.'
     var selectedRecordData = cell.cmp.findRecordByValue(cell.cmp.getValue()).data;
     cell.record.data.DepartmentName = selectedRecordData.Name;
    }
    within a <script></script> block in the page, and change the line 112 to read just

    ls.Edit.Fn = "depEditHandler";
    Then it will be easier to step thru the even handler and make it add the record to the combo box (which should be cell.cmp, and the store cell.cmp.getStore().

    In other words, the behavior you want is not possible without further modification in the code thru the event listeners. This means, it is not natively supported by Ext.NET (nor ExtJS), but it probably is not a very difficult change in the code, and you probably don't even need to extend components to do so. Probably just injecting the store entry at the time the change is made should be enough.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hello Fabricio Murta

    Thanks for your support.

    I have moved combobox store to Bin of GridPanel and it work

    But Is there any other way to update read only DepartmentName if don't use

    SilentSave(false)
    or 
    .Listeners(ls =>
      {
        ls.Edit.Handler = @"e.record.set('ItemDescription', e.cmp.findRecordByValue(e.cmp.getValue()).data.Description);
      })
    If I use ComponentColumn->Textfield for DepartmentName : How can I access this cmp of column DepartmentName
    Last edited by anh34; Jun 20, 2018 at 10:09 AM.

Similar Threads

  1. Replies: 4
    Last Post: Oct 28, 2015, 7:23 PM
  2. Combobox Select OnEvent doesn't work
    By neosaint in forum 2.x Help
    Replies: 2
    Last Post: Jun 09, 2014, 1:22 PM
  3. Replies: 4
    Last Post: Jul 12, 2012, 2:29 PM
  4. Replies: 2
    Last Post: May 05, 2011, 10:16 AM
  5. [CLOSED] Hide and Show a Tab in Select Event of a ComboBox
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 11, 2010, 2:32 PM

Tags for this Thread

Posting Permissions