ext.net combo box not displaying an initial value

StackOverflow https://stackoverflow.com/questions/8975955

  •  12-11-2019
  •  | 
  •  

Question

I need to add combobox fields to a gridpanel. I added combo boxes, but they are not showing the original selection. When I click on the dropdown, I get all the dropdown values correctly and can select a value for a field. The problen with the initial selection. I'm new to ext.net and I'm suspecting that something is not done in the correct order.

Thanks,

Jenny

This is the codebehind EditExample.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DataTypes;
using Ext.Net;

namespace myApp
{
    public class info
    {
        public string Name { get; set; }
        public string Code { get; set; }
        public Description aDescription { get; set; }

        public int DescriptionId
        {
            get { return this.aDescription != null ? this.aDescription.id : -1; }
        }

        public static List<info> GetAll()
        {
            return new List<info>
            {
                new info { Code = "1", aDescription = Description.GetAt(1), Name = "" },
                new info { Code = "2", aDescription = Description.GetAt(2), Name = "2 Names" },
                new info { Code = "3", aDescription = Description.GetAt(3), Name = "3 Names" },
                new info { Code = "4", aDescription = Description.GetAt(4), Name = "4 Names" },
                new info { Code = "5", aDescription = Description.GetAt(5), Name = "5 Names" },
                new info { Code = "6", aDescription = Description.GetAt(6), Name = "6 Names" } 
            };
        }
    }

    public class Description
    {
        public int id {get; set; }
        public string description { get; set; }

        public static Description GetAt( int Index )
        {
            return new Description { description = "Description: " + Index, id = Index };
        }

        public static List<Description> GetAll(int max)
        {
            List<Description> all = new List<Description>();
            for ( int i = 1; i <= max; i++ )
            {
                Description thisDesc = new Description { description = "Description: " + i, id = i };
                all.Add( thisDesc );
            };
            return all;
        }
    }

    public partial class EditExample : System.Web.UI.Page
    {
        public List<info> thisInfo = new List<info>();
        public List<Description> thisCombo = new List<Description>();

        protected void Page_Load( object sender, EventArgs e )
        {
            thisCombo = Description.GetAll(5);
            thisInfo = info.GetAll();

            this.extStore.DataSource = thisInfo;

            this.extStoreCombo.DataSource = thisCombo;
            this.extStoreCombo.DataBind(); this.extStore.DataBind();

       }
    }

This is the ExitExample.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditExample.aspx.cs" Inherits="myApp.EditExample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        var onBeforeEdit = function (e) {
            var column = e.grid.getColumnModel().columns[e.column],
          ed = column.getCellEditor(e.row);
            if (ed && (e.value != '' && e.value != undefined)) {
                return false;
            }
        }

        var descriptionRenderer = function (id) {
            var r = extStoreCombo.getById(id);

            if (Ext.isEmpty(r)) {
                return "";
            }

            return r.data.description;
        };


        </script>

</head>
<body>
    <form id="form1" runat="server">

    <ext:ResourceManager runat="server" />
    <ext:Store ID="extStore" runat="server" >
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name = "Name" />
                        <ext:RecordField Name = "Code" ></ext:RecordField>
                        <ext:RecordField Name = "DescriptionId" ></ext:RecordField>
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
    <div>
    <ext:GridPanel ID="extGrd" runat="server" StripeRows="true" TrackMouseOver="true"
    StoreID="extStore" Cls="x-grid-custom" 
    Height="250px" Layout="fit">
    <ColumnModel ID="cmFC" runat="server">  
        <Columns>
            <ext:Column ColumnID="Name" DataIndex="Name" Header="Name">
            <Editor>
                <ext:TextField ID = "TextField2" runat = "server"/>
            </Editor>
            </ext:Column>
            <ext:Column ColumnID="Code" DataIndex="Code" Header="Code">
            </ext:Column>
            <ext:Column ColumnID="DescriptionId" DataIndex="DescriptionId" Header="Description" Editable ="true" >
                <Renderer fn="descriptionRenderer" />
                <Editor>
                    <ext:ComboBox ID="cbDescription" runat="server"  Mode="Remote" LazyRender="true"
                    TriggerAction="All" DisplayField ="description" ValueField = "id" Editable="false" ForceSelection="true">
                    <Store>
                        <ext:Store ID="extStoreCombo" runat="server">
                        <Reader>
                            <ext:JsonReader IDProperty="id">
                            <Fields>
                                <ext:RecordField Name="id" />
                                <ext:RecordField Name="description" />
                            </Fields>
                            </ext:JsonReader>
                        </Reader>
                        </ext:Store>
                    </Store>
                        <%--<Listeners>
                            <Select Fn="onSelect" />
                        </Listeners>--%>
                    </ext:ComboBox>
                </Editor>
            </ext:Column>
            <ext:CheckColumn ColumnID="Check" DataIndex = "Check" Header = "Check" Editable = "true">
            </ext:CheckColumn>
        </Columns>  
    </ColumnModel>
    <Listeners>
        <BeforeEdit Fn="onBeforeEdit" />
<%--        <CellClick Fn="setEditor2" /> --%>
        <Render Handler="this.getColumnModel().setEditable(3, true);" />
    </Listeners>
    <SelectionModel>
        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" MoveEditorOnEnter="true"/>
    </SelectionModel>   
    <LoadMask ShowMask="true" />
    </ext:GridPanel>
    </div>
    <div>
    <ext:Button ID="btnSubmitHH" runat="server" Text="Submit Household" Icon="Accept" Disabled="true">
        <DirectEvents>
            <Click OnEvent="SubmitHH">
                <Confirmation ConfirmRequest="true" Message="Are you sure you want to submit?" />
            </Click>
        </DirectEvents>
    </ext:Button>
    </div>
    </form>
</body>
</html>
Was it helpful?

Solution

I spent some time cleaning up your sample, and the following appears to function correctly. I think the important change was moving the <ext:Store> config out of ComboBox. The ComboBox Store only needs to be configured once on the Page, somewhere higher up.

Example

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    public List<info> thisInfo = new List<info>();
    public List<Description> thisCombo = new List<Description>();

    protected void Page_Load(object sender, EventArgs e)
    {
        thisCombo = Description.GetAll(5);
        thisInfo = info.GetAll();

        this.Store1.DataSource = thisInfo;
        this.Store1.DataBind();

        this.Store2.DataSource = thisCombo;
        this.Store2.DataBind();
    }

    public class info
    {
        public string Name { get; set; }
        public string Code { get; set; }
        public Description aDescription { get; set; }

        public int DescriptionId
        {
            get { return this.aDescription != null ? this.aDescription.id : -1; }
        }

        public static List<info> GetAll()
        {
            return new List<info>
            {
                new info { Code = "1", aDescription = Description.GetAt(1), Name = "" },
                new info { Code = "2", aDescription = Description.GetAt(2), Name = "2 Names" },
                new info { Code = "3", aDescription = Description.GetAt(3), Name = "3 Names" },
                new info { Code = "4", aDescription = Description.GetAt(4), Name = "4 Names" },
                new info { Code = "5", aDescription = Description.GetAt(5), Name = "5 Names" },
                new info { Code = "6", aDescription = Description.GetAt(6), Name = "6 Names" } 
            };
        }
    }

    public class Description
    {
        public int id { get; set; }
        public string description { get; set; }

        public static Description GetAt(int Index)
        {
            return new Description 
            { 
                description = "Description: " + Index, 
                id = Index 
            };
        }

        public static List<Description> GetAll(int max)
        {
            List<Description> all = new List<Description>();

            for (int i = 1; i <= max; i++)
            {
                Description thisDesc = new Description 
                { 
                    description = "Description: " + i, 
                    id = i 
                };

                all.Add(thisDesc);
            };

            return all;
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head runat="server">
    <title>Ext.NET Example</title>
    <script type="text/javascript">
        var descriptionRenderer = function (id) {
            var r = Store2.getById(id);

            return Ext.isEmpty(r) ? "" : r.data.description;
        };
</script>
</head>
<body>
<form runat="server">
    <ext:ResourceManager runat="server" />

    <ext:GridPanel runat="server" Height="250">
        <Store>
            <ext:Store ID="Store1" runat="server" >
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Code" />
                            <ext:RecordField Name="DescriptionId" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <Bin>
            <ext:Store ID="Store2" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="id">
                        <Fields>
                            <ext:RecordField Name="id" />
                            <ext:RecordField Name="description" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Bin>
        <ColumnModel runat="server">  
            <Columns>
                <ext:Column ColumnID="Name" DataIndex="Name" Header="Name">
                    <Editor>
                        <ext:TextField runat = "server"/>
                    </Editor>
                </ext:Column>
                <ext:Column ColumnID="Code" DataIndex="Code" Header="Code" />
                <ext:Column 
                    ColumnID="DescriptionId" 
                    DataIndex="DescriptionId" 
                    Header="Description" 
                    Editable="true">
                    <Renderer fn="descriptionRenderer" />
                    <Editor>
                        <ext:ComboBox 
                            runat="server"  
                            DisplayField ="description" 
                            ValueField = "id" 
                            Editable="false" 
                            ForceSelection="true"
                            StoreID="Store2"
                            />
                    </Editor>
                </ext:Column>
            </Columns>  
        </ColumnModel>
    </ext:GridPanel>
</form>
</body>
</html>

Hope this helps.

OTHER TIPS

Just remove Mode="Remote" to show initial selectyed value correctly

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top