[CLOSED] Problem with Renderer & Editor

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [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>
    <%@ 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>
    Last edited by geoffrey.mcgill; Sep 20, 2011 at 8:34 PM. Reason: [CLOSED]

Similar Threads

  1. Problem with column editor
    By wszbdyyy in forum 2.x Help
    Replies: 1
    Last Post: Aug 14, 2012, 10:52 AM
  2. Replies: 1
    Last Post: Nov 11, 2010, 12:19 PM
  3. combobox editor problem
    By adayioglu in forum 1.x Help
    Replies: 1
    Last Post: Oct 25, 2010, 10:45 PM
  4. Replies: 18
    Last Post: Apr 14, 2010, 2:00 PM
  5. Replies: 5
    Last Post: Jun 10, 2009, 5:13 AM

Posting Permissions