PDA

View Full Version : GridPanel ComboBox editor using PageProxy: Display blank column



gefran
Sep 15, 2014, 10:40 PM
Hi,

I changed 'Editor Field Mapping' demo (http://examples2.ext.net/#/GridPanel/Data_Presentation/Editor_Field_Mapping) to populate departments ComoboBox using the PageProxy instead. The 'department' column is blank and only shows the DisplayField when the editor is activated. I'm doing something wrong?

Below a sample in order to reproduce the issue:



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

<%@ Import Namespace="System.Collections.Generic" %>

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

this.Store1.DataSource = Employee.GetAll();
this.Store1.DataBind();
}

protected void fillCombo(object sender, StoreReadDataEventArgs e)
{
this.StoreCombo.DataSource = Department.GetAll();
this.StoreCombo.DataBind();
}

public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
public Department Department { get; set; }

public int DepartmentId
{
get { return this.Department != null ? this.Department.ID : -1; }
}

public static List<Employee> GetAll()
{
return new List<Employee>
{
new Employee
{
ID = 1,
Name = "Nancy",
Surname = "Davolio",
Department = Department.GetAll()[0]
},
new Employee
{
ID = 2,
Name = "Andrew",
Surname = "Fuller",
Department = Department.GetAll()[2]
}
};
}
}

public class Department
{
public int ID { get; set; }
public string Name { get; set; }

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"}
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Editor Field Mapping - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var departmentRenderer = function (value) {
var r = App.StoreCombo.getById(value);

if (Ext.isEmpty(r)) {
return "";
}

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

<ext:Store ID="StoreCombo" runat="server" OnReadData="fillCombo">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:GridPanel
Height="100"
runat="server"
Title="List"
Icon="Application">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Surname" />
<ext:ModelField Name="DepartmentId" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="ID" />
<ext:Column runat="server" Text="NAME" DataIndex="Name" />
<ext:Column runat="server" Text="SURNAME" DataIndex="Surname" />
<ext:Column runat="server" Text="DEPARTMENT" DataIndex="DepartmentId" Width="240">
<Renderer Fn="departmentRenderer" />
<Editor>
<ext:ComboBox
runat="server"
QueryMode="Remote"
Editable="false"
StoreID="StoreCombo"
DisplayField="Name"
ValueField="ID" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>


Thank you in advance.

Daniil
Sep 16, 2014, 6:20 AM
Hi @gefran,

Welcome to the Ext.NET forums!

A PageProxy loads the data asynchronously. It means that this line

var r = App.StoreCombo.getById(value);
is being executed before the StoreCombo gets the data.

You could get the test case working by setting up

AutoLoad="false"
for the Store1 and this Listener

<Listeners>
<Load Handler="App.Store1.load();" Single="true" />
</Listeners>
for the StoreCombo.

These changes will make the GridPanel to be rendered when all the required data is already loaded to a browser.

By the way, there is no need to data bind the Store1 on each request. Please use this Page_Load instead the existing one:

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = Employee.GetAll();
}
}

gefran
Sep 16, 2014, 10:53 PM
That works, thank you Daniil!


You can close this thread, thanks again.