[CLOSED] Problem with Renderer & Editor

  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 9:34 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please always ask technical support questions on the Premium Help forum since you are a premium member.

    Just we can miss your question in the other forums.
  3. #3
    Will do. I thought I had...sorry! Feel free to move it if possible.
    Thanks!
    Jason
  4. #4
    No problem.

    Regarding the problem.

    Just the ComboBox's Store is not loaded yet, when editing logic assigns a value to it.

    I can suggest the following way to solve the problem.

    Example

    var onBeforeStartEdit_Instrument = function (editor, boundEl, value) {
        if (!editor.locked) {
            editor.field.store.reload({ 
                params : { 
                    Grade : editor.record.data.Grade, 
                    Sex : editor.record.data.Sex
                },
                callback : function () {
                    editor.locked = true;
                    gpStudents.startEditing(editor.row, editor.col);    
                    editor.locked = false;
                }
            });
            return false;
        }
    };
  5. #5
    That worked perfectly. Thanks! Feel free to close this one.
    Jason

Similar Threads

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

Posting Permissions