[CLOSED] Editable gridpanel not rendering dropdownfield value

[ljankowski]

Hello!

I have a Gridpanel that uses the rowediting plugin. In one of the fields, i have a dropdownfield that contains a Gridpanel for choosing a certain item. I use the same renderer that's used for the combobox at https://examples2.ext.net/#/GridPane...Field_Mapping/, but it does not display a value in the dropdownfield once it goes into edit mode. The renderer does work for displaying the value in the unedited Grid though. Here's a simplified version of the markup and renderer I'm using(I removed other columns from the grid)

<ext:Store runat="server"    ID="EmployeeEmpStore"
    PageSize="10"
    RemoteSort="true"
    OnReadData="deReadEmployeeData" AutoLoad="true">
    <Model>
        <ext:Model ID="Model1" runat="server" IDProperty="PERSON_ID">
            <Fields>
                <ext:ModelField Name="PERSON_ID" Type="Int" />
                <ext:ModelField Name="EMPLOYEE_NAME" Type="String" />
                <ext:ModelField Name="JOB_NAME" Type="String" />
            </Fields>
        </ext:Model>
    </Model>
    <Proxy>
        <ext:PageProxy />
    </Proxy>
    <Listeners>
        <Load Handler="#{uxEmployeeGrid}.getView().refresh()" />
    </Listeners>
</ext:Store>
<ext:GridPanel runat="server"
    ID="uxEmployeeGrid"
    Title="Employees"
    PaddingSpec="10 10 30 10"
    MaxWidth="1200">
    <Store>
        <ext:Store runat="server"
            ID="uxEmployeeStore">
            <Model>
                <ext:Model ID="Model2" runat="server" Name="Employee" IDProperty="PERSON_ID">
                    <Fields>
                        <ext:ModelField Name="EMPLOYEE_ID" />
                        <ext:ModelField Name="PERSON_ID" />
                        <ext:ModelField Name="EMPLOYEE_NAME" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    </Store>
    <ColumnModel>
        <Columns>
                <Editor>
                    <ext:DropDownField runat="server" Editable="false"
                        ID="uxAddEmployeeEqDropDown"
                        Mode="ValueText"
                        AllowBlank="true" Width="500">
                        <Component>
                            <ext:GridPanel runat="server"
                                ID="uxAddEmployeeEqGrid"
                                Layout="HBoxLayout" StoreID="uxAddEmployeeEqStore">
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ID="Column12" runat="server" Text="Name" DataIndex="NAME" Flex="15" />
                                        <ext:Column ID="Column42" runat="server" Text="Class Code" DataIndex="CLASS_CODE" Flex="35" />
                                        <ext:Column ID="Column43" runat="server" Text="Project Number" DataIndex="SEGMENT1" Flex="20" />
                                        <ext:Column ID="Column44" runat="server" DataIndex="ODOMETER_START" Text="Starting Units" Flex="15" />
                                        <ext:Column ID="Column45" runat="server" DataIndex="ODOMETER_END" Text="Ending Units" Flex="15" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel Mode="Single" />
                                </SelectionModel>
                                <DirectEvents>
                                    <SelectionChange OnEvent="deStoreGridValue">
                                        <ExtraParams>
                                            <ext:Parameter Name="EquipmentId" Value="#{uxAddEmployeeEqGrid}.getSelectionModel().getSelection()[0].data.EQUIPMENT_ID" Mode="Raw" />
                                            <ext:Parameter Name="Name" Value="#{uxAddEmployeeEqGrid}.getSelectionModel().getSelection()[0].data.NAME" Mode="Raw" />
                                            <ext:Parameter Name="Type" Value="EquipmentAdd" />
                                        </ExtraParams>
                                    </SelectionChange>
                                </DirectEvents>
                            </ext:GridPanel>
                        </Component>
                        <Listeners>
                            <Expand Handler="this.picker.setWidth(500);" />
                        </Listeners>
                    </ext:DropDownField>
                </Editor>
                <Renderer Fn="EmpEquipRenderer" />
            </ext:Column>
            <ext:Column ID="Column9" runat="server" DataIndex="PERSON_ID" Text="Employee Name" Flex="13">
                <Renderer Fn="EmployeeRenderer" />
                <Editor>
                    <ext:DropDownField runat="server"
                        ID="EmployeeEmpDropDown"
                        Mode="ValueText"
                        AllowBlank="false"
                        Editable="false" Width="500" InvalidCls="allowBlank">
                        <Component>
                            <ext:GridPanel runat="server"
                                ID="EmployeeEmpGrid"
                                Layout="HBoxLayout"
                                StoreID="EmployeeEmpStore">
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ID="Column6" runat="server" Text="Person ID" DataIndex="PERSON_ID" Flex="20" />
                                        <ext:Column ID="Column7" runat="server" Text="Name" DataIndex="EMPLOYEE_NAME" Flex="40" />
                                        <ext:Column ID="Column8" runat="server" Text="Job Name" DataIndex="JOB_NAME" Flex="40" />
                                    </Columns>
                                </ColumnModel>
                                <BottomBar>
                                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" />
                                </BottomBar>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                                </SelectionModel>
                                <DirectEvents>
                                    <SelectionChange OnEvent="StoreGridValue">
                                        <ExtraParams>
                                            <ext:Parameter Name="PersonId" Value="#{uxAddEmployeeEmpGrid}.getSelectionModel().getSelection()[0].data.PERSON_ID" Mode="Raw" />
                                            <ext:Parameter Name="Name" Value="#{uxAddEmployeeEmpGrid}.getSelectionModel().getSelection()[0].data.EMPLOYEE_NAME" Mode="Raw" />
                                            <ext:Parameter Name="Type" Value="EmployeeAdd" />
                                        </ExtraParams>
                                    </SelectionChange>
                                </DirectEvents>
                                <Plugins>
                                    <ext:FilterHeader runat="server" ID="EmployeeEmpFilter" Remote="true" />
                                </Plugins>
                            </ext:GridPanel>
                        </Component>
                        <Listeners>
                            <Expand Handler="this.picker.setWidth(500);" />
                        </Listeners>
                    </ext:DropDownField>
                </Editor>
            </ext:Column>
        </Columns>
    </ColumnModel>
    <Plugins>
        <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false" ID="test">
            <DirectEvents>
                <Edit OnEvent="deSaveEmployee" Before="return #{EmployeeStore}.isDirty();">
                    <ExtraParams>
                        <ext:Parameter Name="data" Value="#{EmployeeStore}.getChangedData({skipIdForPhantomRecords : false})" Mode="Raw" Encode="true" />
                    </ExtraParams>
                    <EventMask ShowMask="true" />
                </Edit>
            </DirectEvents>
        </ext:RowEditing>
    </Plugins>
</ext:GridPanel>

And here is my renderer

var EmployeeRenderer = function (value) {
    var r = App.EmployeeStore.getById(value);
    if (Ext.isEmpty(r)) {
        return "";
    }
    return r.data.EMPLOYEE_NAME;
};

I've noticed that if I set the dropdownfield to Text instead of ValueText, the PERSON_ID will display on edit, but no matter what I've tried, ValueText mode will not display anything.

Thanks in advance for your help.

[Daniil]

Hi @ljankowski,

When a GridPanel goes to the edit mode, it sets a value on editors like that:

editor.setValue("a record's value of the cell");

Also the Column's Renderer is not taken into account in the edit mode.

So, I can suggest to try the DropDownField without a GridPanel at all

dropDownField.setValue("some value");

to check how it applies the value.

[ljankowski]

I had it as a separate form previously, but now I'm converting it all to inline editing. When I'd assign the value before, I'd use the following

Dropdownfield.setValue(value, text);

But I'm not sure how to make that apply on an inline edit.

[Daniil]

I suggest to investigate the RowEditing plugin's sources to find where it calls .setValue(). You probably should override it.

[ljankowski]

Are you able to provide any assistance with that, or is it possible that the editrenderer would work?

[geoffrey.mcgill]

Can you provide a simplified sample demonstrating the full scenario? I'm assuming this should be fairly easy to diagnose once we can reproduce, but at this point we're basically guessing what could be wrong.

[ljankowski]

Yeah, I'll try to simplify it as much as I can.

[ljankowski]

Here's the best I could do.

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
    public class Department
    {
        public int ID { get; set; }
        public string Name { get; set; }


        public string GetIdPlusName()
        {
            return this.ID + ": " + this.Name;
        }


        public static List<Department> GetAll()
        {
            return new List<Department>
            {
                new Department { ID = 1, Name = "Department A" },
                new Department { ID = 2, Name = "Department B" },
                new Department { ID = 3, Name = "Department C" }
            };
        }
    }


    public class Employee
    {
        public int ID { get; set; }
        public string GUID { get; set; }
        public string Name { get; set; }
        public string Surname { get; set; }
        public int Department { get; set; }
        public string[] Phone { get; set; }


        public string GetFullName()
        {
            return this.Name + " " + this.Surname;
        }


        public static List<Employee> GetAll()
        {
            return new List<Employee>
            {
                new Employee
                {
                    ID = 1,
                    Name = "Nancy",
                    Surname = "Davolio",
                    Department = 1,
                    Phone = new string[] { "555-555-555", "777-777-777" }
                },
                new Employee
                {
                    ID = 2,
                    Name = "Andrew",
                    Surname = "Fuller",
                    Department = 3,
                    Phone = new string[] { "333-333-333", "111-111-111" }
                }
            };
        }
    }


    protected void Page_Load(object sender, EventArgs e)
    {
        Store store = this.GridPanel1.GetStore();


        store.DataSource = Employee.GetAll();
        Store2.DataSource = Department.GetAll();
    }


    protected void StoreValue(object sender, DirectEventArgs e)
    {
        DropDown1.SetValue(e.ExtraParams["ID"], e.ExtraParams["Name"]);
    }     
</script>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
    <title>Server Mapping - Ext.NET Examples</title>
    <script type="text/javascript">
        var RenderDepartment = function (value) {
            var r = App.Store2.getById(value);
            if (Ext.isEmpty(r)) {
                return "";
            }


            return r.data.Name;
        };
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />


        <ext:Store runat="server" ID="Store2">
            <Model>
                <ext:Model ID="Model2" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" />
                        <ext:ModelField Name="Name" />
                    </Fields>
                </ext:Model>
            </Model>
            <Listeners>
                <Load Handler="#{GridPanel1}.getView().refresh()" />
            </Listeners>
        </ext:Store>


        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="List"
            Icon="Application">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="Int" />
                                <ext:ModelField Name="Name" />
                                <ext:ModelField Name="Surname" />
                                <ext:ModelField Name="Department" />
                                <ext:ModelField Name="PhoneHome" ServerMapping="Phone[0]" />
                                <ext:ModelField Name="PhoneWork" ServerMapping="Phone[1]" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID" />
                    <ext:Column ID="Column2" runat="server" Text="NAME" DataIndex="Name" />
                    <ext:Column ID="Column3" runat="server" Text="SURNAME" DataIndex="Surname" />
                    <ext:Column ID="Column5" runat="server" Text="DEPARTMENT" DataIndex="Department">
                        <Editor>
                            <ext:DropDownField runat="server" Mode="ValueText" ID="DropDown1">
                                <Component>
                                    <ext:GridPanel runat="server" ID="GridPanel2" StoreID="Store2">
                                        <ColumnModel>
                                            <Columns>
                                                <ext:Column runat="server" DataIndex="ID" Text="ID" />
                                                <ext:Column runat="server" DataIndex="Name" Text="Name" />
                                            </Columns>
                                        </ColumnModel>
                                        <DirectEvents>
                                            <SelectionChange OnEvent="StoreValue">
                                                <ExtraParams>
                                                    <ext:Parameter Name="ID" Value="#{GridPanel2}.getSelectionModel().getSelection()[0].data.ID" Mode="Raw" />
                                                    <ext:Parameter Name="Name" Value="#{GridPanel2}.getSelectionModel().getSelection()[0].data.Name" Mode="Raw" />
                                                </ExtraParams>
                                            </SelectionChange>
                                        </DirectEvents>
                                    </ext:GridPanel>
                                </Component>
                                <Listeners>
                                    <Expand Handler="this.picker.setWidth(250)" />
                                </Listeners>
                            </ext:DropDownField>
                        </Editor>
                        <Renderer Fn="RenderDepartment" />
                    </ext:Column>
                    <ext:Column ID="Column7" runat="server" Text="PHONE HOME" DataIndex="PhoneHome" />
                    <ext:Column ID="Column8" runat="server" Text="PHONE WORK" DataIndex="PhoneWork" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowEditing runat="server" ClicksToEdit="1" AutoCancel="false" />
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>

[Daniil]

I can suggest the following solution. Please:

1. Set this for the DropDownField.

<CustomConfig>
    <ext:ConfigItem Name="setValue" Value="mySetValue" Mode="Raw" />
</CustomConfig>

2. Define this JavaScript function:

var mySetValue = function(value, text) {
    if (!text && !!value) {
        text = RenderDepartment(value);
    }

    Ext.net.DropDownField.prototype.setValue.call(this, value, text);
};

Also you will probably need to define a SyncValue for the DropDownField. Like how it is done here:
https://examples2.ext.net/#/Form/Dro...alueText_Mode/

[ljankowski]

It works for storing the value and displaying the text when editing, but when I submit the insert/update, the text for the dropdown disappears.