Aug 07, 2013, 7:46 AM
How to display value in DropDown on EDIT Mode?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.ScriptManager1.AddScript("flag = 'Exists';");
bindComboData();
bindGrid();
this.ScriptManager1.AddScript("ShowGrid();");
}
public class DepDetails
{
public int DepNo { get; set; }
public string DepName { get; set; }
}
public class EmpDetails
{
public string EmpName { get; set; }
public int DepNo { get; set; }
}
private void bindGrid()
{
List<EmpDetails> lstEmpDetails = new List<EmpDetails>();
lstEmpDetails.Add(new EmpDetails { EmpName = "Samu", DepNo = 1 });
lstEmpDetails.Add(new EmpDetails { EmpName = "Ramu", DepNo = 1 });
lstEmpDetails.Add(new EmpDetails { EmpName = "Kumar", DepNo = 2 });
lstEmpDetails.Add(new EmpDetails { EmpName = "Glady", DepNo = 2 });
lstEmpDetails.Add(new EmpDetails { EmpName = "Rani", DepNo = 1 });
storeGrid.DataSource = lstEmpDetails;
storeGrid.DataBind();
}
private void bindComboData()
{
List<DepDetails> lstDepDetails = new List<DepDetails>();
lstDepDetails.Add(new DepDetails { DepNo = 1, DepName = "Administration" });
lstDepDetails.Add(new DepDetails { DepNo = 2, DepName = "Marketing" });
storeDepartment.DataSource = lstDepDetails;
storeDepartment.DataBind();
}
</script>
<style type="text/css">
.edit-form-grid {
background-image: url("../images/slate/tabs/txt-bg.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;
background-color: #fff;
border-color: #888888;
}
</style>
<script type="text/javascript">
function ShowGrid() {
if (flag == "Exists") {
gridPanel.stopEditing(true);
}
}
var flag = "Exists";
var dpartment = false;
function department(value, meta, record, rowIndex, colIndex, store) {
if (flag == "Exists" && record.data.DepNo != null) {
var a = record.data.DepNo;
var des = storeDepartment.getById(a);
if (Ext.isEmpty(des)) {
return "";
}
return des.data.DepName;
}
else if (flag == '') {
if (dpartment == true) {
var a = storeDepartment.getById(value);
record.data.DepNo = value;
if (Ext.isEmpty(a)) {
return "";
}
return a.data.DepName;
}
else {
var a = record.data.DepNo;
var des = storeDepartment.getById(a);
if (Ext.isEmpty(des)) {
return "";
}
return des.data.DepName;
}
}
}
function addBooking() {
flag = '';
rowIndex = gridPanel.addRecord();
gridPanel.getView().refresh();
var recorddata = gridPanel.store.getAt(rowIndex);
recorddata.data.EmpName = '';
recorddata.data.Department = '';
gridPanel.getView().refreshRow(rowIndex);
gridPanel.getView().focusRow(parseInt(rowIndex));
gridPanel.startEditing(parseInt(rowIndex), 0);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ScriptManager1" runat="server">
</ext:ResourceManager>
<ext:Store ID="storeDepartment" runat="server">
<Reader>
<ext:JsonReader IDProperty="DepNo">
<Fields>
<ext:RecordField Name="DepNo"></ext:RecordField>
<ext:RecordField Name="DepName"></ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store ID="storeGrid" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="EmpName"></ext:RecordField>
<ext:RecordField Name="Department"></ext:RecordField>
<ext:RecordField Name="DepNo"></ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="gridPanel" runat="server" StoreID="storeGrid" Height="500">
<ColumnModel ID="columnModel1">
<Columns>
<ext:Column ColumnID="Department" Width="100" DataIndex="Department" Header="Department">
<Editor>
<ext:ComboBox ID="cmb_department" runat="server" Cls="edit-form-grid"
ForceSelection="true" StoreID="storeDepartment" ValueField="DepNo" DisplayField="DepName"
TriggerAction="All" Mode="Local" Editable="true">
<Listeners>
<Select Handler="dpartment = true;" />
</Listeners>
</ext:ComboBox>
</Editor>
<Renderer Fn="department" />
</ext:Column>
<ext:Column ColumnID="EmpName" Width="100" DataIndex="EmpName" Header="Employee Name">
<Editor>
<ext:TextField ID="txt_empName" runat="server" Cls="edit-form-grid" SelectOnFocus="true"></ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="DepNo" DataIndex="DepNo" Hidden="false"></ext:Column>
</Columns>
</ColumnModel>
<Buttons>
<ext:Button ID="btn_new" runat="server" AutoPostBack="false" Text="Add">
<Listeners>
<Click Delay="1" Handler="addBooking();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.ScriptManager1.AddScript("flag = 'Exists';");
bindComboData();
bindGrid();
this.ScriptManager1.AddScript("ShowGrid();");
}
public class DepDetails
{
public int DepNo { get; set; }
public string DepName { get; set; }
}
public class EmpDetails
{
public string EmpName { get; set; }
public int DepNo { get; set; }
}
private void bindGrid()
{
List<EmpDetails> lstEmpDetails = new List<EmpDetails>();
lstEmpDetails.Add(new EmpDetails { EmpName = "Samu", DepNo = 1 });
lstEmpDetails.Add(new EmpDetails { EmpName = "Ramu", DepNo = 1 });
lstEmpDetails.Add(new EmpDetails { EmpName = "Kumar", DepNo = 2 });
lstEmpDetails.Add(new EmpDetails { EmpName = "Glady", DepNo = 2 });
lstEmpDetails.Add(new EmpDetails { EmpName = "Rani", DepNo = 1 });
storeGrid.DataSource = lstEmpDetails;
storeGrid.DataBind();
}
private void bindComboData()
{
List<DepDetails> lstDepDetails = new List<DepDetails>();
lstDepDetails.Add(new DepDetails { DepNo = 1, DepName = "Administration" });
lstDepDetails.Add(new DepDetails { DepNo = 2, DepName = "Marketing" });
storeDepartment.DataSource = lstDepDetails;
storeDepartment.DataBind();
}
</script>
<style type="text/css">
.edit-form-grid {
background-image: url("../images/slate/tabs/txt-bg.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;
background-color: #fff;
border-color: #888888;
}
</style>
<script type="text/javascript">
function ShowGrid() {
if (flag == "Exists") {
gridPanel.stopEditing(true);
}
}
var flag = "Exists";
var dpartment = false;
function department(value, meta, record, rowIndex, colIndex, store) {
if (flag == "Exists" && record.data.DepNo != null) {
var a = record.data.DepNo;
var des = storeDepartment.getById(a);
if (Ext.isEmpty(des)) {
return "";
}
return des.data.DepName;
}
else if (flag == '') {
if (dpartment == true) {
var a = storeDepartment.getById(value);
record.data.DepNo = value;
if (Ext.isEmpty(a)) {
return "";
}
return a.data.DepName;
}
else {
var a = record.data.DepNo;
var des = storeDepartment.getById(a);
if (Ext.isEmpty(des)) {
return "";
}
return des.data.DepName;
}
}
}
function addBooking() {
flag = '';
rowIndex = gridPanel.addRecord();
gridPanel.getView().refresh();
var recorddata = gridPanel.store.getAt(rowIndex);
recorddata.data.EmpName = '';
recorddata.data.Department = '';
gridPanel.getView().refreshRow(rowIndex);
gridPanel.getView().focusRow(parseInt(rowIndex));
gridPanel.startEditing(parseInt(rowIndex), 0);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ScriptManager1" runat="server">
</ext:ResourceManager>
<ext:Store ID="storeDepartment" runat="server">
<Reader>
<ext:JsonReader IDProperty="DepNo">
<Fields>
<ext:RecordField Name="DepNo"></ext:RecordField>
<ext:RecordField Name="DepName"></ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store ID="storeGrid" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="EmpName"></ext:RecordField>
<ext:RecordField Name="Department"></ext:RecordField>
<ext:RecordField Name="DepNo"></ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="gridPanel" runat="server" StoreID="storeGrid" Height="500">
<ColumnModel ID="columnModel1">
<Columns>
<ext:Column ColumnID="Department" Width="100" DataIndex="Department" Header="Department">
<Editor>
<ext:ComboBox ID="cmb_department" runat="server" Cls="edit-form-grid"
ForceSelection="true" StoreID="storeDepartment" ValueField="DepNo" DisplayField="DepName"
TriggerAction="All" Mode="Local" Editable="true">
<Listeners>
<Select Handler="dpartment = true;" />
</Listeners>
</ext:ComboBox>
</Editor>
<Renderer Fn="department" />
</ext:Column>
<ext:Column ColumnID="EmpName" Width="100" DataIndex="EmpName" Header="Employee Name">
<Editor>
<ext:TextField ID="txt_empName" runat="server" Cls="edit-form-grid" SelectOnFocus="true"></ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="DepNo" DataIndex="DepNo" Hidden="false"></ext:Column>
</Columns>
</ColumnModel>
<Buttons>
<ext:Button ID="btn_new" runat="server" AutoPostBack="false" Text="Add">
<Listeners>
<Click Delay="1" Handler="addBooking();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</div>
</form>
</body>
</html>
