Jun 18, 2018, 8:09 AM
Please help after select ComboBox in ComponentColumn doesn't show select value - it show blank.
Please help After select ComboBox in ComponentColumn doesn't show select value - it show blank.
Index.cshtml
Index.cshtml
@using Ext.Net.MVC;
@model object[]
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Sample</title>
<link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
<style>
/* search-item
-----------------------------------------------------------------------------------------------*/
.search-item {
font : normal 11px tahoma, arial, helvetica, sans-serif;
padding : 3px 10px 3px 10px;
border : 1px solid #fff;
border-bottom : 1px solid #eeeeee;
white-space : normal;
color : #555;
}
.search-item h3 {
display : block;
font : inherit;
font-weight : bold;
color : #222;
margin :0px;
}
.search-item h3 span {
float : right;
font-weight : normal;
margin : 0 0 5px 5px;
width : 100px;
display : block;
clear : none;
}
</style>
</head>
<body>
@(Html.X().ResourceManager())
@( Html.X().GridPanel()
.ID("DepartmentGridPanel")
.Store(Html.X().Store()
.ID("DepartmentStore")
.Model(
Html.X().Model()
.IDProperty("ID")
.Fields(
new ModelField("ID", ModelFieldType.Int),
new ModelField("Name", ModelFieldType.String),
new ModelField("Surname", ModelFieldType.String),
new ModelField("DepartmentId", ModelFieldType.String),
new ModelField("DepartmentName", ModelFieldType.String)
))
.DataSource(Model[0])
)
.ColumnModel(cols =>
{
cols.Columns.Add(Html.X().Column().Text("Name").DataIndex("Name").Sortable(false).Width(256));
cols.Columns.Add(Html.X().Column().Text("Surname").DataIndex("Surname").Sortable(false).Width(256));
cols.Columns.Add(Html.X().ComponentColumn().Sortable(false).Text("Department").DataIndex("DepartmentId").Width(150).Editor(true).Component(
Html.X().ComboBox()
.DisplayField("Code")
.ValueField("ID")
.FieldStyle("text-transform: uppercase;")
.TypeAhead(true)
.MinChars(0)
.PageSize(10)
.SelectOnTab(true)
.ForceSelection(true)
.ValidateOnBlur(true)
.ValidateOnChange(true)
.ListConfig(Html.X().BoundList()
.LoadingText("Searching...")
.ItemTpl(Html.X().XTemplate()
.Html(@<text>
<tpl for=".">
<div class="search-item">
<h3>{Code}</h3>
{Name}
</div>
</tpl>
</text>))
.MinWidth(400)
)
.Store(Html.X().Store().AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("LookupData"))
.Reader(Html.X().JsonReader().RootProperty("data").TotalProperty("total")))
.Model(Html.X().Model()
.IDProperty("ID")
.Fields(
new ModelField("ID", ModelFieldType.Int),
new ModelField("Code", ModelFieldType.String),
new ModelField("Description", ModelFieldType.String)
)
)
.Data(Model[1])
)
)
.SilentSave(false)
.Listeners(ls =>
{
ls.Edit.Handler = @"e.record.data.DepartmentName = e.cmp.findRecordByValue(e.cmp.getValue()).data.Name;";
})
);
cols.Columns.Add(Html.X().Column().Text("Department Name").DataIndex("DepartmentName").Sortable(false).Width(256));
})
)
</body>
</html>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using ExtNet_Example1.Models;
namespace ExtNet_Example1.Controllers
{
public class ExtNetController : Controller
{
public ActionResult Index()
{
List<Employee> emps = new List<Employee>()
{
new Employee()
{
ID = 1,
Name = "Nancy",
Surname = "Davolio",
DepartmentId = 1,
DepartmentName = "Department 01"
},
new Employee()
{
ID = 2,
Name = "Andrew",
Surname = "Fuller",
DepartmentId = 4,
DepartmentName = "Department 04"
},
};
List<Department> deps = new List<Department>()
{
new Department {ID = 1, Code = "01", Name = "Department 01"},
new Department {ID = 4, Code = "04", Name = "Department 04"},
};
return this.View(new object[]
{
emps,
deps
});
}
public ActionResult LookupData(StoreRequestParameters parameters)
{
var data = (from x in Department.GetAll()
where x.Code.Contains(parameters.Query)
select x).ToList();
return this.Store(data, data.Count);
}
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
public string DepartmentName { get; set; }
public int DepartmentId { get; set; }
}
public class Department
{
public int ID { get; set; }
public string Code { get; set; }
public string Name { get; set; }
public static List<Department> GetAll()
{
return new List<Department>
{
new Department {ID = 1, Code = "01", Name = "Department 01"},
new Department {ID = 2, Code = "02", Name = "Department 02"},
new Department {ID = 3, Code = "03", Name = "Department 03"},
new Department {ID = 4, Code = "04", Name = "Department 04"},
new Department {ID = 5, Code = "05", Name = "Department 05"},
new Department {ID = 6, Code = "06", Name = "Department 06"},
new Department {ID = 7, Code = "07", Name = "Department 07"},
new Department {ID = 8, Code = "08", Name = "Department 08"},
new Department {ID = 9, Code = "09", Name = "Department 09"},
new Department {ID = 10, Code = "10", Name = "Department 10"},
};
}
}
}
}
