Oct 28, 2010, 6:34 PM
[CLOSED] [1.0]ComboBox editor in GridPanel is not refreshed before first edit
I have a GridPanel with a ComboBox editor in one of the columns. I would like to be able filter the contents of the ComboBox for each line of the grid. I want Type 1 and Type 2 to be in the ComboBox on the first line and Type 3 and Type 4 on the second line.
stoSkillType and stoLineSkillType have LineNumber field that I use to filter the ComboBox in fnBeforeEdit (I add records matching the grid line number from stoSkillType to stoLineSkillType). When I click to edit Type column for the first time the ComboBox is empty. After that ComboBox editor works as expected. I checked stoLineSkillType and it contains the right data during ComboBox BeforeRender event. Please let me know what I can do to get stoLineSkillType data to appear in the ComboBox on the first edit.
P.S. I tried using store.filterBy(filterFunction) to filter ComboBox store but it did not work inside the GridPanel, so I came up with this two store solution.
stoSkillType and stoLineSkillType have LineNumber field that I use to filter the ComboBox in fnBeforeEdit (I add records matching the grid line number from stoSkillType to stoLineSkillType). When I click to edit Type column for the first time the ComboBox is empty. After that ComboBox editor works as expected. I checked stoLineSkillType and it contains the right data during ComboBox BeforeRender event. Please let me know what I can do to get stoLineSkillType data to appear in the ComboBox on the first edit.
P.S. I tried using store.filterBy(filterFunction) to filter ComboBox store but it did not work inside the GridPanel, so I came up with this two store solution.
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
<script type="text/javascript">
var fnBeforeEdit = function (e) {
if (e.column == 1) {
stoLineSkillType.removeAll();
for (var i = 0; i < stoSkillType.getCount(); i++) {
if (stoSkillType.getAt(i).data.LineNumber == e.row) {
stoLineSkillType.add(stoSkillType.getAt(i));
}
}
}
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="stoSkills" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="Skill" />
<ext:RecordField Name="TypeId" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:Store ID="stoSkillType" runat="server">
<Reader>
<ext:ArrayReader IDProperty="SkillTypeId">
<Fields>
<ext:RecordField Name="SkillTypeId" />
<ext:RecordField Name="Description" />
<ext:RecordField Name="LineNumber" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:Store ID="stoLineSkillType" runat="server">
<Reader>
<ext:ArrayReader IDProperty="SkillTypeId">
<Fields>
<ext:RecordField Name="SkillTypeId" />
<ext:RecordField Name="Description" />
<ext:RecordField Name="LineNumber" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="gdSkills" runat="server" StoreID="stoSkills" AutoHeight="true">
<Listeners>
<BeforeEdit Fn="fnBeforeEdit" />
</Listeners>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Skill" DataIndex="Skill">
<Editor>
<ext:TextField runat="server"></ext:TextField>
</Editor>
</ext:Column>
<ext:Column Header="Type" DataIndex="TypeId">
<Editor>
<ext:ComboBox runat="server" StoreID="stoLineSkillType" ValueField="SkillTypeId" DisplayField="Description" Editable="false"></ext:ComboBox>
</Editor>
<Renderer Handler="if (#{stoSkillType}.getById(value)) return #{stoSkillType}.getById(value).get('Description')" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>Imports Ext.Net
Partial Class example
Inherits System.Web.UI.Page
Private Sub example_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Ext.Net.X.IsAjaxRequest Then
Dim r1() As Object = {1, "Type 1", 0}
Dim r2() As Object = {2, "Type 2", 0}
Dim r3() As Object = {3, "Type 3", 1}
Dim r4() As Object = {4, "Type 4", 1}
Dim dtSource() As Object = {r1, r2, r3, r4}
stoSkillType.DataSource = dtSource
stoSkillType.DataBind()
r1 = {"Skill 1", 1}
r2 = {"Skill 2", 4}
dtSource = {r1, r2}
stoSkills.DataSource = dtSource
stoSkills.DataBind()
End If
End Sub
End Class
Last edited by Daniil; Oct 29, 2010 at 7:25 AM.
Reason: [CLOSED]
