GridPanel - Editable - Combo Box Shows Value instead of Label

Page 1 of 2 12 LastLast
  1. #1

    GridPanel - Editable - Combo Box Shows Value instead of Label

    Hello,
    I have a Combo Box Field in the Grid Panel. I am having trouble making the combo box show the label when the page is loaded. Once I click on the Combo box control - it does show list of labels, but when I select one it goes back to showing the value.

    My Code:


    protected void Page_Load(object sender, EventArgs e)
    {
    
        LoadStatuses();
    
        if (!X.IsAjaxRequest)
        {
            this.BindData();
        }
    
    }
    
    private void LoadStatuses()
    {
        this.cbStatuses.Items.Add(new Ext.Net.ListItem("Pending", 1));
        this.cbStatuses.Items.Add(new Ext.Net.ListItem("Accepted", 4));
        this.cbStatuses.Items.Add(new Ext.Net.ListItem("Rejected", 7));
    }
    Column Definition:
    <ext:Column runat="server" DataIndex="TransferStatus_ID" Text="Status Select" Width="200">
        <Editor>
            <ext:ComboBox ID="cbStatuses" runat="server" />
        </Editor>
    </ext:Column>
    Please asvise.

    Thanks,
    Dennis.
    Attached Thumbnails Click image for larger version. 

Name:	Screen Shot 2020-05-27 at 3.56.07 PM.png 
Views:	191 
Size:	67.0 KB 
ID:	25351   Click image for larger version. 

Name:	Screen Shot 2020-05-27 at 3.56.32 PM.png 
Views:	185 
Size:	73.2 KB 
ID:	25352   Click image for larger version. 

Name:	Screen Shot 2020-05-27 at 3.56.44 PM.png 
Views:	140 
Size:	57.1 KB 
ID:	25353  
    Last edited by fabricio.murta; May 29, 2020 at 3:50 PM. Reason: Wrap code in [code][/code] tags.
  2. #2
    Hello @Dennis!

    Please wrap your code around [code][/code] blocks (select it and click the # button in the toolbar).

    And try using a store with data instead of items -- especially if you want to change this data on the run. If not sure what I'm talking about, take a look at the combo box examples on Examples Explorer, most are fed by data in stores tied to them. A good starting point would be the Forms > ComboBox > Overview example.

    In your case probably just setting DisplayField="Text" to the combo box should suffice. But again if you want to have a server-driven, non-fixed amount of entries in your combo box, you should use a store.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,
    I set DisplayField = "Text". still same result. I also tried to use "Store" for the combo box, example of which I found in one of the posts on the forum - got same result. here is the full source of what I have now:
    Test.aspx
            <ext:ResourceManager runat="server" />
    
            <asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
                <Scripts>
                    <asp:ScriptReference Path="~/Scripts/ExtNet/PageFunctions.js" />
                </Scripts>
            </asp:ScriptManager>
    
            <h1>Editable GridPanel With Save To [DirectMethod]</h1>
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Editable GridPanel"
                Width="700"
                Height="350">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" Type="Int" />
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Number" />
                                    <ext:ModelField Name="Note" />
                                    <ext:ModelField Name="NumberNew" />
                                    <ext:ModelField Name="NameNew" />
                                    <ext:ModelField Name="Note" />
                                    <ext:ModelField Name="TransferStatus_ID" Type="Int" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="ID" DataIndex="ID" Width="35" />
                        <ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1">
                        </ext:Column>
                        <ext:Column runat="server" Text="Number" DataIndex="Number" Flex="1">
                        </ext:Column>
                        <ext:Column runat="server" Text="Name New" DataIndex="NameNew" Flex="1">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Number New" DataIndex="NumberNew" Flex="1">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Note" DataIndex="Note" Flex="1">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" DataIndex="TransferStatus_ID" Text="Status Select" Width="200">
                            <Editor>
                                <ext:ComboBox ID="cbStatuses" runat="server" DisplayField="Text" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CellSelectionModel runat="server" />
                </SelectionModel>
                <Plugins>
                    <ext:CellEditing runat="server">
                        <Listeners>
                            <Edit Fn="edit" />
                        </Listeners>
                    </ext:CellEditing>
                </Plugins>
            </ext:GridPanel>
    Test.cs
           protected void Page_Load(object sender, EventArgs e)
            {
                LoadStatuses();
    
                if (!X.IsAjaxRequest)
                {
                    this.BindData();
                }
    
            }
    
            private void LoadStatuses()
            {
                this.cbStatuses.Items.Add(new Ext.Net.ListItem("Pending", 1));
                this.cbStatuses.Items.Add(new Ext.Net.ListItem("Accepted", 4));
                this.cbStatuses.Items.Add(new Ext.Net.ListItem("Rejected", 7));
            }
    
            private void BindData()
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = this.GetDataNew();
                store.DataBind();
            }
    I also tried to create an object list as data source for the combo box (I specified display field and value field) - got same result.

    Thanks,
    Dennis.
  4. #4
    Hello Dennis!

    You forgot to add the stub/mock implementation for a GetDataNew() that is sufficient to reproduce the issue.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Here it is:
            
    private List<Data.Client> GetDataNew()
            {
                pi = new Data.ProjectInventory(4, 1);
                List<Data.Client> clntList = pi.GetClientsList();
    
                return clntList;
            }
    GetClientsList()

                    sql = "select * from vwClients where Project_ID = @projectid";
                    sqlparams = new object[] { "@projectid", this.ProjectID };
    
                    dtClients = sdm.ExecuteDataTable(sql, sqlparams);
    
                    clntList = (from DataRow dr in dtClients.Rows
                                select new Client()
                                {
                                    ID = Convert.ToInt32(dr["Client_ID"]),
                                    Name = dr["ClientName"].ToString(),
                                    Number = dr["ClientNumber"].ToString(),
                                    Note = dr["Note"].ToString(),
                                    NumberNew = dr["CLientNumber_Overlay"].ToString(),
                                    NameNew = dr["ClientName_Overlay"].ToString(),
                                    TransferStatus_ID = Convert.ToInt32(dr["TransferStatus_ID"])
                                }).ToList();
    
                    return clntList;
    Thanks,
    Dennis.
  6. #6
    Hello @Dennis.

    Can you provide a small set of mock data this clntList variable should have? It doesn't help much having the method implementation if it requires a database connection and data to work. We'd need a stub. We don't have the implementation for Data.Client either. A simple class/struct with the fields that are used for the mock data should suffice.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Fabricio, here it is.
        public class Client
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public string Number { get; set; }
            public string NameNew { get; set; }
            public string NumberNew { get; set; }
            public int TransferStatus_ID { get; set; }
            public string Note { get; set; }
        }
    Data Sample
    CLient_ID ClientName ClientNumber ClientName_Overlay ClientNumber_Overlay TransferStatus_ID Note
    10	My Test Client 1	00001	NULL	NULL	7	NULL
    11	My Test Client 2	00002	NULL	NULL	7	NULL
    TransferStatus_ID is 7 for both clients.

    Status lookup data:
    Pending, 1
    Accepted, 4
    Rejected, 7
    Fabricio, if that is easier, would you be able to provide an example or point me at one - where there is a grid panel with a (value/label) combo box field?

    Thanks,
    Dennis.
    Last edited by Dennis; Jun 01, 2020 at 8:17 PM.
  8. #8
    Fabricio, can you point me to where I can find an example I am looking for?

    Thanks,
    Dennis.
  9. #9
    Hello Dennis!

    Sorry I couldn't get down to your test case yet, if you are able to compile that into a single runnable test case, it would make things easier for us to reproduce the scenario and give you feedback on how to handle that scenario.

    If in doubt how to come up with test cases, please review our forum guidelines threads.

    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines

    As for your example request, I have this list of examples, all contains ext:ComboBox and all references DisplayField. The filter is quite simple so not necessarily in all samples the DisplayField is specified to the combo boxes (I checked the first example of the list and it does, though). So before you consider the example, check if it has a ComboBox defining the property before anything else.

    - DataView > ComponentView > Editor
    - Data_Binding > Basic > Chained_Combos
    - Data_Binding > Basic > Chaining_Selection
    - Events > Listeners > Arguments
    - Form > ComboBox > Ajax_Linked_Combos
    - Form > ComboBox > Custom_Drop_Down_List
    - Form > ComboBox > Custom_Search
    - Form > ComboBox > IconCombo
    - Form > ComboBox > Items_Actions
    - Form > ComboBox > Linked_ComboBoxes
    - Form > ComboBox > Linked_Combos_In_Grid
    - Form > ComboBox > Overview
    - Form > ComboBox > Two_Columns
    - Form > FieldContainer > Overview
    - Form > Miscellaneous > Checkout_Form
    - Form > Miscellaneous > Data_Binding
    - Form > Triggers > Trigger_with_Dialog_Editor
    - Getting_Started > Introduction > Component_Overview
    - GridPanel > Data_Presentation > Editor_Field_Mapping
    - GridPanel > Data_Presentation > MultiCombo_Map
    - GridPanel > FilterHeader > Mapped_Field_Filtering
    - GridPanel > Miscellaneous > Details_Window
    - GridPanel > Miscellaneous > Details_Window_Remote
    - GridPanel > MultiHeader > Filter
    - GridPanel > MultiHeader > Overview
    - Kitchen_Sink > Forms > Register
    - Miscellaneous > Bin_HtmlBin > Overview

    You may want to start from the Form > Combo Box examples, and/or the overview, basic or simple ones.

    Sorry it is a lot of examples, that's what I could gather in the earnest, and hope you can find examples that help you there. Notice this is noticeable less than the 750+ examples around our Examples Explorer, so should be helpful. :)

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Hi Fabricio,
    I have put together example with sample data, etc. It can be put in Visual studio and run as a stand alone app. Please take a look (You should see the ID of the status instead of the description in the combobox field on the far right):

    Test.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="LateralTransfer.Test" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <ext:ResourceManager runat="server" />
    
            <asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
                <Scripts>
                    <asp:ScriptReference Path="~/Scripts/ExtNet/PageFunctions.js" />
                </Scripts>
            </asp:ScriptManager>
    
            <h1>Editable GridPanel With Save To [DirectMethod]</h1>
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Editable GridPanel"
                Width="700"
                Height="350">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" Type="Int" />
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Number" />
                                    <ext:ModelField Name="Note" />
                                    <ext:ModelField Name="NumberNew" />
                                    <ext:ModelField Name="NameNew" />
                                    <ext:ModelField Name="Note" />
                                    <ext:ModelField Name="TransferStatus_ID" Type="Int" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="ID" DataIndex="ID" Width="35" />
                        <ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1">
                        </ext:Column>
                        <ext:Column runat="server" Text="Number" DataIndex="Number" Flex="1">
                        </ext:Column>
                        <ext:Column runat="server" Text="Name New" DataIndex="NameNew" Flex="1">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Number New" DataIndex="NumberNew" Flex="1">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Note" DataIndex="Note" Flex="1">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" DataIndex="TransferStatus_ID" Text="Status Select" Width="200">
                            <Editor>
                                <ext:ComboBox ID="cbStatuses" runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CellSelectionModel runat="server" />
                </SelectionModel>
                <Plugins>
                    <ext:CellEditing runat="server">
                        <Listeners>
                            <Edit Fn="edit" />
                        </Listeners>
                    </ext:CellEditing>
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Test.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    namespace LateralTransfer
    {
        public partial class Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                LoadStatuses();
    
                if (!X.IsAjaxRequest)
                {
                    this.BindData();
                }
    
            }
    
            private void LoadStatuses()
            {
                this.cbStatuses.Items.Add(new Ext.Net.ListItem("Pending", 1));
                this.cbStatuses.Items.Add(new Ext.Net.ListItem("Accepted", 4));
                this.cbStatuses.Items.Add(new Ext.Net.ListItem("Rejected", 7));
            }
    
            private void BindData()
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = this.GetDataNew();
                store.DataBind();
            }
            
            private List<Data.Client> GetDataNew()
            {
                List<Data.Client> clntList = new List<Data.Client>();
    
                clntList.Add(new Data.Client() { ID = 10, Name = "Client1", Number = "01", Note = "Client 1 Note", NumberNew = "01", NameNew = "Client1", TransferStatus_ID = 7 });
                clntList.Add(new Data.Client() { ID = 11, Name = "Client2", Number = "02", Note = "Client 2 Note", NumberNew = "02", NameNew = "Client2", TransferStatus_ID = 7 });
    
                return clntList;
            }
    
            [DirectMethod(Namespace = "ClientX")]
            public void EditNew(int id, string field, string oldValue, string newValue, object customer)
            {
                string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";
    
                // Send Message...
                X.Msg.Notify(new NotificationConfig()
                {
                    Title = "Edit Record #" + id.ToString(),
                    Html = string.Format(message, id, field, oldValue, newValue),
                    Width = 250,
                    Height = 150
                }).Show();
    
                this.GridPanel1.GetStore().GetById(id).Commit();
            }
    
        }
    }
    PageFunctions.js
    var template = 'color:{0};';
    
    var change = function (value, meta) {
        meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
        return value;
    };
    
    var pctChange = function (value, meta) {
        meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
        return value + "%";
    };
    
    var edit = function (editor, e) {
        /*
            "e" is an edit event with the following properties:
     
                grid - The grid
                record - The record that was edited
                field - The field name that was edited
                value - The value being set
                originalValue - The original value for the field, before the edit.
                row - The grid table row
                column - The grid Column defining the column that was edited.
                rowIdx - The row index that was edited
                colIdx - The column index that was edited
        */
    
        // Call DirectMethod
        //alert(e.value);
        if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
            ClientX.EditNew(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
        }
    };
    Thanks,
    Dennis.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Fill Combo-box store client side based on another Combo-box selection
    By speedstepmem4 in forum 3.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 12, 2015, 5:21 AM
  2. Replies: 6
    Last Post: Aug 25, 2011, 2:13 PM
  3. Replies: 3
    Last Post: Jun 03, 2011, 12:10 PM
  4. Editable Grid Panel with Combo box column
    By jigpatel06 in forum 1.x Help
    Replies: 1
    Last Post: Nov 03, 2010, 8:06 PM
  5. [CLOSED] Disable combo box label
    By CSG in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 02, 2009, 5:44 AM

Tags for this Thread

Posting Permissions