[CLOSED] Problem with Renderer & Editor
I have a column in my GridPanel that uses a renderer to change the numeric value of the field to its lookup representation. This renderer works fine when the field is non-editable. However, when I add an editor that is a combobox the renderer does not work the first time you click to edit the field. It works on subsequent clicks to edit fields. The column in question is the instrument column.<BR><BR>Here is my example code:<BR>
Code:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack && !global::Ext.Net.X.IsAjaxRequest)
{
BindStudentsStore();
}
}
protected void stStudents_Refresh(object sender, StoreRefreshDataEventArgs e)
{
BindStudentsStore();
}
protected void stInstruments_Refresh(object sender, StoreRefreshDataEventArgs e)
{
BindInstrumentsStore(Convert.ToInt32(e.Parameters["Grade"]), e.Parameters["Sex"]);
}
private void BindInstrumentsStore(int Grade, string Sex)
{
List<Instrument> instrumentsInList = new List<Instrument>()
{
new Instrument() { InstrumentId = 9, Name = "S" },
new Instrument() { InstrumentId = 10, Name = "A" },
new Instrument() { InstrumentId = 11, Name = "T" },
new Instrument() { InstrumentId = 12, Name = "B" }
};
stInstruments.DataSource = instrumentsInList;
stInstruments.DataBind();
}
private void BindStudentsStore()
{
List<ScheduleItem> instrumentsInList = new List<ScheduleItem>()
{
new ScheduleItem() { RowIndex = 0, AuditionStudentID = 54895, Instrument = "A", InstrumentID = 10, Sex = "F", Grade = 7, AuditionDetailID = 194 },
new ScheduleItem() { RowIndex = 1, AuditionStudentID = 54995, Instrument = "T", InstrumentID = 11, Sex = "M", Grade = 8, AuditionDetailID = 194 },
new ScheduleItem() { RowIndex = 2, AuditionStudentID = 54795, Instrument = "S", InstrumentID = 9, Sex = "F", Grade = 8, AuditionDetailID = 194 },
new ScheduleItem() { RowIndex = 3, AuditionStudentID = 54695, Instrument = "B", InstrumentID = 12, Sex = "M", Grade = 7, AuditionDetailID = 194 },
};
stStudents.DataSource = instrumentsInList;
stStudents.DataBind();
}
public class ScheduleItem
{
public ScheduleItem()
{
}
public int RowIndex { get; set; }
public int AuditionStudentID { get; set; }
public string Instrument { get; set; }
public int InstrumentID { get; set; }
public string Sex { get; set; }
public int Grade { get; set; }
public int AuditionDetailID { get; set; }
}
public class Instrument
{
public Instrument()
{
}
public int InstrumentId { get; set; }
public string Name { get; set; }
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Testing</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray">
</ext:ResourceManager>
<script type="text/javascript">
var onBeforeStartEdit_Instrument = function (editor, boundEl, value) {
//editor.field.setValue(editor.record.data.Instrument);
editor.field.store.reload({ params: { Grade: editor.record.data.Grade, Sex: editor.record.data.Sex} });
}
var instrumentRenderer = function (v, p, record, rowIndex) {
return record.data.Instrument;
};
</script>
<ext:Store ID="stStudents" runat="server" OnRefreshData="stStudents_Refresh">
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="25" Mode="Raw" />
</AutoLoadParams>
<Reader>
<ext:JsonReader IDProperty="AuditionStudentID">
<Fields>
<ext:RecordField Name="RowIndex" Type="Int" />
<ext:RecordField Name="AuditionStudentID" Type="Int" />
<ext:RecordField Name="Instrument" Type="String" />
<ext:RecordField Name="InstrumentID" Type="Int" />
<ext:RecordField Name="Sex" Type="String" />
<ext:RecordField Name="Grade" Type="Int" />
<ext:RecordField Name="AuditionDetailID" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store ID="stInstruments" runat="server" OnRefreshData="stInstruments_Refresh">
<Reader>
<ext:JsonReader IDProperty="InstrumentId">
<Fields>
<ext:RecordField Name="InstrumentId" Type="Int" />
<ext:RecordField Name="Name" Type="String" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="gpStudents" runat="server" Title="Students" StoreID="stStudents" Height="400" Margins="0 0 5 5" Icon="UserSuit">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:NumberColumn ColumnID="Grade" Sortable="true" DataIndex="Grade" Header="Grade" Format="0">
</ext:NumberColumn>
<ext:Column ColumnID="Sex" Sortable="true" DataIndex="Sex" Header="Sex">
</ext:Column>
<ext:Column ColumnID="Instrument" Sortable="true" DataIndex="InstrumentID" Header="Voice Part">
<Renderer Fn="instrumentRenderer" />
<Editor>
<ext:ComboBox AllowBlank="false" ValueField="InstrumentId" ForceSelection="true" Editable="false" DisplayField="Name" ID="ddlInstrument" runat="server" StoreID="stInstruments">
</ext:ComboBox>
</Editor>
<EditorOptions>
<Listeners>
<BeforeStartEdit Fn="onBeforeStartEdit_Instrument" />
</Listeners>
</EditorOptions>
</ext:Column>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="25" PageIndex="0" />
</BottomBar>
<LoadMask ShowMask="true" />
</ext:GridPanel>
</form>
</body>
</html>
