GridPanel - Editable - Combo Box Shows Value instead of Label

Page 2 of 2 FirstFirst 12
  1. #11
    Hello @Dennis!

    You missed the definition of Client.Data, and I am assuming a simple wrap-up like this should work:

    public class Data
    {
        public class Client
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public string Number { get; set; }
            public string Note { get; set; }
            public string NumberNew { get; set; }
            public string NameNew { get; set; }
            public int TransferStatus_ID { get; set; }
        }
    }
    Then I compiled your sample in a single-file code, which seems to work for me (I will paste the compiled version last in the post). Please consider reviewing it should it help you post test cases in the future (simpler one file than several, right?).

    Anyway, I finally can understand your issue -- I believe. The combo box is correct. There's no issue with it at all. If I double-click a cell in the last column, the combo box shows the correct display field. What I believe you are having trouble with, is to have the cell display the corresponding string to the number it originally has.

    For that, you'd need to use a renderer to map the displayed value in the cell. You can still use the combo store to do the mapping.

    An example of a renderer you could use in your example is what follows:

    1: add this javascript function to your javascript bundle
    var translateTransferStatus = function (value, meta) {
        var store = App.cbStatuses.getStore(),
            record_id = store.find('field1', value),
            record, translatedValue;
    
        if (record_id >= 0) {
            record = store.getAt(record_id);
            translatedValue = record.get('field2');
        } else {
            translatedValue = "Unknown (" + value + ")";
        }
    
        return translatedValue;
    }
    2: To the Status Select column, add a renderer referencing to that function above
    <Renderer Fn="translateTransferStatus" />
    Then always, just before the cell is "printed" on screen (rendered), it will pull the corresponding value given the ID straight from the combo box's store -- or print Unknown (N) if it couldn't find a corresponding entry in the combo box.

    With these changes, and also adding another row with a client having a number not corresponding do a valid entry in the combo box, the "compiled" example based on what you provided would be:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        public class Data
        {
            public class Client
            {
                public int ID { get; set; }
                public string Name { get; set; }
                public string Number { get; set; }
                public string Note { get; set; }
                public string NumberNew { get; set; }
                public string NameNew { get; set; }
                public int TransferStatus_ID { get; set; }
            }
        }
    
        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 });
            clntList.Add(new Data.Client() { ID = 12, Name = "Client5", Number = "04", Note = "Client 5 Note", NumberNew = "08", NameNew = "Client7", TransferStatus_ID = 17 });
    
            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();
        }
    </script>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            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);
                }
            };
    
            var translateTransferStatus = function (value, meta) {
                var store = App.cbStatuses.getStore(),
                    record_id = store.find('field1', value),
                    record, translatedValue;
    
                if (record_id >= 0) {
                    record = store.getAt(record_id);
                    translatedValue = record.get('field2');
                } else {
                    translatedValue = "Unknown (" + value + ")";
                }
    
                return translatedValue;
            }
        </script>
    </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>
                            <Renderer Fn="translateTransferStatus" />
                        </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>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  2. #12
    Thank you Fabricio - that worked!
    I have one more question. As I understand - In the Edit function the following call is supposed to commit the changes within the Store. How do I subscribe to the update event to have my code notified of the changes so that I could make updates in the underlying DB? What is the best way of doing that?

    this.GridPanel1.GetStore().GetById(id).Commit();

    Thanks,
    Dennis.
  3. #13
    Hi Dennis. Looks like you're changing the subject of the original thread, so it would be best to start a new thread with your new question.

    Please ensure you wrap code samples in [CODE] tags.
    Geoffrey McGill
    Founder
Page 2 of 2 FirstFirst 12

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