[CLOSED] DropDown as Grid editor with null values in Store (possibly a bug)

  1. #1

    [CLOSED] DropDown as Grid editor with null values in Store (possibly a bug)

    Hello

    I have a grid editor which is a drop down field and the problem is whenever this field's data is null in the store, there is a javascript error generated. this error comes from automatic validation from triggerfield's blur event and from editing done of the editor.
    please run the example when you select see the error in row number 6 and 7.
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
    
        protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
        {
            this.BindData();   
        }
    
        private void BindData()
        {
            var store = this.GridPanel1.GetStore();
            
            store.DataSource = this.Data;
            store.DataBind();
    
            Store_DD.DataSource = this.DataDD;
            Store_DD.DataBind();
        }
        private object[] DataDD
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new {Id=1, Text="First"},
                    new {Id=2, Text="Second"},
                    new {Id=3, Text="Third"}
                };
            }
        }
        
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { null, 71.72, 0.02, 0.03, now },//js error
                    new object[] { null, 71.72, 0.02, 0.03, now },//js error               
                    new object[] { "", 45.45, 0.73, 1.63, now } //Works
                };
            }
        }
    </script>
    
    <!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 runat="server">
        <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
           
                
    
    <ext:Store ID="Store_DD" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="Id">
                <Fields>
                    <ext:RecordField Name="Id" />
                    <ext:RecordField Name="Text"/>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server" 
                StripeRows="true"
                Title="Array Grid" 
                Width="600" 
                Height="290"
                AutoExpandColumn="Company"
                ClicksToEdit="1">
                <Store>
                    <ext:Store runat="server" OnRefreshData="MyData_Refresh">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company"/>
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:RowNumbererColumn />
                        <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" >
                                            <Editor>
                                                <ext:DropDownField ID="DropDownField1" runat="server" TriggerIcon="Ellipsis" Width="160"  
                                                ValidateOnEvent="false"
                                                >
                                                    <Component>
                                                        <ext:GridPanel runat="server" StoreID="Store_DD" Height="200" ID="GridPanel11">
                                                            <ColumnModel>
                                                                <Columns>
                                                                    <ext:Column Header="All" DataIndex="Text">
                                                                    </ext:Column>
                                                                </Columns>
                                                            </ColumnModel>
                                                            <SelectionModel>
                                                                <ext:CheckboxSelectionModel runat="server" ID="CheckboxSelectionModel1">                                                                
                                                                </ext:CheckboxSelectionModel>
                                                            </SelectionModel>
                                                        </ext:GridPanel>                                                   
                                                    </Component>                                    
                                                </ext:DropDownField>
                                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Price" Width="75" DataIndex="price" Editable="true">                       
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                    </Columns>
                </ColumnModel>
             
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Apr 02, 2012 at 2:48 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Confirmed, it doesn't support null values.

    You could convert it on RecordField level.
    <ext:RecordField Name="company">
        <Convert Handler="if (value === null) {
                              value = ''; 
                          }
    
                          return value;" />
    </ext:RecordField>
    Though, I think you will need to use a DropDownField in ValueText Mode.
    https://examples1.ext.net/#/Form/Dro...alueText_Mode/

    There should not be such problem.
  3. #3

    [CLOSED]

    Quote Originally Posted by Daniil View Post
    You could convert it on RecordField level.
    <ext:RecordField Name="company">
        <Convert Handler="if (value === null) {
                              value = ''; 
                          }
    
                          return value;" />
    </ext:RecordField>
    There should not be such problem.
    Thanks Daniil this worked for me. The other solution with ValueText mode does not fully work as you can not select more than one entry in the drop down, as soon as you select one the dropdown collapses.
  4. #4

    related question

    Hallo Daniil

    I know this thread is closed, but I have a related question to this thread and based on the sample provided.

    The problem with this drop down in the grid as grideditor is that you can enter a text but as long as you the grid'scell loses focus the text is removed. Using this drop down isolated from a grid, this problem does not exist.

    Any solution to allow editing the grid's cell keeping the drop down?
  5. #5
    I think you should set up:
    <EditorOptions AllowBlur="false" />
    for the Column and configure an additional trigger for the DropDownField to stop editing.

Similar Threads

  1. Replies: 3
    Last Post: Feb 21, 2012, 6:40 AM
  2. Replies: 7
    Last Post: Aug 12, 2011, 9:39 AM
  3. Grid Filters - null/empty values
    By nootn in forum Feature Requests
    Replies: 0
    Last Post: Jan 31, 2010, 8:30 PM
  4. Replies: 10
    Last Post: Jan 04, 2010, 4:37 PM
  5. [CLOSED] Editor Font Color Dropdown
    By HOWARDJ in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 16, 2009, 12:36 PM

Posting Permissions