PDA

View Full Version : [CLOSED] Editable gridpanel not rendering dropdownfield value



ljankowski
Sep 29, 2014, 4:42 PM
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 http://examples2.ext.net/#/GridPanel/Data_Presentation/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().getSele ction()[0].data.EQUIPMENT_ID" Mode="Raw" />
<ext:Parameter Name="Name" Value="#{uxAddEmployeeEqGrid}.getSelectionModel().getSele ction()[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().getSel ection()[0].data.PERSON_ID" Mode="Raw" />
<ext:Parameter Name="Name" Value="#{uxAddEmployeeEmpGrid}.getSelectionModel().getSel ection()[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({skipIdForPhantomR ecords : 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
Sep 30, 2014, 1:28 PM
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
Sep 30, 2014, 2:05 PM
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
Sep 30, 2014, 2:58 PM
I suggest to investigate the RowEditing plugin's sources to find where it calls .setValue(). You probably should override it.

ljankowski
Sep 30, 2014, 3:10 PM
Are you able to provide any assistance with that, or is it possible that the editrenderer would work?

geoffrey.mcgill
Sep 30, 2014, 4:31 PM
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
Sep 30, 2014, 4:34 PM
Yeah, I'll try to simplify it as much as I can.

ljankowski
Sep 30, 2014, 5:15 PM
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
Oct 01, 2014, 2:00 PM
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:
http://examples2.ext.net/#/Form/DropDownField/ValueText_Mode/

ljankowski
Oct 02, 2014, 8:09 PM
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.

Daniil
Oct 03, 2014, 11:07 AM
I guess this is executed in the RenderDepartment:

return "";

ljankowski
Oct 03, 2014, 7:36 PM
This is my renderer:



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

The odd part is, the value is read in properly, but r returns null. If I add a breakpoint on the var r line there and manually run the line, it works, but it does not work when actually running. I'm at a loss.

Daniil
Oct 04, 2014, 9:11 AM
I think the types mismatch - string and int.


.getById(2)
and

.getById("2")
are different things.

If you set this it should start working, I think.

<ext:ModelField Name="Department" Type="Int" />

By the way, do you really need a DirectEvent for that?

<SelectionChange OnEvent="StoreValue">

I would highly recommend to apply a value client side without a request to server.